更改图像（打开和关闭）菜单按钮

Question

我有一组菜单的visable在

http://carbonyzed.co.uk/menu/2/

现在，当您单击MENU按钮UL eliment打开，但我也需要menu.png项目（按钮）改变为全宽版本，我们将调用menu_open.png。

这里是HTML代码

<div class="sidebar"> 
<a href="#" onclick="return showOrHide('menulink');"><div class="logo">TEST IMAGE</div></a> 
<ul id="menulink"> 
    <li> 
     <a href="#">Campaigns </a> 
     <ul class="submenu"> 
      <li><a href="#">Sub Menu1</a></li> 
      <li><a href="#">Sub Menu2</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Links </a> 
     <ul class="submenu"> 
      <li><a href="#">Sub Menu1</a></li> 
      <li><a href="#">Sub Menu2</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Media </a> 
     <ul class="submenu"> 
      <li><a href="#">Sub Menu1</a></li> 
      <li><a href="#">Sub Menu2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">History</a></li> 
    <li> 
     <a href="#">Messages </a>   
     <ul class="submenu"> 
      <li><a href="#">Sub Menu1</a></li> 
      <li><a href="#">Sub Menu2</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Maintenance </a>    
     <ul class="submenu"> 
      <li><a href="#">Sub Menu1</a></li> 
      <li><a href="#">Sub Menu2</a></li> 
     </ul> 
    </li> 
</ul> 
</div> 

这里是依赖CSS部分（或因此我认为）

.logo { 
display: block; 
text-indent: -9999px; 
text-transform: capitalize; 
background: url(../images/menu.png) no-repeat; 
height: 120px; 
} 
#menulink { 
display: none; 
} 
.sidebar { 
height: 100%; 
min-height: 100%; 
width: 213px; 
/**CODE - background: url(../images/sidebarBg.png); - here**/ 

float: left; 
position: absolute; 
top: 0; 
} 

/** MENU **/ 



ul { 
margin: 0; 
padding: 0; 
display: none; 
list-style: none; 
background: url(../images/sidebarBg.png); 
} 

ul li { 
background: url(../images/listBg.png) bottom no-repeat; 
text-indent: 50px; 
} 

ul li a { 
color: white; 
display: block; 
text-decoration: none; 
padding: 21px; 
width: 170px; 
text-shadow: 1px 1px 0 #191b20; 
position:relative; 
} 
ul li:hover { 
background: url(../images/listBgGreen.png) no-repeat; 
} 

ul li a:hover, ul li:hover a { 
color: #FFF; 
text-shadow: 1px 1px 0 #547829; 
} 

ul li a.dashboard { 
background: url(../images/iconDashboard.png) 25px 50% no-repeat; 
} 

ul li a.pages { 
background: url(../images/iconPages.png) 25px 50% no-repeat; 
} 

ul li a.media { 
background: url(../images/iconMedia.png) 25px 50% no-repeat; 
} 

ul li a.history { 
background: url(../images/iconHistory.png) 25px 50% no-repeat; 
} 

ul li a.messages { 
background: url(../images/iconMessages.png) 25px 50% no-repeat; 
} 

ul li a.settings { 
background: url(../images/iconSettings.png) 25px 50% no-repeat; 
} 

/** SUB MENU **/ 

ul li ul.submenu { 
display: block; 
z-index: 500; 
top: 0; 
} 

ul li ul.submenu li { 
background: url(../images/subMenuBg.png) bottom no-repeat; 
} 

ul li ul.submenu li a { 
background: none; 
padding: 13px; 
width: 189px; 
} 

ul li ul.submenu li.last { 
border-bottom: 1px solid #54575b; 
background: url(../images/subMenuBg.png) top no-repeat; 
} 

ul li ul.submenu li.last a { 
padding: 12px; 
} 

ul li:hover ul.submenu li a { 
text-shadow: 1px 1px 0 black; 
} 

