前天上課時有同學問到是否有水平雙層子選單的範例,所以筆者就把原有的舊範例稍微整理一下,現在要來跟各位分享這有趣的選單效果囉。
一樣是用 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(); }); }); |
筆者使用了淡入淡出的效果來顯示/隱藏子選單,但有個小地方要注意一下,除了要先清除未完成的動畫效果之外;若動畫時間設太長的話,可能會在上一次的子選單未消失前,又讓使用者把滑鼠移上去而產生錯亂的情況喔。
請問如何才可以弄到如http://designsensory.com/的效果,
即是自動展示當前類別向更改轉換類別的時間?
謝謝!!!
你說的是上半部的選單嗎..?不過我不太懂你的問題是...?XD
請問,有三層的寫法嗎? 要怎麼改寫? 或是有什麼範例,謝謝。
你的三層是要長的怎樣呢...@@?
和您提供的範例(http://demonstration.abgne.tw/jquery/0015/0015_4.html)一樣都是橫的,第三層也是橫的。
子選單的消失Trigger 也和範例一樣。
作動方式如下:
滑鼠移到(或點擊)第一層,出現第二層
滑鼠點擊第二層,出現第三層
你好,http://yuyua3.freehostia.com/demo/Navigation_Demo.html請問這個裡面的箭頭為什麼無法顯示呢?我把所有的原始檔程式全選貼上,但是無法跟您網頁上顯示的依樣ㄝ
我看到您的子選單是有箭頭的...我想這問題你應該是解決了吧..@@
請問一下這個特效
為什麼在火狐可以看得到
到了ie8滑入就沒有反應了
請問是甚麼狀況呢???
我的範例應該在 IE 8 都是ok的
如果是你的範例的話, 需要看到檔案才知道為什麼~
男丁老師,請教您個問題,如果當我的次選項超過寬度的範圍,例如:其他網站現在有4個選項,當我多了第5個,它會自動斷行對齊嗎?
目前範例是不會...XD
恩恩,我解決箭頭的問題了!!謝謝
不過我現在重新做一個網頁,但我把css是存在另一個檔案中!!就是新增css列表!
一樣的程式貼上去但是無法顯示需要跳出來的選項!!
請問可以麻煩你幫我看一下檔案嗎?
我沒有把他傳到網路上去,方便寄給您嗎?
謝謝...
可以直接寄給我, 或是到討論區中發文貼上程式碼。
男丁大大您好~
我是初學者,想請問一下如果我想把選單部分換成自己設計的圖片,CSS部分我該從哪個部分去換呢?
例如"新年快樂" 這個區塊換成圖片
請大大指教 感謝><
可以利用背景圖片的方式來設定 li a 的樣式.
為什麼外部連結.css跟.js會無法顯示出正確的橫向呢
要看到你的網頁內從才能知道發生什麼事..
請問如何可以將第二層選單設為長期顯示,
如http://designsensory.com/似的,
移去新的選項會改變為新的子選單,
離開後點到最初預設的子選單,
這個效果怎樣才可以達到?
你可以把它當成頁籤的方式來實做就可以了。