js左侧三级菜单导航实例代码


Posted in Javascript onSeptember 13, 2013

效果演示:
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" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>demo</title> 
<style type="text/css"> 
<!-- 
body { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 11px; 
} 
#nav, #nav ul { 
list-style: none; 
background: #F9F9F9; 
font-weight: bold; 
padding: 0px; 
margin: 0px; 
border: solid 1px #CCCCCC; 
border-bottom: 0px; 
width: 150px; 
text-align: left; 
} 
#nav ul ul{ 
border: solid 1px #CCCCCC; 
border-bottom: 0px; 
} 
#nav a { 
display: block; 
width: 150px; 
w\idth: 140px; 
color: #333333; 
text-decoration: none; 
text-align: center; 
border-bottom: solid 1px #CCCCCC; 
text-align: left; 
padding-left: 10px; 
} 
#nav a:hover{ 
color: #336666; 
} 
#nav a.selected{ 
background: url(http://bbs.blueidea.com/images/common/bb_expand.gif) no-repeat right 50%; 
} 
#nav li { 
line-height: 22px; 
position: relative; 
} 
#nav li ul { 
position: absolute; 
left: -999em; 
width: 150px; 
font-weight: normal; 
margin: 0px; 
padding: 0px; 
} 
#nav li li { 
width: 150px; 
} 
#nav li ul a { 
width: 150px; 
w\idth: 126px; 
padding: 0px 12px; 
line-height: 22px; 
text-align: left; 
} 
#nav li ul ul { 
margin: 0px 0 0 150px; 
} 
#nav li:hover ul ul,#nav li.sfhover ul ul{ 
left: -999em; 
} 
#nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{ 
left: auto; 
} 
#nav li:hover ul,#nav li.sfhover ul{ 
left: 150px; 
top: 0px; 
} 
#nav li:hover, #nav li.sfhover { 
background: #F5E3C0; 
} 
* html #nav li { 
float: left; 
height: 1%; 
} 
* html #nav li a { 
height: 1%; 
} 
--> 
</style> 
</head> 
<body> 
<p><a href="javascript:history.back()">Back</a></p> 
<ul id="nav"> 
<li><a href="">Home</a></li> 
<li><a href="/aboutme.html">About Me</a></li> 
<li><a class="selected" href="/tutorials.html">Tutorials</a> 
<ul> 
<li><a href="#">Sub Menu 31</a></li> 
<li><a class="selected" href="#">Sub Menu 32</a> 
<ul> 
<li><a href="#">Sub Menu 321</a></li> 
<li><a href="#">Sub Menu 322</a></li> 
<li><a href="#">Sub Menu 323</a></li> 
<li><a href="#">Sub Menu 324</a></li> 
</ul> 
</li> 
<li><a href="#">Sub Menu 33</a></li> 
<li><a href="#">Sub Menu 34</a></li> 
</ul> 
</li> 
<li><a class="selected" href="/gallery/gallery.html">Gallery</a> 
<ul> 
<li><a href="#">Sub Menu 41</a></li> 
<li><a class="selected" href="#">Sub Menu 42</a> 
<ul> 
<li><a href="#">Sub Menu 421</a></li> 
<li><a href="#">Sub Menu 422</a></li> 
<li><a href="#">Sub Menu 423</a></li> 
<li><a href="#">Sub Menu 424</a></li> 
</ul> 
</li> 
<li><a href="#">Sub Menu 43</a></li> 
<li><a href="#">Sub Menu 44</a></li> 
</ul> 
</li> 
<li><a href="#">Contact Me</a></li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 #Javascript
jquery mobile事件多次绑定示例代码
Sep 13 #Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 #Javascript
javascript仿php的print_r函数输出json数据
Sep 13 #Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 #Javascript
javascript常用对话框小集
Sep 13 #Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 #Javascript
You might like
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
详解python时间模块中的datetime模块
2016/01/13 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
python学生信息管理系统实现代码
2019/12/17 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
python 带时区的日期格式化操作
2020/10/23 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
简单租房协议书
2014/04/09 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
植物生产学专业求职信
2014/08/08 职场文书
出租房屋协议书
2014/09/14 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
公司经营目标责任书
2015/01/29 职场文书
2015年保送生自荐信
2015/03/24 职场文书
导游词之无锡古运河
2019/11/14 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
python运行脚本文件的三种方法实例
2022/06/25 Python