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文件优化
Dec 08 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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
1 Tube Radio
2021/03/02 无线电
php横向重复区域显示二法
2008/09/25 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python绘制3D图形
2018/05/03 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
python内打印变量之%和f的实例
2020/02/19 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
几个数据库方面的面试题
2016/07/01 面试题
一年级家长会邀请函
2014/01/25 职场文书
计算机网络专业求职信
2014/06/05 职场文书
争做文明公民倡议书
2014/08/29 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
Python实现随机生成迷宫并自动寻路
2021/06/13 Python