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之更有效率的字符串替换
Aug 02 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
《姥姥的剪纸》教学反思
2014/02/25 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
小学生倡议书范文
2014/05/13 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2014年团支书工作总结
2014/11/14 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
在python中读取和写入CSV文件详情
2022/06/28 Python