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 相关文章推荐
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
微信jssdk用法汇总
Jul 16 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
koa源码中promise的解读
Nov 13 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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中include与require使用方法区别详解
2013/10/19 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
vue element项目引入icon图标的方法
2018/06/06 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
python字典排序实例详解
2015/05/20 Python
python flask实现分页效果
2017/06/27 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
玩具公司的创业计划书
2013/12/31 职场文书
计划生育标语
2014/06/23 职场文书
小学端午节活动总结
2015/02/11 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
追讨欠款律师函
2015/06/24 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android