0

我有一套菜单可见

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

现在，当您单击MENU按钮时，UL 元素会打开，但我还需要将 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 元素

<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

4

1 回答 1

1

您可以通过以编程方式更改徽标<div> 的背景图像来实现此目的。首先，在 <div> 元素中添加一个 id：

<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 文档的路径（与样式表中设置的路径相反）。

在调用 javascript 函数showOrHide的菜单链接上设置了onclick事件处理程序。此函数在您的 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> 的宽度设置为 213 像素，但图像只有 40 像素宽。您可以通过在更改背景图像时更改 <div> 的宽度来解决此问题。将初始样式表值更改为 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中。

于 2012-11-06T13:49:08.967 回答