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 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 Javascript
JS实现简易图片自动轮播
Oct 16 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生成自定义长度随机字符串的函数分享
2014/05/04 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
基于jquery的表格排序
2010/09/11 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
Javascript验证方法大全
2015/09/21 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
Node.js的特点详解
2017/02/03 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
使用Python读取大文件的方法
2018/02/11 Python
python树莓派红外反射传感器
2019/01/21 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
python 字典访问的三种方法小结
2019/12/05 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
什么是网络协议
2016/04/07 面试题
学前教育求职自荐信范文
2013/12/25 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
年度考核评语
2014/01/19 职场文书
保护黄河倡议书
2014/05/16 职场文书
美术社团活动总结
2014/06/27 职场文书
爱情保证书
2015/01/17 职场文书
在人间读书笔记
2015/06/30 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书