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用data方法获取某个元素上的事件
Jun 23 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
使用layui的router来进行传参的实现方法
Sep 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
layui实现三级联动效果
2019/07/26 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
MYSQL基础面试题
2012/05/13 面试题
意向书范文
2014/03/31 职场文书
爱护公共设施的标语
2014/06/24 职场文书
新闻编辑求职信
2014/07/13 职场文书
职工小家建设活动方案
2014/08/25 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
python 实现的截屏工具
2021/05/08 Python
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL