jQuery簡易垂直滑動選單


作者: | 2009/03/29 17:58:00 | 留言


作垂直的滑動選單再也不是難事了,這裡使用的是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]

如此就大功告成了!


標籤:, ,

分類:

本文作者是Audi Lu

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

*

*

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料