简单二级菜单，JS+CSS实现。
HTML代码：
<body> <div id="top"> <div id="menuout"><div id="menuin"><div id="menu"><ul id="nav"> <li><a href="#" name="navmenu" class="navon"><span>关于我们</span></a> <ul name="limenu"><li><a href="#"><span>项目前言</span></a></li><li><a href="#"><span>促进会简介</span></a></li><li><a href="#"><span>根莲根艺术团简</span></a></li><li><a href="#"><span>联系组委会</span></a></li></ul></li> <li><a href="#" name="navmenu"><span>加盟合作</span></a> <ul name="limenu"><li><a href="#"><span>市场推广</span></a></li><li><a href="#"><span>加盟店展示</span></a></li><li><a href="#"><span>区域加盟</span></a></li></ul></li> <li><a href="#" name="navmenu"><span>公告通知</span></a> <ul name="limenu"><li><a href="#"><span>标识声明</span></a></li><li><a href="#"><span>时间地点</span></a></li><li><a href="#"><span>其它声明</span></a></li></ul></li> <li><a href="#" name="navmenu"><span>战略合作</span></a> <ul name="limenu"><li><a href="#"><span>央视网人民网人民参考网</span></a></li><li><a href="#"><span>中国质量报</span></a></li><li><a href="#"><span>商品与质量周刊中国民企发</span></a></li></ul></li> <li><a href="#" name="navmenu"><span>领导关怀</span></a><ul name="limenu"></ul></li> <li><a href="#" name="navmenu"><span>时事新闻</span></a> <ul name="limenu"><li><a href="#"><span>内容集锦</span></a></li><li><a href="#"><span>新闻发布会</span></a></li><li><a href="#"><span>二文化大开发</span></a></li><li><a href="#"><span>走访记录</span></a></li></ul></li> <li><a href="#" name="navmenu"><span>演员风采</span></a><ul name="limenu"></ul></li> <li><a href="#" name="navmenu"><span>承办单位</span></a> <ul name="limenu"><li><a href="#"><span>根莲根艺术团简介</span></a></li><li><a href="#"><span>洪兴简介</span></a></li></ul></li> </ul> </div></div> </div>
JS代码：
//firefox不支持getElementsByName，要遍历属性。 var getElementsByName = function(tag, name){ var returns = document.getElementsByName(name); if(returns.length > 0) return returns; returns = new Array(); var e = document.getElementsByTagName(tag); for(var i = 0; i < e.length; i++){ if(e[i].getAttribute("name") == name){ returns[returns.length] = e[i]; } } return returns; } var nav = getElementsByName("a", "navmenu"); //一级菜单元素数组 for(var i=0;i<nav.length;i++) { nav[i].index=i; //记录序号 nav[i].onmouseover=function(){ //遍历注册鼠标移入事件 mouseover(this); } } var con=getElementsByName("ul","limenu");//二级菜单元素数组 function mouseover(num) { //全部二级菜单隐藏 for(var i=0;i<nav.length;i++) { nav[i].className=""; con[i].style.left="-9999px"; } //显示当前鼠标移到上面的菜单的二级菜单 num.className="navon"; con[num.index].style.left="-25px"; }
CSS代码：滑动门
@charset "utf-8"; body { margin:0 auto; text-align:center; font-family:黑体,楷体,sans-serif; font-size: 12px; background-image: url(../images/body_bg.jpg); background-repeat: no-repeat; background-position: center top; color: #8c4d77; } a { color: #8c4d77; text-decoration: none; } a:hover { color: #069; text-decoration: none; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* 顶部框 logo 导航 ----------------------------------------------------------------- */ .top {height: 75px; width: 900px;margin:20px auto; padding:0px;clear:both;} .nav {height: 46px; width:775px;list-style-type: none;position:relative;top:6px;} /*全局样式*/ *{ font-size:12px; } #menu ul { display:inline; padding:0; border:0; list-style:none; line-height:150%; margin-left: 15px; } #menu_out { width:896px; padding-left:4px; margin-left:0px; background:url(../images/menu_left.png) no-repeat left top; } #menu_in{ background:url(../images/menu_right.png) no-repeat right top; padding-right:4px; } #menu{ background:url(../images/menu_bg.png) repeat-x; height:73px; } #nav{ padding-left:20px; } #nav li { position:relative; float:left; height:30px; width:86px; margin-top:5.5px; margin-left:10px; } #nav li a{ float:left; display:block; height:30px; width:86px; text-decoration:none; cursor:pointer; padding:0px; padding-left:6px; } #nav li a span { display:block; height:30px; width:80px; line-height:30px; font-size:12px; font-weight:bold; text-decoration:none; text-align:center; cursor:pointer: } #nav li a span b { color:#8C4D77; margin-right:6px; } .nav_a { background:url(../images/menu_on_left.png) no-repeat left 100%; } .nav_a span{ color:#333; background:url(../images/menu_on_right.png) no-repeat right 100%; } /*子栏目*/ #nav li ul{ position:absolute; clear:both; width:500px; left:-10px; top:20px; display:none; } #nav li ul li{ float:left; width:auto; height:30px; margin-top:10px; } #nav li ul li a{ display:block; cursor:pointer; height:30px; width:auto; padding:0px 3px; } #nav li ul li a span { display:block; width:auto; height:30px; line-height:38px; margin:0px; } #nav li ul li a:hover{ text-decoration:none; background:url(../images/menu_on_left2.gif) no-repeat left bottom; } #nav li ul li a:hover span{ background:url(../images/menu_on_right2.gif) no-repeat right bottom; }
