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动态添加删除div 具体实现
Jul 20 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
vue之debounce属性被移除及处理详解
Nov 13 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,不用COM,生成excel文件
2006/10/09 PHP
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
解析php中const与define的应用区别
2013/06/18 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
AOP的定义以及作用
2013/09/08 面试题
后勤人员自我评价怎么写
2013/09/19 职场文书
计算机科学与技术应届生求职信
2013/11/07 职场文书
毕业生自荐书
2014/02/02 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
地方白酒代理协议书
2014/10/25 职场文书
实习单位指导教师评语
2014/12/30 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书