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 相关文章推荐
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
vue-test-utils初使用详解
May 23 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
Threejs实现滴滴官网首页地球动画功能
Jul 13 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
php 文件缓存函数
2011/10/08 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
ionic3 懒加载
2017/08/16 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
Python实现批量修改文件名实例
2015/07/08 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
有趣的python小程序分享
2017/12/05 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
Python 如何批量更新已安装的库
2020/05/26 Python
Pygame框架实现飞机大战
2020/08/07 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
计算机专业自荐信范文
2014/05/28 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
医院党建工作总结2015
2015/05/26 职场文书
工作证明书
2015/06/15 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书