2007-09-25

使用javascript制作一个menu效果

关键字: javascript menu
特效介绍:
当鼠标划过某个链接的时候展开一个下拉菜单供选择:
菜单描述:
  <ul id="haulMenu_menu">
		  <li><a href="#" class="cBlack">点评</a> 
            <ul>
              <li><a href="">呵呵</a></li>
              <li><a href="#">呵呵呵</a></li>
              <li><a href="#">呵呵呵呵</a></li>
              <li><a href="#">呵呵呵呵呵</a></li>
              <li><a href="#">呵呵呵呵呵呵</a></li>
            </ul>
          </li>
    </ul>

IE6下的脚本控制,否则IE6下不好用:
function buildEventsForIE() {
		//IE6 can't handle css menu. this adds mouse events for IE6.
		majVer = navigator.appVersion.charAt(navigator.appVersion.indexOf('MSIE ')+5);
		if (majVer>=6) {	
			navRoot = document.getElementById("haulMenu_menu");
			stuff="";
			for (i=0; i<navRoot.childNodes.length; i++) {
				node = navRoot.childNodes[i];
				if (node.nodeName=="LI") {
					node.onmouseover=function() {
						this.children[1].style.display = "block";
					}
					node.onmouseout=function() {
						this.children[1].style.display = "none";
					}
					
					subNode = node.childNodes[2].childNodes;
					for (x=0; x<subNode.length; x++) {
						if (subNode[x].children[1] && 
subNode[x].children[1].nodeName=="ul") { 
// find nested lists
							subNode[x].onmouseover=function() {
								this.children[1].style.display = "block";
							}
							subNode[x].onmouseout=function() {
								this.children[1].style.display = "none";
							}
						}
					}
				}
			}
			//CSS tweaks
			document.write("<style type='text/css'>");
			document.write("#haulMenu ul ul {top: 20px 
!important; top:18px; margin-left: 22px;}");
			document.write("#haulMenu ul ul ul {top: -1px;}");
			document.write("</style>");
		 }		 
	}	
	if (document.all) buildEventsForIE();

CSS样式:
<style>
body { text-align:center;margin:0;padding:0; background: #FFF; font-size:12px; 
color:#000;}
/*链接颜色*/
a:link {color: #000; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
/* 下拉菜单 */
.haulMenu{float:left;width:40px;  background:url(i4_1.gif) 0 10px no-repeat;}
.haulMenu ul { margin:0; padding:0; }
.haulMenu ul li {list-style-type:none; margin:0; width:40px; 
position: relative;  }/*修改子菜单*/
.haulMenu li a {display: block;}
.haulMenu .s1{ padding:3px 0 0 !important;padding:5px 0 0;}
.haulMenu ul ul {background: #ecf3f9; border:1px solid  #b2b2b2; 
 width:38px;position: relative;  }
/* function */
.haulMenu ul li ul li a{display:block; padding:0 0 !important;}
.haulMenu ul li ul li a:hover{background:#1f3a87; color:#fff;}
.haulMenu ul li:hover > ul {display: block;}
.haulMenu ul ul {display: none;  position: absolute; }/*修改子菜单*/
</style>
  • menu.rar (1.4 KB)
  • 描述: 完整的代码
  • 下载次数: 18
评论
发表评论

您还没有登录,请登录后发表评论