滑动下拉导航菜单

这个是由JS实现的,非常简洁,大家一看就能懂。

<title>滑动下拉导航菜单</title>
<style>
body{background-color: black;}
*{list-style:none; text-decoration:none; margin:0;padding:0;}
.nav{width:980px; margin:0 auto; background:url(nav.png) repeat-x;}
.nav_1{height:40px; line-height:40px; display:block;}
.nav_1 li{float:left; width:105px; text-align:center;}
.nav_1 li a{height:100%; padding:0 8px;color:#fff; font-size:14px; display:block;}
.nav_1 li a:hover{color:#333;background:#FFF; font-weight:bold;}
.dropMenu{position:absolute;z-index:100; width:105px; margin-top:-1px; padding:6px 0; background-color:white; visibility:hidden; }
.dropMenu li{height:35px; line-height:35px; overflow:hidden; text-align:center; }
.dropMenu li a{height:100%;color:#333333; text-decoration:none;font-size:12px; color:#ff0000;display:block;}
.dropMenu li a:hover{color:#FF0000; background-color:#ff0000; color:white; font-weight:bold;}
</style>
</head>

<body>
<!–头部Start–>
<div class=”nav” id=”navMenu”>
<ul class=”nav_1″>
<li><a href=”/”>网站首页</a></li>
<li><a href=”#” rel=”drop1″>关于我们</a></li>
<li><a href=”#” rel=”drop2″>课程设置</a></li>
<li><a href=”#” rel=”drop3″>经典案例</a></li>
<li><a href=”#” rel=”drop4″>师资介绍</a></li>
<li><a href=”#” rel=”drop5″>招生信息</a></li>
<li><a href=”#” rel=”drop6″>作品展示</a></li>
<li><a href=”#” rel=”drop7″>新闻资讯</a></li>
<li><a href=”#” rel=”drop8″>联系我们</a></li>
</div>
<!–头部end–>

<!–导航滑动子菜单–>
<script type=’text/javascript’ src=’dropdown.js’></script>
<ul id=”drop1″ class=”dropMenu”>
<li><a href=”#”>111111111111</a></li>
<li><a href=”#”>111111111111</a></li>
<li><a href=”#”>111111111111</a></li>
<li><a href=”#”>111111111111</a></li>
<li><a href=”#”>111111111111</a></li>
<li><a href=”#”>111111111111</a></li>
</ul>
<ul id=”drop2″ class=”dropMenu”>
<li><a href=”#”>2222222222</a></li>
<li><a href=”#”>2222222222</a></li>
<li><a href=”#”>2222222222</a></li>
<li><a href=”#”>2222222222</a></li>
<li><a href=”#”>2222222222</a></li>
<li><a href=”#”>2222222222</a></li>
</ul>
<ul id=”drop3″ class=”dropMenu”>
<li><a href=”#”>333333333333</a></li>
<li><a href=”#”>333333333333</a></li>
<li><a href=”#”>333333333333</a></li>
<li><a href=”#”>333333333333</a></li>
<li><a href=”#”>333333333333</a></li>
<li><a href=”#”>333333333333</a></li>
</ul>
<ul id=”drop4″ class=”dropMenu”>
<li><a href=”#”>44444444444</a></li>
<li><a href=”#”>44444444444</a></li>
<li><a href=”#”>44444444444</a></li>
<li><a href=”#”>44444444444</a></li>
<li><a href=”#”>44444444444</a></li>
<li><a href=”#”>44444444444</a></li>
</ul>
<ul id=”drop5″ class=”dropMenu”>
<li><a href=”#”>5555555555555</a></li>
<li><a href=”#”>5555555555555</a></li>
<li><a href=”#”>5555555555555</a></li>
<li><a href=”#”>5555555555555</a></li>
<li><a href=”#”>5555555555555</a></li>
<li><a href=”#”>5555555555555</a></li>
</ul>
<ul id=”drop6″ class=”dropMenu”>
<li><a href=”#”>666666666666</a></li>
<li><a href=”#”>666666666666</a></li>
<li><a href=”#”>666666666666</a></li>
<li><a href=”#”>666666666666</a></li>
<li><a href=”#”>666666666666</a></li>
<li><a href=”#”>666666666666</a></li>
</ul>
<ul id=”drop7″ class=”dropMenu”>
<li><a href=”#”>777777777777</a></li>
<li><a href=”#”>777777777777</a></li>
<li><a href=”#”>777777777777</a></li>
<li><a href=”#”>777777777777</a></li>
<li><a href=”#”>777777777777</a></li>
<li><a href=”#”>777777777777</a></li>
</ul>
<ul id=”drop8″ class=”dropMenu”>
<li><a href=”#”>8888888888888</a></li>
<li><a href=”#”>8888888888888</a></li>
<li><a href=”#”>8888888888888</a></li>
<li><a href=”#”>8888888888888</a></li>
<li><a href=”#”>8888888888888</a></li>
<li><a href=”#”>8888888888888</a></li>
</ul>
<script type=”text/javascript”>cssdropdown.startchrome(“navMenu”)</script>
<!–底部end–>

效果如下:

QQ20131119134724

下载地址:滑动下拉导航菜单

本文固定链接: http://blog.wmphp.com/776.html | 顺盛网络博客

该日志由 admin 于2013年11月18日发表在 Javascript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 滑动下拉导航菜单 | 顺盛网络博客

滑动下拉导航菜单:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter