CSS实现简单的二级下拉导航菜单效果【金冠5377

作者:操作系统

JS+CSS实现容易的二级下拉领航菜单功效,jscss下拉导航菜单

本文实例陈说了JS+CSS完毕轻巧的二级下拉领航菜单效能。分享给大家供大家参照他事他说加以考察。具体如下:

那是生机勃勃款CSS同盟JavaScript完成二级下拉领航菜单,好像CSS要合作JS手艺写出好效果来,本款菜单雷同用到了JS,菜单近来支撑两级,下拉领航是大家平日用的意气风发种菜单情势,把这一个改善一下你就会用了,布局挺轻易,相信你会做好的。

运作效果截图如下:

金冠53777 1

在线演示地址如下:

切切实实代码如下:

<!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程序设计有着扶植。

本文实例陈述了JS+CSS完结轻巧的二级下拉领航菜单功能。分享给我们供大家参谋...

本文由金冠53777-金冠娱乐53777-Welcome发布,转载请注明来源

关键词: