下拉菜单太长，可以自动滚动的导航栏jquery代码
- 作者：网页模板
- 大小：0.015MB
- 点击次数：
- 发布时间：2014-05-14 10:30
特效介绍
下拉菜单太长，可以自动滚动的导航栏。当网站采用下拉菜单作为导航，如果下拉菜单的分类太多，就会导致滚动条向下滚动才能显示全。本插件完美解决这个问题，当下拉菜单太长，超出了设置的高度，鼠标放到下拉菜单上，向上或者向下移动鼠标，下拉菜单会做相应的滚动以显示全部的内容。
使用方法
1、引入下面的代码：<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
#page-wrap{width:720px;margin:25px auto;}
/* 一级 */
ul.dropdown{position:relative;width:100%;}
ul.dropdown li{font-weight:bold;float:left;width:180px;background:#ccc;position:relative;}
ul.dropdown a:hover{color:#000;}
ul.dropdown li a{display:block;padding:20px 8px;color:#222;position:relative;z-index:2000;}
ul.dropdown li a:hover,
ul.dropdown li a.hover{background:#F3D673;position:relative;}
/* 二级 */
ul.dropdown ul{display:none;position:absolute;top:0;left:0;width:180px;z-index:1000;}
ul.dropdown ul li{font-weight:normal;background:#f6f6f6;color:#000;border-bottom:1px solid #ccc;}
ul.dropdown ul li a{display:block;background:#eee !important;}
ul.dropdown ul li a:hover{display:block;background:#F3D673 !important;}
</style>
<script type='text/javascript' src='http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
2、html精简后的代码：<div id="page-wrap">
<ul class="dropdown">
<!--导航的一个栏目开始，多个栏目请复制下面的li来增加-->
<li>
<!--下面的a链接为一级导航-->
<a href="#">一级导航名称</a>
<ul class="sub_menu">
<!--下面为下拉菜单，可以扩展无限个，当显示不完，会自动滚动-->
<li><a href="#">二级导航名称</a></li>
</ul>
</li>
<!--导航的一个栏目结束-->
</ul>
</div>
- 本文标签：
- jquery导航菜单代码
