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程序设计有所帮助。

您可能感兴趣的文章:

JavaScript实现的一个倒计时的类
这篇文章主要介绍了JavaScript实现的一个倒计时的类,本文直接给出demo代码,需要的朋友可以参考下
2015-03-03
js css+html实现简单的日历
这篇文章主要为大家详细介绍了由html、css、javascript结合实现的简单日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
浅谈js停止事件冒泡阻止浏览器的默认行为(阻止超连接 #)
下面小编就为大家带来一篇浅谈js停止事件冒泡阻止浏览器的默认行为(阻止超连接 #)。
2017-02-02
WPS的JS宏操作方法总结大全
这篇文章主要给大家介绍了关于WPS的JS宏操作方法总结的相关资料,WPS是一款常用的办公软件,其中的JS宏功能可以帮助用户实现自动化操作和批量处理等需求,需要的朋友可以参考下
2023-09-09
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
这篇文章主要介绍了JS动态遍历json中所有键值对的方法,实例分析了针对不知道属性名的情况简单遍历json键值对的操作技巧,需要的朋友可以参考下
2016-12-12
微信小程序-详解数据缓存
每个微信小程序都可以有自己的本地缓存，本篇文章主要介绍了微信小程序-详解数据缓存，可以通过函数可以对本地缓存进行设置、获取和清理，有兴趣的可以了解一下。
2016-11-11
echarts如何实现动态曲线图(多条曲线)
这篇文章主要介绍了echarts如何实现动态曲线图(多条曲线)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
JavaScript中两种链式调用实现代码
方法链一般适合对一个对象进行连续操作(集中在一句代码)。一定程度上可以减少代码量，缺点是它占用了函数的返回值。
2011-01-01
详解如何使用JavaScript构建主题切换器
这篇文章主要为大家详细介绍了如何使用JavaScript构建一个主题切换器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-01-01
js实现加载更多功能实例
这篇文章主要介绍了js实现加载更多功能的方法,以实例演示了加载更多的代码实现,非常具有实用价值,需要的朋友可以参考下
2016-10-10