javascript实现带下拉子菜单的导航菜单效果


Posted in Javascript onMay 14, 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>带下拉子菜单的导航菜单</title>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; font-size:14px;}
#menu ul li a#current { font-weight:bold; color:#fff;}
#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}
#menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}
#menu ul li:hover ul { display:block;}
#menu ul li.sfhover ul { display:block;}
</style>
<script type="text/javascript"><!--  //--><![CDATA[//><!--
function menuFix() {
  var sfEls = document.getElementById("menu").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>
<div id="menu">
<ul>
  <li><a id="current" href="#">首页</a></li>
  <li><a href="#">网页版式</a>
    <ul>
      <li><a href="#">自适应宽度</a></li>
      <li><a href="#">固定宽度</a></li>
    </ul>
  </li>
  <li><a href="#">web教程</a>
    <ul>
      <li><a href="#">新手入门</a></li>
      <li><a href="#">视频教程</a></li>
      <li><a href="#">常见问题</a></li>
    </ul>
  </li>
  <li><a href="#">web实例</a></li>
  <li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>

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

Javascript 相关文章推荐
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 #Javascript
javascript基于DOM实现权限选择实例分析
May 14 #Javascript
javascript中DOM复选框选择用法实例
May 14 #Javascript
JS对字符串编码的几种方式使用指南
May 14 #Javascript
jQuery的基本概念与高级编程
May 14 #Javascript
javascript实现简单的省市区三级联动
May 14 #Javascript
javascript实现仿腾讯游戏选择
May 14 #Javascript
You might like
PHP读取MySQL数据代码
2008/06/05 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
Python pickle模块用法实例分析
2015/05/27 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
Python docx库用法示例分析
2019/02/16 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
在职研究生自我鉴定
2013/10/16 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
努力工作保证书
2015/02/28 职场文书
乱世佳人观后感
2015/06/08 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server