我有一套菜单可见
http://carbonyzed.co.uk/menu/2/
现在，当您单击 MENU 按钮时，UL eliment会打开，但我还需要menu.png项目（按钮）更改为全宽版本，我们将调用menu_open.png。< / p>
这是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
答案 0 :(得分：1)
您可以通过以编程方式更改徽标＆lt; div＆gt;的背景图片来实现此目的。首先，将一个id添加到＆lt; div＆gt;元素：
<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 来关闭和打开页面的其他元素，则必须重新设计代码。
当您单击菜单图像右侧时，菜单也会打开。发生这种情况是因为侧边栏＆lt; div＆gt;的宽度设置为213px，但图像宽度仅为40px。您可以通过在更改背景图像时更改＆lt; div＆gt;的宽度来解决此问题。 将初始样式表值更改为40px：
.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 中。