横向导航条二级菜单，记录Cookie。
IE6png图片和样式有点问题，其他游览器显示正常。
二级菜单主要是写CSS代码和结合JS显示当前鼠标移到上面的一级菜单对应的二级菜单。
HTML代码：
<body> <div class="top"> <div id=menu_out> <div id=menu_in> <div id=menu> <ul id=nav> <li name="navli"><a href="1.html" name="nava"><span><b>企业首页</b></span></a><ul><li><a href="index.aspx"><span>公司首页</span></a></li></ul></li> <li name="navli"><a href="2.html" name="nava"><span><b>企业简介</b></span></a><ul><li><a href="content/about.aspx"><span>企业简介</span></a></li></ul></li> <li name="navli"><a href="2.html" name="nava"><span><b>产品展示</b></span></a><ul><li><a href="picture/13.aspx"><span>瑞法斯2012春夏新品</span></a></li><li><a href="#"><span>瑞法斯2011秋冬新品</span></a></li></ul></li> <li name="navli"><a href="2.html" name="nava"><span><b>企业资讯</b></span></a><ul><li><a href="article/6.aspx"><span>企业公告</span></a></li><li><a href="article/7.aspx"><span>内部新闻</span></a></li><li><a href="article/2.aspx"><span>业内新闻</span></a></li></ul></li> <li name="navli"><a href="2.html" name="nava"><span><b>行业资讯</b></span></a><ul><li><a href="download.aspx"><span>行业咨询</span></a></li><li class=menu_line2></li></ul></li> <li name="navli"><a href="2.html" name="nava"><span><b>在线留言</b></span></a><ul><li><a href="feedback.aspx"><span>在线留言</span></a></li><li class=menu_line2></li></ul></li> <li name="navli"><a href="2.html" name="nava"><span><b>联系我们</b></span></a><ul><li><a href="content/contact.aspx"><span>联系我们</span></a></li><li class=menu_line2></li></ul></li> </ul> </div></div></div><div id="logo"></div></div> </body>
JS代码：利用Cookie在不同的页面获取当前一级菜单。
//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 temp; var obj_a = getElementsByName("li", "navli"); //获取一级菜单对象的数组 var obj_b = getElementsByName("a", "nava"); //获取一级菜单a标签的数组，用Jquery可以直接回去方便些 var obj_c = document.getElementById("nav").getElementsByTagName("ul"); //二级菜单对象的数组 number = obj_a.length; //遍历一级菜单个数 for (var i = 0; i < number; i++) { obj_a[i].index = i;//序号 obj_a[i].className = "";//css样式 obj_a[i].onclick = function () //点击事件 { obj_b[this.index].className = "nav_on";//更改样式 setCookie("show_a", this.index, 0); //记录Cookie temp = this.index;//记录当前序号 } obj_a[i].onmouseover = function () { //鼠标移入事件 if (temp != this.index) { //判断当前鼠标移到的一级菜单是否为当前页面的菜单 obj_b[this.index].className = "nav_a";//改变样式 } for (var i = 0; i < obj_c.length; i++) { obj_c[i].style.display = "none"; //隐藏所有二级菜单 } obj_c[this.index].style.display = "block"; //显示当前鼠标移到的一级菜单对应的二级菜单 } obj_a[i].onmouseout = function () { //鼠标移出事件 if (temp != this.index) { //判断当前鼠标移到的一级菜单是否为当前页面的菜单 obj_b[this.index].className = "nav_off"; //取消当前一级菜单按钮样式 obj_c[this.index].style.display = "none";//隐藏二级菜单 } } } if ( getCookie("show_a") != null) { //当Cookie存在时，获取当前页面Cookie //设置当前页面一级菜单样式 obj_a[getCookie("show_a")].className = "nav_on"; obj_b[getCookie("show_a")].className = "nav_a"; temp = getCookie("show_a"); } else { //默认第一个菜单按钮样式 obj_a[0].className = "nav_on"; obj_b[0].className = "nav_a"; temp = 0; } function setCookie(sName, sValue, expireMinute) { //记录Cookie,用;隔开。 var cookieString = sName + "=" + escape(sValue); if (expireMinute > 0) { cookieString = cookieString + "; expire=0"; } document.cookie = cookieString; } function getCookie(sName) { var aCookie = document.cookie.split("; ");//分割Cookie for (var j = 0; j < aCookie.length; j++) { var aCrumb = aCookie[j].split("="); if (escape(sName) == aCrumb[0]) return unescape(aCrumb[1]); //获取Cookie中需要的值 } return null; }
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; overflow:hidden; } #nav li { position:relative; float:left; height:30px; width:86px; margin-top:5.5px; margin-left:10px; _display:inline; } #nav li a{ display:block; height:30px; width:86px; text-decoration:none; cursor:pointer; padding:0px; padding-left:6px; margin-right:-3px; } #nav li a span { float:left; 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_off{ background:none;} .nav_off span{ background:none;} /*子栏目*/ #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:15px; } #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:30px; margin:0px; } #nav li ul li a:hover{ text-decoration:none; background:url(images/menu_on_left2.gif) no-repeat left 130%; } #nav li ul li a:hover span{ background:url(images/menu_on_right2.gif) no-repeat right 130%; }
CSS主要是用两个容器装两张图片把分割的左右两张图片合并显示出来（滑动门技术）
