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 08 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
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 使用post,get的一种简洁方式
2010/04/25 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
PHP实现搜索相似图片
2015/09/22 PHP
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python单链表的简单实现方法
2014/09/23 Python
深入解析Python中的线程同步方法
2016/06/14 Python
Python利用IPython提高开发效率
2016/08/10 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
Python内置函数locals和globals对比
2020/04/28 Python
python logging模块的使用
2020/09/07 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
PHP笔试题
2012/02/22 面试题
2019年c语言经典面试题目
2016/08/17 面试题
项目经理的岗位职责
2013/11/23 职场文书
顶岗实习计划书
2014/01/10 职场文书
小学新学期寄语
2014/04/02 职场文书
财务人员入职担保书
2015/09/22 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
宪法宣传标语100条
2019/10/15 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL