本文實例講述了jQuery實現簡單下拉導航效果。分享給大家供大家參考。具體如下：
這里粗略做一款基于jquery的下拉導航菜單效果，我覺得挺不錯，雖然沒有怎么美化，但是代碼易懂，另外修補的空間也比較大，相信對學習CSS以及jquery的朋友有不小的幫助。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-xl-down-show-nav-codes/
具體代碼如下：
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>jQuery下拉導航</title><script type="text/javascript" src="jquery-1.6.2.min.js"></script><script type="text/javascript">$(function(){ $('.nav').children("li:has(ul)").hover(function(){ $(this).children("ul").slideDown(); }, function(){ $(this).children("ul").hide(); } ); }); </script> <style type="text/css"> *{margin:0;padding:0;} .nav {margin:200px;list-style-type:none;} .nav li {position:relative;float:left;margin-right:10px;} .nav li ul {display:none;position:absolute;top:20px;left:0;list-style-type:none;} .nav li ul li {padding:2px 0;} </style></head><body> <ul class="nav"> <li><a href="#">首頁</a> </li> <li> <a href="#">鏈接</a> <ul> <li><a href="#">aaa</a></li> <li><a href="#">bbb</a></li> <li><a href="#">ccc</a></li> <li><a href="#">ddd</a></li> </ul> </li> <li> <a href="#">相冊</a> <ul> <li><a href="#">11</a></li> <li><a href="#">22</a></li> <li><a href="#">33</a></li> <li><a href="#">44</a></li> </ul> </li> <li> <a href="#">博客</a> <ul> <li><a href="#">AA</a></li> <li><a href="#">BB</a></li> <li><a href="#">CC</a></li> <li><a href="#">DD</a></li> </ul> </li> <li> <a href="#">關于</a> </li> <div style="clear:both"></div></ul></body></html>希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答
