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 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 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 zend 相对路径问题
2009/01/12 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
Python处理中文标点符号大集合
2018/05/14 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
Python中print和return的作用及区别解析
2019/05/05 Python
Numpy之reshape()使用详解
2019/12/26 Python
python 贪心算法的实现
2020/09/18 Python
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
通用自荐信范文
2014/03/14 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
活动总结报告格式
2014/05/09 职场文书
应届毕业生自荐信
2014/05/28 职场文书
校庆标语集锦
2014/06/25 职场文书
中队活动总结
2014/08/27 职场文书
监理中标通知书
2015/04/16 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android