昨天下午有同學問了一個很有趣的選單效果,它的子母選單都是水平式排列,當滑鼠移到母選單時,才會展開子選單。其中最有趣的是子選單的背景顏色會隨著母選單的第一字的顏色而改變,所以筆者就花點時間來實作出來跟大家分享一下。
檢視原始碼 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 28 29 30 31 32 33 34 35 36 37 | <body> <div id="menu-wrapper"> <div class="main-menu-wrapper"> <div class="main-menu"> <ul> <li class="m1"><a href="#"><span>j</span>Query</a></li> <li class="m2"><a href="#"><span>A</span>ndroid</a></li> <li class="m3"><a href="#"><span>W</span>ordPress</a></li> <li class="m4"><a href="#"><span>O</span>penCart</a></li> </ul> </div> </div> <div class="sub-menu-wrapper"> <div class="sub-menu"> <ul class="sub-memu-0"> <li><a href="#">jQuery 應用</a></li> <li><a href="#">jQuery 外掛</a></li> <li><a href="#">jQuery 技巧</a></li> <li><a href="#">jQuery 資源</a></li> </ul> <ul class="sub-memu-1"> <li><a href="#">Android 程式片段</a></li> <li><a href="#">推薦 APP</a></li> <li><a href="#">新機介紹</a></li> </ul> <ul class="sub-memu-2"> <li><a href="#">WP 外掛</a></li> <li><a href="#">WP 技巧</a></li> </ul> <ul class="sub-memu-3"> <li><a href="#">OP 外掛</a></li> <li><a href="#">OP 主題</a></li> </ul> </div> </div> </div> </body> |
.main-menu 主要是母選單,而 .sub-memu-0 就是相對應的子選單。那為什麼要用一堆區塊包起來呢?快先來看 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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | body { margin: 0; } #menu-wrapper .main-menu , #menu-wrapper .sub-menu { margin: 0 auto; width: 980px; } #menu-wrapper ul, #menu-wrapper ul li { margin: 0; padding: 0; list-style: none; } .main-menu ul li, .sub-menu ul li { float: left; } .main-menu ul li a { color: #000; display: block; margin-right: 50px; padding: 5px 5px 5px 0; text-decoration: none; } .sub-menu-wrapper { height: 28px; clear: left; background-color: #f90; border-top: 5px solid #f90; /* 預設使用跟 .c1 一樣的顏色 */ } .sub-menu { height: 28px; position: relative; overflow: hidden; } .sub-menu ul { position: absolute; } .sub-menu ul li a { color: #fff; display: block; margin-right: 20px; padding-top: 2px; text-decoration: none; } /* 自訂子選單的位置 */ .sub-menu .sub-memu-1 { left: 50px; } .sub-menu .sub-memu-2 { left: 170px; } .sub-menu .sub-memu-3 { left: 265px; } /* 自訂每一個選單的顏色 */ .main-menu ul li.m1 span, .main-menu ul li.m1 a.selected { color: #f90; } .main-menu ul li.m2 span, .main-menu ul li.m2 a.selected { color: #09c; } .main-menu ul li.m3 span, .main-menu ul li.m3 a.selected { color: #3c0; } .main-menu ul li.m4 span, .main-menu ul li.m4 a.selected { color: #f6f; } |
CSS 並沒用到什麼特殊的語法,咱們就直接來看套上去後的效果吧~
雖然現在子選單們都疊在一起了,但這就是 jQuery 出場的時機:
檢視原始碼 JavaScript
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 37 38 39 40 41 42 43 44 45 46 47 48 49 | $(function(){ // 先取得相關選單元素及高度 var $menuWrapper = $('#menu-wrapper'), $subMenuWwrapper = $menuWrapper.find('.sub-menu-wrapper').add($menuWrapper.find('.sub-menu')), _height = $subMenuWwrapper.height(), _animateSpeed = 200; // 先把 $subMenuWwrapper 的高度歸 0 // 並把 .sub-menu ul 先往上移動隱藏 var $subMenu = $subMenuWwrapper.height(0).find('.sub-menu ul').css({ top: _height * -1 }); // 當滑鼠移入到 .main-menu ul li a 上時 $('.main-menu ul li a').mouseover(function(){ // 先取出被滑鼠移入的選單 // 並取得該選單中第一個 span 的文字顏色 var $this = $(this), $color = $this.find('span').css('color'), _no = $this.parent().index(); // 改變 $subMenuWwrapper 的顏色為 $color 並展開高度 $subMenuWwrapper.css({ backgroundColor: $color, borderTopColor: $color }).stop().animate({ height: _height }, _animateSpeed); // 移動相對應的子選單 $subMenu.eq(_no).stop().animate({ top: 0 }, _animateSpeed).siblings().stop().animate({ top: _height * -1 }, _animateSpeed); // 讓被滑鼠移入的選單加上指定的效果 $this.addClass('selected').parent().siblings().find('a.selected').removeClass('selected'); return false; }); // 當滑鼠移出 $menuWrapper 後把 $subMenuWwrapper 的高度歸 0 $menuWrapper.mouseleave(function(){ $subMenuWwrapper.stop().animate({ height: 0 }, _animateSpeed); }); }); |
把子選單藏起來或是顯示子選單的動作都由程式來控制,當滑鼠移到母選單時就會自動展開子選單囉~
老師可以依內容多寡自動判斷子選單高度?而不是定義hight的絕對高度
謝謝
Sean
現在的高度應該是用程式去抓取的吧, 你是說那邊是寫死的呢?
老師您好,我很喜歡這個bar,但因目前內容不多,所以bar也不會做到子選單(只留下母選單),於是我把....到
不過現在我遇到問題,若我現在母選單有4個連結(a b c d),其中b c d都有子選單,a沒有,於是我把刪掉,結果顯示變成 a b c是有子選單 但d是母選單而已。
這個我該怎麼克服呢,謝謝
很簡單阿~
這個不要也一起刪除, 留起來就好了
<ul class="sub-memu-0">
</ul>
↑這個不要刪除
您好,請問有像您網頁"水平導覽列"、"垂直下拉"選單的範例可參考嗎??
目前並沒有整理出這樣的範例, 你可以先看一下網頁原始碼的程式
請問垂直下拉選單有範例了嗎??
網頁原始碼看不太懂
老師你好
我是個新手 之前去看別的範例好像都有附js的版本
這個範例好像沒有 可以提供js版本嗎
想請問~
因為網頁開啟時他會先出現一秒再往上跑
是否可以將他先設sub_menu先設display:none
滑入時才出現呢?
拜託教教我 急用>"<
感謝
忘記說明 老師的範例不會 但因為我選單是用圖片 好像就會這樣
你的把要做的事寫出來了, 怎麼不自己試著寫看看呢@@?
男丁格爾先生你好,
請問我可以引用閣下的示例
http://abgne.tw/jquery/apply-jquery/jquery-colorful-elastic-subnav-menu.html
作為我個人網站的menu bar嗎?
十分感謝T_T
可以的~
男丁老師你好
我想請問下看到有些購物網站例如這家http://order.puree.com.tw/
他的首頁的這個http://i.imgur.com/G0fH5Yl.png
可以用jquery製作完成嗎(製作成類似的也行)
可以發篇教學一下嗎
我再看看下星期有沒有時間做一個類似的範例!
男丁老師你好~~我都有照這上面的語法去做
但效果都顯示不出來,是哪裡出了問題,我是用Dreamweaver做的
要給我看看你有問題的網頁我才知道錯那啊XD
老師您好,我想問一下老師下面這段語法中是否每個按鈕都是使用超連結,如果是的話可以幫忙挑出要放置超連結的地方嗎?再來是如果想在網頁最下方插入框架放置可伸縮的播放器(使用這個網站:http://www.pusacg.org/plugin.php?id=ruri_music)請問語法要怎麼寫?不好意思我只是個初學者很多東西都不太懂....
jQuery 應用
jQuery 外掛
jQuery 技巧
jQuery 資源
老師您好:
我是剛剛註冊進來的會員
很喜歡您這個"彩色動態伸縮子選單"
因我是門外漢.只做過框架的html語法
最近知道用frame框架語法已落伍
所以找了好久找到了您這..好感動!
不過我仍迷失在以前的frame框架語法中
因為frame它很方便在選單框架那裡按下後可指定target開啟在另一個框架中...
所以想請問您的"彩色動態伸縮子選單".要如何做才能指定?
比如我是上下兩個區塊.上面區塊放"彩色動態伸縮子選單"
下面區塊是主頁區..也是按下選單後要出現的地方.
習作如下:
上面區塊-預備放選單
按上面的選單要在下面這個窗口開啟視窗
以上.謝謝!