ul li ul.submenu li:hover { 
background: url(../images/subMenuBgHover.png) bottom no-repeat; 
} 

/** PIPS **/ 

.pip { 
display: block; 
background: url(../images/pipBg.png); 
padding: 3px 12px; 
position: absolute; 
top: 20px; 
right: 25px; 
color: white; 
text-align: center; 
text-indent: 0; 
font-size: 10px; 
border-top: 1px solid #1c1f23; 
border-bottom: 1px solid #4c4f56; 
border-radius: 30px; 
-webkit-border-radius: 30px; 
-moz-border-radius: 30px; 
} 

ul li:hover .pip { 
background: url(../images/pipBgHover.png); 
border-top: 1px solid #547829; 
border-bottom: 1px solid #a4ce6b; 

} 

如果您有任何问题或需要任何更多的信息，请问。一如既往，非常感谢您的帮助。

亨利

的JavaScript Eliment

<script language="JavaScript"> 
function showOrHide(zap) { 
if (document.getElementById) { 
    var abra = document.getElementById(zap).style; 
    if (abra.display == "block") { 
    abra.display = "none"; 
    } else { 
    abra.display = "block"; 
    } 
    return false; 
    } else { 
    return true; 
} 
} 
</script> 

我应该把宽度部分进入这个代码？谢谢：d

Answer 1

您可以通过编程方式改变标志 <DIV>的背景图像，实现这一目标。首先，添加一个ID，该<DIV>元素：

<a href="#" onclick="return showOrHide('menulink');"> 
    <div class="logo" id="menuImg">TEST IMAGE</div> 
</a> 

然后您就可以更改菜单按钮的点击处理程序的背景图像：

document.getElementById("menuImg").style.backgroundImage = 
    "url(images/menu_open.png)"; // set this when the menu is opened 
document.getElementById("menuImg").style.backgroundImage = 
    "url(images/menu.png)"; // set this when the menu is closed 

注意的URL图片必须与html文档的路径相关（与样式表中设置的路径相反）。

有一个的onclick事件处理程序的菜单链接调用javascript函数showOrHide上设置。此功能在您的HTML文档的页眉定义为：

function showOrHide(zap) { 
if (document.getElementById) { 
    var abra = document.getElementById(zap).style; 
    if (abra.display == "block") { 
    abra.display = "none"; 
    } else { 
    abra.display = "block"; 
    } 
    return false; 
    } else { 
    return true; 
} 
} 

目前，此功能仅用于打开和关闭菜单，所以你可以在这个功能中直接更改背景图片：

function showOrHide(zap) { 
if (document.getElementById) { 
    var abra = document.getElementById(zap).style; 
    if (abra.display == "block") { // menu is currently visible 
    abra.display = "none";   // hide the menu 
    document.getElementById("menuImg").style.backgroundImage = 
     "url(images/menu.png)"; // set this when the menu is closed 
    } else {      // menu is currently hidden 
    abra.display = "block";   // show the menu 
    document.getElementById("menuImg").style.backgroundImage = 
     "url(images/menu_open.png)"; // set this when the menu is opened 
    } 
    return false; 
    } else { 
    return true; 
} 
} 

如果你打算使用showOrHide在专页的其他元素来关闭和打开，你必须重新设计的代码。

---

目前的菜单，当你点击菜单图像的右侧也打开。发生这种情况的原因是侧边栏 <div>的宽度设置为213px，但图像只有40px宽。当您更改背景图像时，还可以通过更改<div>的宽度来解决此问题。 初始样式表值更改为40像素：

.sidebar { 
    ... 
    width: 40px; 
    ... 
} 

添加ID到侧边栏：

<div class="sidebar" id="sidebar"> 

和由脚本代码改变宽度：

document.getElementById("sidebar").style.width = 
    "213px"; // set this when menu is opened 
document.getElementById("sidebar").style.width = 
    "40px"; // set this when menu is closed 

插入这些语句在showOrHide正好在相应的背景图像代码之下。