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 相关文章推荐
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
详解vue 组件注册
Nov 20 Vue.js
three.js如何实现3D动态文字效果
Mar 03 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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
用Socket发送电子邮件
2006/10/09 PHP
php 缓存函数代码
2008/08/27 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
python中sys.argv参数用法实例分析
2015/05/20 Python
python生成验证码图片代码分享
2016/01/28 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Python3获取cookie常用三种方案
2020/10/05 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
阿里旅行:飞猪
2017/01/05 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
中西医专业毕业生职业规划书
2014/02/24 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
个人自荐书怎么写
2015/03/26 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
自荐信范文
2019/05/20 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL