JS+CSS实现简单的二级下拉导航菜单效果
更新时间：2015年09月21日 10:01:08 作者：企鹅
这篇文章主要介绍了JS+CSS实现简单的二级下拉导航菜单效果,通过简单的JavaScript页面元素遍历及样式操作实现下拉菜单效果,非常简单实用,需要的朋友可以参考下
本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果。分享给大家供大家参考。具体如下：
这是一款CSS配合JavaScript实现二级下拉导航菜单，好像CSS要配合JS才能写出好效果来，本款菜单同样用到了JS，菜单目前支持两级，下拉导航是我们经常用的一种菜单形式，把这个修改一下你就能用了，结构挺简单，相信你会做好的。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/
具体代码如下：
<!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程序设计有所帮助。
相关文章
本文主要介绍了webpack中的代理配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
JavaScript中使用stopPropagation函数停止事件传播例子
这篇文章主要介绍了JavaScript中使用stopPropagation函数停止事件传播例子,即阻止事件冒泡的一个方法,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了JS加载器如何动态加载外部js文件的相关资料,需要的朋友可以参考下2016-05-05
使用脚本控制网页Table的显示隐藏(全代码)_AX...2006-12-12
这篇文章主要介绍了URL中“#” “？” &“”号的作用浅析,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素。2013-03-03
这篇文章主要介绍了JavaScript格式化json和xml的方法,结合实例形式分析了javascript格式化json及格式化xml数据的具体操作技巧,需要的朋友可以参考下2019-01-01
用jscript启动sqlserver...2007-06-06
这篇文章主要为大家详细介绍了JavaScript运动框架的第一部分，解决速度正负取整问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了GOJS+VUE实现流程图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
最新评论