快捷導(dǎo)航

jquery實(shí)現(xiàn)最簡(jiǎn)單的滑動(dòng)菜單效果代碼

更新時(shí)間：2015年09月12日 12:50:16 作者：企鵝

這篇文章主要介紹了jquery實(shí)現(xiàn)最簡(jiǎn)單的滑動(dòng)菜單效果代碼,涉及jQuery基于鼠標(biāo)事件操作頁(yè)面元素動(dòng)態(tài)變換的基本技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)最簡(jiǎn)單的滑動(dòng)菜單效果代碼。分享給大家供大家參考。具體如下：

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

運(yùn)行效果截圖如下：

在線演示地址如下：

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="#">單機(jī)游戲</a></li>
   <li><a href="#">網(wǎng)絡(luò)游戲</a></li>
  </ul>
 </li>
 <li class="li">
  <a href="#">音樂(lè)</a>
  <ul>
   <li><a href="#">流行歌曲</a></li>
   <li><a href="#">搖滾</a></li>
  </ul>
 </li>
 <li class="li">
  <a href="#">編程語(yǔ)言</a>
  <ul>
   <li><a href="#">Javascript</a></li>
   <li><a href="#">PHP</a></li>
  </ul>
 </li>
</ul>
</body>
</html>

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

您可能感興趣的文章: