更改圖像（打開和關閉）菜單按鈕

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正好在相應的背景圖像代碼之下。