前天上課時有同學問到是否有水平雙層子選單的範例,所以筆者就把原有的舊範例稍微整理一下,現在要來跟各位分享這有趣的選單效果囉。
一樣是用 ul 及 li 來當母子選單的項目:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <body> <ul id="menu"> <li><a href="#">jQuery</a> <ul> <li><a href="#">應用範例</a></li> <li><a href="#">使用技巧</a></li> <li><a href="#">相關資源</a></li> </ul> </li> <li> <a href="#">CSS</a> <ul> <li><a href="#">CSS Hack</a></li> <li><a href="#">免費圖示</a></li> </ul> </li> <li><a href="#">其它網站</a> <ul> <li><a href="#">男丁格爾's 脫殼玩</a></li> <li><a href="#">Google</a></li> <li><a href="#">Yahoo!奇摩</a></li> <li><a href="#">原子小金剛</a></li> </ul> </li> <li><a href="#">新年快樂</a></li> </ul> </body> |
子選單可放在第一層 li 的裡面,若沒有子項目的話就單獨就好。接著再用 CSS 把選單排成水平樣式,並把子選單先隱藏起來:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | #menu { margin: 0; padding: 0; list-style: none; position: relative; width: 500px; float: left; background: #000; } #menu li { margin: 0; padding: 0; float: left; border-right: 1px solid #999; } #menu li a { padding: 10px 15px; display: block; color: #fff; text-decoration: none; } #menu li ul { margin: 0; padding: 15px 0; list-style: none; float: left; position: absolute; left: 0; width: 500px; color: #fff; background: #06c url('bottom.gif') no-repeat bottom; display: none; } #menu li ul li { border-right: 1px solid #fff; } #menu li ul li a { display: inline; } #menu li ul li a:hover { text-decoration: underline; } |
子選單的座標系統要設成 absolute,這樣才能讓它浮出整個選單。接著為了讓子選單美觀一點點,所以筆者在第二層 ul 中加入了有圓角效果的背景圖片。
先來看經過 CSS 裝飾過後的效果:
若沒問題的話,就開始動手做最關鍵的程式部份:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(function(){ // 幫 #menu li 加上 hover 事件 $('#menu li').hover(function(){ // 先找到 li 中的子選單 var _this = $(this), _subnav = _this.children('ul'); // 變更目前母選項的背景顏色 // 同時顯示子選單(如果有的話) _this.css('backgroundColor', '#06c'); _subnav.css('display', 'block'); } , function(){ // 變更目前母選項的背景顏色 // 同時隱藏子選單(如果有的話) // 也可以把整句拆成上面的寫法 $(this).css('backgroundColor', '').children('ul').css('display', 'none'); }); // 取消超連結的虛線框 $('a').focus(function(){ this.blur(); }); }); |
其實因為已經都用 CSS 設計過了,程式這邊只是控制滑鼠移到母選項的時候的動作而已。當移到母選項時則顯示子選單;反之則隱藏起來。
這樣的選單效果是不是也很有意思呢?我們也可以在子選單顯示時加上一些動畫效果:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(function(){ // 幫 #menu li 加上 hover 事件 $('#menu li').hover(function(){ // 先找到 li 中的子選單 var _this = $(this), _subnav = _this.children('ul'); // 變更目前母選項的背景顏色 // 同時淡入子選單(如果有的話) _this.css('backgroundColor', '#06c'); _subnav.stop(true, true).fadeIn(400); } , function(){ // 變更目前母選項的背景顏色 // 同時淡出子選單(如果有的話) // 也可以把整句拆成上面的寫法 $(this).css('backgroundColor', '').children('ul').stop(true, true).fadeOut(400); }); // 取消超連結的虛線框 $('a').focus(function(){ this.blur(); }); }); |
筆者使用了淡入淡出的效果來顯示/隱藏子選單,但有個小地方要注意一下,除了要先清除未完成的動畫效果之外;若動畫時間設太長的話,可能會在上一次的子選單未消失前,又讓使用者把滑鼠移上去而產生錯亂的情況喔。
老師,我試過滑入用slideDown 滑出用fadeOut 這樣挺有FU的!
光是想像就覺得不錯哩!!
請問男丁大大,我想用成這樣子,第二層寬度高度隨裡面放置內容改變,那要怎麼改?
http://apexi-usa.com/
該網站的效果跟這範例不一樣, 它的子選單應該只是一個 div 之類的區塊, 然後其中放了很多項目而已。
請教一下,
如果是垂直的話,
滑鼠移到主選單,則子選單往右跳出,
子選單與主選單的 display 就是 inline 嗎?
沒特別試過, 不過畢竟只要先能用 CSS 排出來, 接下來寫程式就簡單多了!
老師請問一下有沒有可能實現,滑鼠移開後選單顏色還是持續?
可以啊, 不過這樣滑鼠離開後只有母選單會變色~
我補在範例 6 了~
老師~再請問一下有沒有可能連子選單一起變色呢
老師我可不可以把我的檔案寄給你,請您幫看我的問題呢?
可以直接寄給我看看~
老師直接MAIL到您的信箱不知可以嗎?
請問信箱!
信箱就是網址@gmail.com
請問男丁大大,子選單出現會覆蓋下面圖或字,有無辦法可以讓子選單出現時,圖或字往下移;子選單消失時,圖和字又回復原來位置??
以現在範例套用的效果來說是不行的, 要的話, 得要修改整個配置方式~
你好啊! 你的教學真的酷呆了~ >W<
想問這個code能改一下令子選單(彈出來的選項)
變到打直向下拉嗎? .<"
你可以試著套過修改 css 來讓 #menu li ul li 不要浮動!
想請教一下, 可否循環滖動, 而不是每次由頭開以, 謝
你的循環的意思是什麼?
請問大大
我若第一層就要下滑(slideDown),那我該如何做??
是加在_this.css('backgroundColor', ");嗎?
// 變更目前母選項的背景顏色
// 同時顯示子選單(如果有的話)
_this.css('backgroundColor', ");
_subnav.stop(true, true).slideDown(400);
}).eq(_open).mouseover();
什麼是第一層就要下滑?
男丁老師您好,看了您的範例確實是受用不少,不過我看您都是利用ul和li來做,請問如果使用td加img圖片是否也能夠做到相同的效果?謝謝
table 的結構很難做出一些動畫效果出來..
男丁格主:我有試著依照你的.hover改成click的方法改,但可能是我不知道要加在哪個位置所以失敗囉ˊˋ,
希望男丁格主可以在講解一次~
麻煩你了!
基本上就是把 hover 這字換成 click, 然後另一個 function 就拿掉它..
but...原本第二個 function 中要做的事就要移到第一個中才行~
你先試看看, 若有問題再把你改過的程式也貼上來看看