這是一款最簡單的jQuery下拉滑出菜單，jQuery代碼實現(xiàn)，這里沒有過多的去修飾菜單，僅是一些基本的實現(xiàn)，特別是對學(xué)習(xí)jQuery是個不錯的參考實例，這里使用了一個jquery封裝庫文件jquery.tools.min.js，從外部引入，測試時候可能會因載入不成功而看不到效果，刷新一下網(wǎng)頁即可解決此問題。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/jquery-simple-nav-cha-menu-style-codes/

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>下拉滑出的菜單</title>
<script src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(function() {
 $("#list li").hover(function() {
 $(this).children("ul").slideDown();
 }, function() {
 $(this).children("ul").slideUp();
 });
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none outside none}
#list{font-size:14px;width:500px;margin:55px auto}
#list ul{font-size:12px;display:none}
#list .li{float:left;width:100px;margin-right:1px;background:orange}
</style>
</head>
<body>
<ul id="list">
 <li class="li">
  <a href="#">游戲</a>
  <ul>
   <li><a href="#">單機游戲</a></li>
   <li><a href="#">網(wǎng)絡(luò)游戲</a></li>
  </ul>
 </li>
 <li class="li">
  <a href="#">音樂</a>
  <ul>
   <li><a href="#">流行歌曲</a></li>
   <li><a href="#">搖滾</a></li>
  </ul>
 </li>
 <li class="li">
  <a href="#">編程語言</a>
  <ul>
   <li><a href="#">Javascript</a></li>
   <li><a href="#">PHP</a></li>
  </ul>
 </li>
</ul>
</body>
</html>

希望本文所述對大家的jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: