jquery實作最簡單的滑動選單效果碼_jquery
- WBOY原創
- 2016-05-16 15:39:491192瀏覽
本文實例講述了jquery實作最簡單的滑動選單效果程式碼。分享給大家供大家參考。具體如下：
這是一款最簡單的jQuery下拉滑出選單，jQuery程式碼實現，這裡沒有過多的去修飾選單，僅是一些基本的實現，特別是對學習jQuery是個不錯的參考實例，這裡使用了一個jquery封裝庫檔案jquery.tools.min.js，從外部引入，測試時候可能會因載入不成功而看不到效果，刷新網頁即可解決此問題。
運作效果截圖如下：
線上示範網址如下：
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="#">网络游戏</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程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn