一个不错的菜单

最新推荐文章于 2025-09-10 09:07:54 发布

转载最新推荐文章于 2025-09-10 09:07:54 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/suming/archive/2011/03/06/1972387.html

文章标签：

#javascript #ViewUI

HTML结构：

<div id="menu">
  <div class="suckerdiv">
    <ul id="suckertree1">
      <li class="first"><a href="#" class="subfolderstyle">Browse</a>
        <ul style="left: 115px; visibility: visible; display: none;">
          <li class="first2"><a href="home">Home</a></li>
          <li><a href="#">Blogs</a></li>
          <li><a href="#">Tutorials</a></li>
          <li><a href="#">Users</a></li>
          <li><a href="#">Advanced search</a></li>
          <li><a href="#">Randomizer</a></li>
          <li><a href="#">Lightboxes</a></li>
          <li><a href="#">Statistics</a></li>
        </ul>
      </li>
      <li><a href="#" class="subfolderstyle">Forum</a>
        <ul style="left: 115px; visibility: visible; display: none;">
          <li class="first2"><a href="forums">Home</a></li>
          <li><a href="forums/search">Search</a></li>
        </ul>
      </li>
      <li><a href="#" class="subfolderstyle">My account</a>
        <ul style="left: 115px; visibility: visible; display: none;">
          <li class="first2"><a href="#">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Requests</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Comments</a></li>
        </ul>
      </li>
      <li class="last"><a href="#" class="subfolderstyle">My photos</a>
        <ul style="left: 115px; visibility: visible; display: none;">
          <li class="first2"><a href="myphotos">Photos</a></li>
          <li><a href="#">Folders</a></li>
          <li><a href="#">Releases</a></li>
          <li><a href="#">Upload</a></li>
          <li><a href="#">Bulk editor</a></li>
          <li><a href="#">Bulk upload</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

CSS样式：

body {
	color: #444444;
	font-family: verdana, arial, hevetica, sans-serif;
	font-size: 9px;
}
#menu {
	float: left;
	padding: 0;
	width: 115px;
}
#menu ul {
	list-style-type: none;
	margin: 10px 0 0;
	padding: 0;
}
#menu li {
	border-bottom: 1px solid #DDDDDD;
}
#menu li.first {
	border-bottom: 1px solid #DDDDDD;
	border-top: 1px solid #DDDDDD;
}
.suckerdiv ul li ul .first2 {
	border-top: 1px solid #DDDDDD;
}
.suckerdiv ul li {
	position: relative;
}
#menu ul a {
	color: #555555;
	display: block;
	font-weight: bold;
	padding: 9px 6px;
	text-align: center;
	text-decoration: none;
	width: 103px;
}
#menu ul a:hover {
	color:#000;
	background-color:#f8f8f8;
}
.suckerdiv ul li ul {
	background: none repeat scroll 0 0 white;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	position: absolute;
	top: -11px;
	visibility:hidden;
}

javascript实现：

<script language="javascript">
	var menuids=["suckertree1"] 
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
		if (ultags[t].parentNode.parentNode.id==menuids[i]) 
			ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"
		else 
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" 
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
		for (var t=ultags.length-1; t>-1; t--){ 
		ultags[t].style.visibility="visible"
		ultags[t].style.display="none"
		}
  }
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>

转载于:https://www.cnblogs.com/suming/archive/2011/03/06/1972387.html