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编写的[打豆豆]小游戏
Jan 08 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
JavaScript实现Tab选项卡切换
Feb 13 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 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
Array对象方法参考
2006/10/03 Javascript
JQuery 常用方法基础教程
2009/02/06 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python 用下标截取字符串的实例
2018/12/25 Python
python交换两个变量的值方法
2019/01/12 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
异常和异常类的概念
2014/09/12 面试题
学年自我鉴定范文
2013/10/01 职场文书
管理专员自荐信
2014/01/26 职场文书
教师绩效工资方案
2014/02/01 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
创建青年文明号材料
2014/05/09 职场文书
车辆工程专业求职信
2014/06/14 职场文书
个人委托书怎么写
2014/09/17 职场文书
婚宴致辞
2015/07/28 职场文书
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python