javascript导航
一个二级菜单导航条的实例
?
HTML代码：
?
?
<div id="menu"> <ul> <li class='m_li_a'onmouseover='mover(1);' onmouseout='mout(1);'><a href="#">首页</a></li> <li class='m_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="#">功能模块</a></li> <li class='m_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="#">功能模块</a></li> <li class='m_li' onmouseover='mover(4);' onmouseout='mout(4);'><a href="#">功能模块</a></li> <li class='m_li' onmouseover='mover(5);' onmouseout='mout(5);'><a href="#">功能模块</a></li> <li class='m_li' onmouseover='mover(6);' onmouseout='mout(6);'><a href="#">功能模块</a></li> <li class='m_li' onmouseover='mover(7);' onmouseout='mout(7);'><a href="/home/manage">功能模块</a></li> <li id="s_1" class='s_li_a'>首页</li> <li style="padding-left:141px;" id="s_2" class='s_li' ><a href="/">脚本管理</a> | <a href="#">脚本管理</a> | <a href="/">脚本管理</a> </li> <li style="padding-left:252px;" id="s_3" class='s_li'><a href="/">任务管理</a> | <a href="/">任务管理</a> | <a href="#">任务管理</a> </li> <li style="padding-left:362px;" id="s_4" class='s_li' ><a href="/">文件管理</a> | <a href="/">文件管理</a></li> <li style="padding-left:474px;" id="s_5" class='s_li' ><a href="/">测试计划</a> | <a href="#">测试计划</a></li> <li style="padding-left:447px;" id="s_6" class='s_li' ><a href="/">测试报告</a> | <a href="/">测试报告</a> | <a href="#">测试报告</a> </li> <li style="padding-left:696px;" id="s_7" class='s_li' ><a href="/">服务器管理</a></li> </ul> </div>?
?
js代码：
?
?
//初始化var def="1";function mover(object){ //主菜单 var mm=document.getElementById("m_"+object); mm.className="m_li_a"; //初始主菜单隐藏效果 if(def!=0){ var mdef=document.getElementById("m_"+def); mdef.className="m_li"; } //子菜单 var ss=document.getElementById("s_"+object); ss.style.display="block"; //初始子菜单隐藏效果 if(def!=0){ var sdef=document.getElementById("s_"+def); sdef.style.display="none"; } def = object;}function mout(object){ //主菜单 var mm=document.getElementById("m_"+object); mm.className="m_li"; //初始主菜单 if(def!=0){ var mdef=document.getElementById("m_"+def); mdef.className="m_li_a"; } //子菜单 var ss=document.getElementById("s_"+object); ss.style.display="none"; //初始子菜单 if(def!=0){ var sdef=document.getElementById("s_"+def); sdef.style.display="block"; }}?
CSS代码：
?
?
#container { margin:0 auto; width:1100px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { height:500px; margin-bottom:5px;}#content { height:500px;}.white_text { color: white; font-size: 23px; text-decoration: none; line-height: 23px; margin-bottom: 0px;}body,td,th { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 15px; color: #333333;}body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}a { color: #333333; text-decoration: none;}a:hover { color: #FF0000; text-decoration: none;}a:active{ color: #FF0000; text-decoration: none;}#menu{ height:32px; margin-top:2px; background-color:#990000;}.style1 { border-width: 0px;}#back{ height:100px; margin-top:0px; background-color:#111111;}#menu ul{ margin:auto; width:800px; height:32px; list-style-type:none; padding:0px; margin-top:0px; margin-bottom:0px;}.m_li{ float:left; width:114px; line-height:32px; text-align:center; margin-right:-2px; margin-left:-2px;}.m_li a{ display:block; color:#FFFFFF; width:114px;}.m_line{ float:left; width:1px; height:32px; line-height:32px; /*ff下有效(图片垂直居中)*/}.m_li_a{ float:left; width:114px; line-height:32px; text-align:center; padding-top:3px; font-weight:bold; background-image:url(/assets/menu_bg2.jpg); position:relative; height:32px; margin-top:-3px; margin-right:-2px; margin-left:-2px;}.m_li_a a{ display:block; color:#FF0000; width:114px;}.smenu{ width:774px; margin:0px auto 0px auto; padding:0px; list-style-type:none; height:32px;}.s_li{ line-height:32px; width:auto; display:none; height:32px;}.s_li_a{ line-height:32px; width:auto; display:block; height:32px;}div#site_nav, div#channel_nav { z-index: 1;}div#copyright { padding: 10px;}div#footer { height: 50px; margin: 0px auto; padding-top: 10px; display: block;}div#footer p { font-size: 0.8em; margin: 0; padding: 15px;}div#site_nav ul { width: auto; width: 100%; margin: 0; padding: 0; line-height: 1em; list-style: none;}div#site_nav li { display: inline; list-style: none; margin: 0; padding: 3px 10px 3px 10px; line-height: 1em; border-right: 1px solid #aaa;}div#site_nav li.last { border-right: none;}
转载请注明：?http://michael-roshen.iteye.com/blog/1671506