帮助中心
简洁旧版连接
新手必读
如何上传
获取设计币
评分标准
→ 设计欣赏
→ 矢量素材
→ 网页素材
→ 网页模板
→ 图片素材
→ 设计字体
→ 软件代码
→ 设计教程
→ 设计公司
网站首页
源文件库
矢量图库
网页模版
高清图片
佳作欣赏
桌面壁纸
设计教程
简洁论坛
设计空间
广告代码
综合代码
其他代码
焦点图
全屏广告
对联广告
在线客服
相册代码
菜单导航
TAB标签
悬浮漂浮
视频播放
图片特效
翻牌书角
网页特效
导航菜单
表格图层
其他代码
文字相关
表单按钮
选项卡相关
杰克专栏
图象动画
网站制作
上传下载
服务器软件
网吧相关
常用软件
当前位置：
简洁设计网
>
网站代码
>
网页特效
>
导航菜单
> 代码信息
DIV+CSS+JS二级树型菜单，展开后刷新无影响
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DIV+CSS+JS二级树型菜单，展开后刷新无影响</title> <style type="text/css"> <!-- body { font-family: arial, 宋体, serif; font-size:12px; } * { margin:0px; padding:0px; } #nav { width:174px; line-height: 24px; list-style-type: none; text-align:left; /*定义整个ul菜单的行高和背景色*/ } /*==================一级目录===================*/ #nav a { width: 174px; display: block; padding-left:20px; /*Width(一定要)，否则下面的Li会变形*/ } #nav li { border-bottom:#FFF 1px solid; /*下面的一条白边*/ float:left; background-color: #FECFD6; color:#DD1336; font-weight:bold; } #nav li a:hover { background:#F85B78; /*一级目录onMouseOver显示的背景色*/ } #nav a:link { color:#DD1336; text-decoration:none; } #nav a:visited { color:#DD1336; text-decoration:none; } #nav a:hover { color:#FFF; text-decoration:none; font-weight:bold; } /*==================二级目录===================*/ #nav li ul { list-style:none; text-align:left; } #nav li ul li { background:#ffecef; /*二级目录的背景色*/ font-weight:normal; } #nav li ul a { padding-left:20px; width:174px;/* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/ } /*下面是二级目录的链接样式*/ #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666; text-decoration:none; } #nav li ul a:hover { color:#F3F3F3; text-decoration:none; font-weight:normal; background:#FFAA1C;/* 二级onmouseover的字体颜色、背景色*/ } /*==============================*/ #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } #nav ul.collapsed { display: none; } --> #PARENT { width:174px; } </style> </head> <body> <div id="PARENT"> <ul id="nav"> <li><a href="#Menu=ChildMenu1" onClick="DoMenu('ChildMenu1')">菜单一</a> <ul id="ChildMenu1" class="collapsed"> <li><a href=##Menu=ChildMenu1>菜单一</a></li> <li><a href=##Menu=ChildMenu1>菜单一</a></li> <li><a href=##Menu=ChildMenu1>菜单一</a></li> <li><a href=##Menu=ChildMenu1>菜单一</a></li> <li><a href=##Menu=ChildMenu1>菜单一</a></li> <li><a href=##Menu=ChildMenu1>菜单一</a></li> <li><a href=##Menu=ChildMenu1>菜单一</a></li> <li><a href=##Menu=ChildMenu1>菜单一</a></li> <li><a href=##Menu=ChildMenu1>菜单一</a></li> <li><a href=##Menu=ChildMenu1>菜单一</a></li> <li><a href=##Menu=ChildMenu1>菜单一</a></li> <li><a href=##Menu=ChildMenu1>菜单一</a></li> </ul> </li> <li><a href="#Menu=ChildMenu2" onClick="DoMenu('ChildMenu2')">菜单二</a> <ul id="ChildMenu2" class="collapsed"> <li><a href=##Menu=ChildMenu2>菜单二</a></li> <li><a href=##Menu=ChildMenu2>菜单二</a></li> <li><a href=##Menu=ChildMenu2>菜单二</a></li> <li><a href=##Menu=ChildMenu2>菜单二</a></li> <li><a href=##Menu=ChildMenu2>菜单二</a></li> </ul> </li> <li><a href="#Menu=ChildMenu3" onClick="DoMenu('ChildMenu3')">菜单三</a> <ul id="ChildMenu3" class="collapsed"> <li><a href=##Menu=ChildMenu3>菜单三</a></li> <li><a href=##Menu=ChildMenu3>菜单三</a></li> <li><a href=##Menu=ChildMenu3>菜单三</a></li> <li><a href=##Menu=ChildMenu3>菜单三</a></li> <li><a href=##Menu=ChildMenu3>菜单三</a></li> <li><a href=##Menu=ChildMenu3>菜单三</a></li> </ul> </li> <li><a href="#Menu=ChildMenu4" onClick="DoMenu('ChildMenu4')">菜单四</a> <ul id="ChildMenu4" class="collapsed"> <li><a href=##Menu=ChildMenu4>菜单四</a></li> <li><a href=#Menu=ChildMenu4>菜单四</a></li> <li><a href=##Menu=ChildMenu4>菜单四</a></li> <li><a href=##Menu=ChildMenu4>菜单四</a></li> <li><a href=##Menu=ChildMenu4>菜单四</a></li> <li><a href=##Menu=ChildMenu4>菜单四</a></li> </ul> </li> <li><a href="#Menu=ChildMenu5" onClick="DoMenu('ChildMenu5')">菜单五</a> <ul id="ChildMenu5" class="collapsed"> <li><a href=##Menu=ChildMenu5>菜单五</a></li> <li><a href=##Menu=ChildMenu5>菜单五</a></li> <li><a href=##Menu=ChildMenu5>菜单五</a></li> <li><a href=##Menu=ChildMenu5>菜单五</a></li> <li><a href=##Menu=ChildMenu5>菜单五</a></li> <li><a href=##Menu=ChildMenu5>菜单五</a></li> <li><a href=##Menu=ChildMenu5>菜单五</a></li> <li><a href=##Menu=ChildMenu5>菜单五</a></li> <li><a href=##Menu=ChildMenu5>菜单五</a></li> <li><a href=#C#Menu=ChildMenu5>菜单五</a></li> <li><a href=##Menu=ChildMenu5>菜单五</a></li> <li><a href=##Menu=ChildMenu5>菜单五</a></li> </ul> </li> <li><a href="#Menu=ChildMenu6" onClick="DoMenu('ChildMenu6')">菜单六</a> <ul id="ChildMenu6" class="collapsed"> <li><a href=##Menu=ChildMenu6>菜单六</a></li> <li><a href=##Menu=ChildMenu6>菜单六</a></li> <li><a href=##Menu=ChildMenu6>菜单六</a></li> </ul> </li> <li><a href="#Menu=ChildMenu7" onClick="DoMenu('ChildMenu7')">菜单七</a> <ul id="ChildMenu7" class="collapsed"> <li><a href=##Menu=ChildMenu7>菜单七</a></li> <li><a href=##Menu=ChildMenu7>菜单七</a></li> </ul> </li> <li><a href="#Menu=ChildMenu8" onClick="DoMenu('ChildMenu8')">菜单八</a> <ul id="ChildMenu8" class="collapsed"> <li><a href=##Menu=ChildMenu8>菜单八</a></li> <li><a href=##Menu=ChildMenu8>菜单八</a></li> <li><a href=##Menu=ChildMenu8>菜单八</a></li> </ul> </li> <li><a href="#Menu=ChildMenu9" onClick="DoMenu('ChildMenu9')">菜单九</a> <ul id="ChildMenu9" class="collapsed"> <li><a href=##Menu=ChildMenu9>菜单九</a></li> <li><a href=##Menu=ChildMenu9>菜单九</a></li> <li><a href=##Menu=ChildMenu9>菜单九</a></li> </ul> </li> <li><a href="#Menu=ChildMenu10" onClick="DoMenu('ChildMenu10')">菜单十</a> <ul id="ChildMenu10" class="collapsed"> <li><a href=##Menu=ChildMenu10>菜单十</a></li> </ul> </li> </ul> </div> <script type=text/javascript><!-- var LastLeftID = ""; function menuFix() { var obj = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<obj.length; i++) { obj[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } function DoMenu(emid) { var obj = document.getElementById(emid); obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded"); if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu { document.getElementById(LastLeftID).className = "collapsed"; } LastLeftID = emid; } function GetMenuID() { var MenuID=""; var _paramStr = new String(window.location.href); var _sharpPos = _paramStr.indexOf("#"); if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1) { _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length); } else { _paramStr = ""; } if (_paramStr.length > 0) { var _paramArr = _paramStr.split("&"); if (_paramArr.length>0) { var _paramKeyVal = _paramArr[0].split("="); if (_paramKeyVal.length>0) { MenuID = _paramKeyVal[1]; } } /* if (_paramArr.length>0) { var _arr = new Array(_paramArr.length); } //取所有#后面的，菜单只需用到Menu //for (var i = 0; i < _paramArr.length; i++) { var _paramKeyVal = _paramArr[i].split('='); if (_paramKeyVal.length>0) { _arr[_paramKeyVal[0]] = _paramKeyVal[1]; } } */ } if(MenuID!="") { DoMenu(MenuID) } } GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果 menuFix(); --></script> </html>
提示：您可以先修改部分代码再运行
相关网站代码
·
中国站长站导航菜单js+CSS代码
·
间歇性无缝停顿滚动JS代码实例
·
3款蓝色简洁实用的下拉菜单和网页右键菜单特
·
DIV+CSS+JS二级树型菜单，展开后刷新无影响
·
使用li制作列表并隔行换色的代码
·
TIPS展开关闭问答代码,效果不错的
·
鼠标经过变换文字
·
当用户点击input(文本框)框后,文本框变换样
·
一个简单并且漂亮的网页弹出层
·
菜单的水平居中JS代码
·
js二层树形菜单代码
·
效果不错的动感网站菜单JS代码
·
纯css下拉菜单
·
纯CSS完成的中英文双语导航菜单
设为首页
|
加入收藏
|
关于我们
|
联系我们
|
合作伙伴
|
使用协议
|
广告联系
|
内页友情链接
|
网站地图
Copyright 2008-2015
Www.Jianjie8.Com
All Rights Reserved 版权所有 简洁设计网 [
www.jianjie8.com
]
鲁ICP备09002350号
