JS+CSS实现简单的二级下拉导航菜单效果


Posted in Javascript onSeptember 21, 2015

本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果。分享给大家供大家参考。具体如下:

这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的。

运行效果截图如下:

JS+CSS实现简单的二级下拉导航菜单效果

在线演示地址如下:

具体代码如下:

<!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>
<title>CSS二级下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';}
#mainNavBar{width:100%;background:#999;padding:10px 0;}
#nav{width:760px;height:30px;margin:0 auto;}
#nav ul{padding:0;margin:0;}
#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}
#nav ul li a{display:block;color:#fff;text-decoration:none;}
#nav ul li a:hover{font-weight:bold;background:#666;}
#subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}
#subNav a{text-decoration:none;font-weight:normal;display:block;}
#subNav a:hover{color:#f00;background:#f00;}
</style>
</head>
<body>
<div id="mainNavBar">
 <div id="nav">
  <ul>
   <li>
    <a href="#">添加</a>
    <div id="subNav">
     <a href="#">日志</a>
     <a href="#">分类</a>
    </div>
   </li>
   <li>
    <a href="#">管理</a>
    <div id="subNav">
     <a href="#">分类</a>
     <a href="#">文章</a>
    </div>
   </li>
   <li>
    <a href="#">扩展</a>
    <div id="subNav">
     <a href="#">评论管理</a>
     <a href="#">留言管理</a>
     <a href="#">注销退出</a>
    </div>
   </li>
  </ul>
 </div>
</div>
<script language="javascript">
var nav=document.getElementById("nav").getElementsByTagName("li");
for(i=0;i<nav.length;i++){
nav[i].onmouseover=function(){
 this.style.fontWeight="bold";
 this.style.overflow="visible";
 this.style.background="#666666";
 }
nav[i].onmouseout=function(){
 this.style.fontWeight="normal";
 this.style.background="#999999"
 this.style.overflow="hidden";
 }
}
</script>
</body>
</html>

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

Javascript 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 #Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 #Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 #Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 #Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 #Javascript
jquery+正则实现统一的表单验证
Sep 20 #Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 #Javascript
You might like
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
Js 随机数产生6位数字
2010/05/13 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
django批量导入xml数据
2016/10/16 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python tornado使用流生成图片的例子
2019/11/18 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
python中的逆序遍历实例
2019/12/25 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
荟萃全球保健品:维他购
2018/05/09 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
大学毕业后的十年规划
2014/01/07 职场文书
广告语设计及教案
2014/03/21 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android