教程集 > 脚本编程 > javascript > 正文网站后台的竖向二级下拉导航菜单

网站后台的竖向二级下拉导航菜单

发布时间：2016-10-20 编辑：jiaochengji.com

教程集为您提供网站后台的竖向二级下拉导航菜单等资源，欢迎您收藏本站，我们将为您提供最新的网站后台的竖向二级下拉导航菜单资源

本文章为你免费提供一款网站后台的竖向二级下拉导航菜单哦，如果你正在找导航菜单就OK了。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>网站后台的竖向二级下拉导航菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> /*reset CSS*/ body, div, ul, li, h3 { margin:0; padding:0 } li { list-style:none; } body { font-size:12px; line-height:1.25; font-family:Tahoma, sans-serif } #side { width:198px; border-right:2px solid #395E9F; float:left; margin:20px; } #side h3 { width:194px; background:#395E9F; font-size:14px; line-height:25px; font-weight:bold; text-indent:10px; margin:2px; } #side h2 { background:#395E9F url(http://www.zzsky.cn/effect/images/201004100930/menu_add.gif) 10px center no-repeat; font-size:14px; line-height:25px; font-weight:bold; text-indent:25px; margin:2px; } #side h3 a, #side h2 a { display:block; width:194px; height:25px; _height:21px; _padding-top:4px; color:#fff; text-decoration:none } #side li { text-indent:20px; line-height:25px; } #side li a { display:block; width:188px; height:25px; line-height:25px; text-decoration:none } #side .menu_cur { color:#B50394; border-left:5px solid #ccc; background:#eee; margin:0 auto; } #side .h3_cur { background:#000; color:#fc99cc; margin:0 auto; } #side .h2_click { color:#fc99cc; text-indent:25px; background:#000 url(http://www.zzsky.cn/effect/images/201004100930/menu_add.gif) 10px center no-repeat; margin:0 auto; } </style> <script language="javascript"> //@Mr.Think---加载样式---类 function addClass(elem, value) { if (!elem.className) { elem.className = value; } else { newClass = elem.className; newClass = " "; newClass = value; elem.className = newClass; } } //@Mr.Think---点击实现高亮显示---类 function highOnclick(elemId, tagOff, tagOff2,classCur,add_cur) { if(!document.getElementsByTagName) return false; if(!document.getElementById(elemId)) return false; var elemId = document.getElementById(elemId); var links = elemId.getElementsByTagName("a"); for (i = 0; i < links.length; i ) { if (links[i].parentNode.nodeName !== tagOff&&links[i].parentNode.nodeName !== tagOff2) { links[i].onclick = function() { for (n = 0; n < links.length; n ) { links[n].className = ""; } this.className = classCur; firsttagoff(elemId, tagOff, this.parentNode.parentNode,add_cur); this.blur(); } } } } //@Mr.Think---附属点击实现高亮显示---感谢盛飞---类 function firsttagoff(elemId, tagOff, addtag,add_cur) { var ulitem = elemId.getElementsByTagName(addtag.nodeName); var tagoffitem = elemId.getElementsByTagName(tagOff); for (i = 0; i < tagoffitem.length; i ) { tagoffitem[i].firstChild.className = ""; tagoffitem[i].firstChild.children[0].src = "http://filesimg.jiaochengji.com/2010/03/20100410115252871.gif" } for (j = 0; j < ulitem.length; j ) { if (ulitem[j].innerHTML == addtag.innerHTML) { tagoffitem[j].firstChild.className = add_cur; tagoffitem[j].firstChild.children[0].src = "http://www.zzsky.cn/effect/images/201004100930/menu_reduce2.gif"; break; } } } //加载高亮显示函数 window.onload=function sidemenu() { highOnclick("side", "H3","H2", "menu_cur", "h3_cur"); } //点击管理首页后高亮当前并清除其他链接的样式 function clickindex(){ if(!document.getElementsByTagName) return false; if(!document.getElementById("side")) return false; var side=document.getElementById("side"); var links=side.getElementsByTagName("h2")[0].getElementsByTagName("a"); links[0].className="h2_click"; var sidelink=side.getElementsByTagName("a"); for(var i=1; i<sidelink.length; i ){ sidelink[i].className=""; } } //@Mr.Think---展开/关闭 function m_id(id) { return document.getElementById(id); } function getcookie(name) { var cookie_start = document.cookie.indexOf(name); var cookie_end = document.cookie.indexOf(";", cookie_start); return cookie_start == -1 ? '' : unescape(document.cookie.substring(cookie_start name.length 1, (cookie_end > cookie_start ? cookie_end : document.cookie.length))); } var collapsed = getcookie('m_shutoropen'); function shutoropen(menucount) { var classname = m_id('menuimg_' menucount).parentNode.className; if(m_id('menu_' menucount).style.display == 'none') { m_id('menu_' menucount).style.display = '';collapsed = collapsed.replace('[' menucount ']' , ''); m_id('menuimg_' menucount).src = 'http://www.zzsky.cn/effect/images/201004100930/menu_reduce' (classname==''?'':'2') '.gif'; } else { m_id('menu_' menucount).style.display = 'none';collapsed = '[' menucount ']'; m_id('menuimg_' menucount).src = 'http://www.zzsky.cn/effect/images/201004100930/menu_add' (classname==''?'':'2') '.gif'; } } </script> </head> <body>

<h2>管理首页</h2> <h3> 网站后台的竖向二级下拉导航菜单

博文管理</h3> <ul id="menu_1"> <li>博文列表</li> <li>博文回收站</li> <li>博文分类管理</li> <li>博文分类添加</li> </ul> <h3> 网站后台的竖向二级下拉导航菜单

标签管理</h3> <ul id="menu_2"> <li>标签管理</li> <li>上传附件管理</li> </ul> <h3> 网站后台的竖向二级下拉导航菜单

评论留言</h3> <ul id="menu_3"> <li>评论管理</li> <li>记录管理</li> <li>留言管理</li> </ul>

</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
网站后台的竖向二级下拉导航菜单
 7款风格新颖的jQuery/CSS3菜单导航分享
 路径式导航栏 xBreadcrumbs
jQuery菜单插件 Smooth Navigational Menu
导航菜单-三级折叠竖向下拉导航菜单效果
 纯CSS制作的竖向导航菜单
 导航菜单 Smooth Navigation Menu
学习从实践开始之jQuery插件开发菜单插件开发
 js 带记忆功能的二级下拉竖向导航菜单
 javascript 无限级横向下拉导航菜单效果

上一篇：javasctipt 漂亮的感应鼠标导航菜单下一篇：导航菜单-三级折叠竖向下拉导航菜单效果

[关闭]

网站后台的竖向二级下拉导航菜单

最近更新

浏览排行