jQuery簡易垂直滑動選單

製作垂直的滑動選單再也不是難事了，這裡使用的是jQuery這個javascript的framework。以下開始介紹作法:

我們先來製作一下選單的部份，在body標籤內放上這樣的內容:

[html]
<dl>
<dt><a href="#">Item1</a></dt>
<dd>
<ul>
<li><a href="1.html">11111</a></li>
<li><a href="2.html">22222</a></li>
</ul>
</dd>
<dt><a href="#">Item2</a></dt>
<dd>
第二選單的內容在這裡: <br/><a href="a.html">aaaaa</a>
</dd>
<dt><a href="#">Item3</a></dt>
<dd>
<img width="180" src="http://events.jquery.com/img/jquery-logo.png">
</dd>
</dl>
[/html]

確認了選單的主結構及內容，我們就可以套上程式及CSS囉!~

請在head標籤內放上:

[js]
<script src="http://jquery.com/src/jquery.js"></script>
<script>
$(document).ready(function(){ //網頁讀取完畢後
//把所有dd標籤的內容都hide起來
$("dd").hide();

//按下dt元素連結
$("dt a").click(function() {
$("dd").slideUp("slow"); //子分頁

//下一個主選單以下的內容要slide down
$(this).parent().next().slideDown("slow");
return false;
});
});
</script>

<style>
dl { width: 200px; background: #fff;}
dt { background: #775; padding: 2px; margin: 2px; }
dd { margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000; }
</style>
[/js]

如此就大功告成了!

標籤：jQuery, 網站設計, 選單

分類：介面設計

本文作者是Audi Lu