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 相关文章推荐
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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 类相关函数的使用详解
2013/05/10 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
go语言计算两个时间的时间差方法
2015/03/13 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
HTML5 与 XHTML2
2008/10/17 HTML / CSS
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
教导处工作制度
2014/01/18 职场文书
爱心助学感谢信
2015/01/21 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript