JavaScript实现简单的二级导航菜单实例


Posted in Javascript onApril 15, 2015

本文实例讲述了JavaScript实现简单的二级导航菜单的方法。分享给大家供大家参考。具体如下:

<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
     font-size:12px;
}
#nav {
  line-height: 24px; list-style-type: none; background:#666;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link  {
color:#666; text-decoration:none;
}
#nav a:visited  {
color:#666;text-decoration:none;
}
#nav a:hover  {
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}
#nav li ul a{
display: block; width: 180px;width: 156px;
text-align:left;padding-left:24px;
}
#nav li ul a:link  {
color:#666; text-decoration:none;
}
#nav li ul a:visited  {
color:#666;text-decoration:none;
}
#nav li ul a:hover  {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
-->
</style>
<script type=text/javascript>
<!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseDown=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseUp=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onmouseout=function() {
  this.className=this.className.replace(new RegExp("( ?|^)sfhover\b"),
"");
  }
}
}
window.onload=menuFix;
//--><!]]>
</script>
</head>
<body>
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二服务二</a></li>
<li><a href="#">服务二服务二服务二</a></li>
<li><a href="#">服务二</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例三</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">案例三案例三</a></li>
<li><a href="#">案例三案例三案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四111</a></li>
</ul>
</li>
<li><a href="#">在线演示</a>
<ul>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">联系联系联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
</ul>
</li>
</ul>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 #Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 #Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 #Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 #Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 #Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 #Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 #Javascript
You might like
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
php实用代码片段整理
2016/11/12 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
jQuery实现简单日历效果
2020/07/05 jQuery
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
Python二分查找详解
2015/09/13 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
电子商务专业实习生自我鉴定
2013/09/24 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
MongoDB支持的索引类型
2022/04/11 MongoDB