js实现的四级左侧网站分类菜单实例


Posted in Javascript onMay 06, 2015

本文实例讲述了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"/>
<script src="http://www.google-analytics.com/urchin.js" 
type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-152060-1";
urchinTracker();
</script>
<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(/images/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,#nav li:hover ul ul ul{
 left: -999em;
}
#nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul,#nav li li li:hover 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>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
sfHover = function() {
 var sfEls = document.getElementById("nav").getElementsByTagName("LI");
 for (var i=0; i<sfEls.length; i++) {
 sfEls[i].onmouseover=function() {
  this.className+=" sfhover";
 }
 sfEls[i].onmouseout=function() {
  this.className=this.className.replace(new RegExp(" sfhover\\b"),"");
 }
 }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
</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 class="selected"href="#">Sub Menu 321</a><ul>
 <li><a href="#">Sub Menu 321</a></li>
 </ul></li>
 <li><a href="#">Sub Menu 322</a></li>
 <li><a href="#">Sub Menu 323</a></li>
 <li><a class="selected"href="#">Sub Menu 324</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>
 </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 相关文章推荐
Javascript 去除数组的重复元素
May 04 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 #Javascript
完美实现仿QQ空间评论回复特效
May 06 #Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 #Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 #Javascript
JS实现CheckBox复选框全选全不选功能
May 06 #Javascript
javascript使用avalon绑定实现checkbox全选
May 06 #Javascript
js实现滑动触屏事件监听的方法
May 05 #Javascript
You might like
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
一个JS翻页效果
2007/07/23 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
Element Input组件分析小结
2018/10/11 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
小程序调用微信支付的方法
2019/09/26 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
Python生成随机密码的方法
2017/06/16 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
np.random.seed() 的使用详解
2020/01/14 Python
简述 Python 的类和对象
2020/08/21 Python
信息系统专业个人求职信范文
2013/12/07 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
关于安全的广播稿
2014/10/23 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
浅析Django接口版本控制
2021/06/26 Python