一直都很喜欢下拉菜单，因为这样可以导航到更多的页面，给访问者一目了然的感觉。
之前在公司的网站上就是用的下拉菜单导航栏的方式进行导航，当时是使用了li:hover的方式通过鼠标移动到li上，显示出li下的ul。而在ie6中则使用javascript修复li:hover。这样做出来是没有动态的效果，下拉菜单一下子就凭空出现了。
运用jQuery库制作下拉菜单的好处就是可以做出各种不同的动态效果，我今天讲解的是运用slideDown()和slideUp()函数实现的卷页效果。
说明：第一个导航#nav1是点击后出现下拉菜单，而第二个导航#nav2是鼠标移动到上面后出现导航。(样式只为效果，没有美化，望见谅)
1.html代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<ul class="nav" id="nav1">
<li>点击方式下拉菜单:click</li>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">技术</a>
<ul class="subnav">
<li><a href="#">wordpress</a></li>
<li><a href="#">php</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
<li><a href="#">影视</a>
<ul class="subnav">
<li><a href="#">电视剧</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">舞台剧</a></li>
</ul>
</li>
<li><a href="#">联系</a></li>
</ul>
<ul class="nav" id="nav2">
<li>移动方式下拉菜单:hover</li>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">技术</a>
<ul class="subnav">
<li><a href="#">wordpress</a></li>
<li><a href="#">php</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
<li><a href="#">影视</a>
<ul class="subnav">
<li><a href="#">电视剧</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">舞台剧</a></li>
</ul>
</li>
<li><a href="#">联系</a></li>
</ul>
|
2. CSS源码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
* { margin:0; padding:0;} body { font:14px '宋体';} li { list-style:none;} a { text-decoration:none;} a:hover { text-decoration:underline;} #nav1 { margin-bottom:200px;} .nav { margin:10px auto; width:500px; background:#333; height:35px; padding:0 10px; color:#F60;} .nav li { float:left; padding-right:10px; text-align:center; position:relative; height:35px; line-height:35px;} .nav li a { padding:0 10px; height:35px; line-height:35px; display:block; color:#fff; float:left;} .nav li span { float:left; width:17px; height:35px; background:url(subnav_btn.gif) no-repeat center top;} .nav li span.subhover { background-position:center bottom; cursor:pointer;} ul.subnav { display:none; float:left; position:absolute; top:35px; left:-20px; width:100px; background:#666;} ul.subnav li { padding:0; clear:both; width:100px;} |
3. jQuery代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$(document).ready(function() { |