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

首页 > 网络编程 > JavaScript > javascript技巧 更新日期: 2016-02-22
这篇文章主要介绍了JS+CSS实现简单的二级下拉导航菜单效果,通过简单的JavaScript页面元素遍历及样式操作实现下拉菜单效果,非常简单实用,需要的朋友可以参考下

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

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

运行效果截图如下:

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

在线演示地址如下:

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 >
 <div >
  <ul>
   <li>
    <a href="#">添加</a>
    <div >
     <a href="#">日志</a>
     <a href="#">分类</a>
    </div>
   </li>
   <li>
    <a href="#">管理</a>
    <div >
     <a href="#">分类</a>
     <a href="#">文章</a>
    </div>
   </li>
   <li>
    <a href="#">扩展</a>
    <div >
     <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程序设计有所帮助。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • js实现简洁大方的二级下拉菜单效果代码
    js实现简洁大方的二级下拉菜单效果代码
    这篇文章主要介绍了js实现简洁大方的二级下拉菜单效果代码,涉及javascript通过鼠标事件控制页面元素的动态变换技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整 ...
  • JS+CSS实现的经典圆角下拉菜单效果代码
    JS+CSS实现的经典圆角下拉菜单效果代码
    这篇文章主要介绍了JS+CSS实现的经典圆角下拉菜单效果代码,可实现非常经典的圆角下拉菜单效果,涉及JavaScript动态操作页面元素css样式的相关技巧,需要的朋友可以参考下本文实例讲述了JS+CSS实现的圆角下拉菜单效果代码.分享给大家供大家参考,具体如下: 相信不少朋友会喜欢这一款菜单,CSS+JS实现的圆角下拉菜单,没有使用任何修饰性的图片哦,圆角 ...
  • 使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
    使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
    本文是基于jquery和css3实现的仿windows10开始菜单的下拉导航菜单特效,代码超简单,感兴趣的朋友一起看看吧这是一款仿windows10开始菜单的下拉导航菜单特效.该下拉菜单使用jQuery和CSS3来完成类似windows10开始菜单样式效果,它的代码简洁,效果非常时尚. 查看演示      源码下载 该下拉菜单的HTML结构非常简单,基本的H ...
  • 利用.net控件实现下拉导航菜单制作的具体方法
    这篇文章介绍了利用.net控件实现下拉导航菜单制作的具体方法,有需要的朋友可以参考一下,希望对你有所帮助今天的一个小测试是老师让用.NET用控件来制作一个拉菜单要求如下: 将鼠标移到父菜单上弹出3个子菜单,而且每个子菜单都有超链接. 以下是我自己做的代码: 代码如下:    <asp:Menu runat="server" Orie ...
  • 基于jQuery实现二级下拉菜单效果
    这篇文章主要介绍了jQuery实现二级下拉菜单效果的相关资料,二级下拉菜单在实际应用中非常的常见,比如企业网站的产品分类,或者部门分类等等,需要的朋友可以参考下本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的,当然还有更为复杂的二级菜单,不过先学会如何制作简单的,分享给大家供大家参考,具体内容如下 代码如下: <html> <he ...
猜你喜欢