筆者有介紹過一個 Background-Position Animation Plugin,它讓 jQuery.animate 能支援原本所不支援的 background-position 屬性。所以我們就能使用它來做到更多有趣的動畫效果,像這次要教的翻選式選單也是玩玩 background-position 屬性的。
選單的部份筆者是用 ul 來做的:
1 2 3 4 5 6 7 8 9 10 11 | <body> <h3>水平選單(圖片是垂直)</h3> <ul id="hmenu"> <li><a href="#" class="v1">男丁</a></li> <li><a href="#" class="v2">jQuery</a></li> <li><a href="#" class="v3">小神童</a></li> <li><a href="#" class="v4">蠟筆小新</a></li> </ul> <br class="clear" /> </body> |
在看 CSS 設定之前先來看一下選單的背景圖片
圖片雖然有上下兩排,但一開始我們只要讓它顯示上半部,當滑鼠移到選單時再切換到顯示下半部,讓整個動作有"翻"的感覺。CSS 這邊就配合 li 裡面的連結而加上不同的背景圖片;
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 | #hmenu { margin: 0; padding: 0; list-style: none; } #hmenu li { float: left; padding: 0 5px; } #hmenu li a { display: block; height: 16px; /* 圖片的高/2 */ line-height: 16px; /* ie suck */ text-indent: -9999px; } #hmenu a.v1 { width:68px; /* 圖片的寬 */ background:url(v1.gif) no-repeat 0 0; } #hmenu a.v2 { width:67px; /* 圖片的寬 */ background:url(v2.gif) no-repeat 0 0; } #hmenu a.v3 { width:67px; /* 圖片的寬 */ background:url(v3.gif) no-repeat 0 0; } #hmenu a.v4 { width: 67px; /* 圖片的寬 */ background:url(v4.gif) no-repeat 0 0; } |
比較麻煩的是在 IE 6 中,若超連結沒設 line-height 的話,整個超連結的 height 會超出限制範圍,因此要記得加上 line-height 喔!
做到這邊就已經有個基本的雛型了,接下來就請出我們的 jQuery.animate 來做動畫效果囉:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $(function(){ // 幫 #hmenu li a 加上 hover 事件 $("#hmenu li a").hover(function(){ // 滑鼠移進選項時.. // 把背景圖片的位置往上移動 var _this = $(this), _height = _this.height() * -1; _this.stop().animate({ backgroundPosition: "0px " + _height + "px" }, 200); }, function(){ // 滑鼠移出選項時.. // 把背景圖片的位置移回原位 $(this).stop().animate({ backgroundPosition: "0px 0px" }, 200); }); }); |
這邊用到的也是很基本的 animate 而已,只是記得要引用 Background-Position Animation Plugin 才行喔。
最後我們就能來看效果哩,試著把滑鼠移到選項上面看看:
我們的選項就會往上翻轉吧,若是要往下翻轉的話,那麼就要改一開始的 background-position 及移動的位置就可以了。這題目就當成是作業讓各位自行去練習吧!
現在除了上下翻轉之外,筆者再弄個左右翻轉的範例,因為是左右的關係,所以圖片就要變化一下樣式:
當然 CSS 及 jQuery 也需要配合修改一下,整個範例語法為:
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 53 54 55 56 57 58 59 60 61 62 | <style type="text/css"> #vmenu { margin: 0; padding: 0; list-style: none; } #vmenu li { padding: 5px 0; } #vmenu li a { display: block; height: 18px; /* 圖片的高 */ line-height: 18px; /* ie suck */ text-indent: -9999px; } #vmenu a.h1 { width:40px; /* 圖片的寬/2 */ background:url(h1.gif) no-repeat 0 0; } #vmenu a.h2 { width:58px; /* 圖片的寬/2 */ background:url(h2.gif) no-repeat 0 0; } #vmenu a.h3 { width:58px; /* 圖片的寬/2 */ background:url(h3.gif) no-repeat 0 0; } #vmenu a.h4 { width:82px; /* 圖片的寬/2 */ background:url(h4.gif) no-repeat 0 0; } </style> <script type="text/javascript"> $(function(){ // 幫 #hmenu li a 加上 hover 事件 $("#vmenu li a").hover(function(){ // 滑鼠移進選項時.. // 把背景圖片的位置往左移動 var _this = $(this), _width = _this.width() * -1; _this.stop().animate({ backgroundPosition: _width + "px 0" }, 200); }, function(){ // 滑鼠移出選項時.. // 把背景圖片的位置移回原位 $(this).stop().animate({ backgroundPosition: "0 0" }, 200); }); }); </script> <body> <h3>垂直選單(圖片是水平)</h3> <ul id="vmenu"> <li><a href="#" class="h1">男丁</a></li> <li><a href="#" class="h2">jQuery</a></li> <li><a href="#" class="h3">小神童</a></li> <li><a href="#" class="h4">蠟筆小新</a></li> </ul> </body> |
瀏覽後的效果就是改成水平的翻轉:
這樣的選單效果是不是很有趣呢?!如果再將選單做整體設計的話,那效果並不會比 Flash 差到那唷。
感謝老師的教學分享
PS: 搶到沙發囉
男丁老師,不好意思,打擾您了,我有問題想請教老師,老師您的翻選式選單,我將圖片換成png透明的時候,在加上pngFix.pack.js這支支援ie6透明度呈現的檔案,結果在ie6執行就無法做翻動的動作,這是哪裡出了問題~~謝謝
Fix Png 有時會產生一些怪 Bug 的XD
當點選為那個選項時,如何把圖片停留在移動後的效果呢~
你可以參考網友 derek 的方式..或是上面新增的第五個範例
男丁老師:
使用第五個範例時,原本加在 href 內的連結變成沒效了,而且selected 的效果會永遠停留,直至再按一次再消失。
同時,selected 的效果不是exclusive而是可以全部都變成 selected。
可否做到同一時間只可有一個selected的效果?
感謝!
ivan
to cdavid
可參考小弟的作法:
http://twcf2.summerhost.info/1298/1298.php
男丁大大~
看了網站內的CSS選單的作法後覺得真的很受用~
目前我想要做一個挺複雜的選單,不知男丁大大能否指導...m(_ _)m
在網路上看到的選單作法,橫式的是橫式的、直式的是直式的...但如果想做橫式的+直式的那又該怎麼做呢TDT~
我第一層的主選單是橫式的(如:男丁大大教的翻選式選單)、第二層的子選單也是橫式的(如:男丁大大教的水平雙層子選單)、第三層的子子選單是以直式的方式呈現...該怎麼做才好呢...我做了好久但第三層DIV的位置卻喬不定...第三層的直式選單不會乖乖出現在第二層橫式選單的正下方...我好困擾....T^T
要不要到討論區發篇問題討論..順便把目前你弄出來的程式碼一起貼出來
這樣好讓大家一起幫你找問題
請問若需要做連結的話,是否還需要改其他地方呢?我改了一般正常連結的這邊,卻無法連結...
只要把 a 的 href 指定到你要連結的網址就可以了@@!
您好
想問是否能讓他預設顯示
指定哪一個選項為預設翻轉
感謝!
想請問是否能根據網址
來決定翻轉的預設狀態呢?
感謝
你可以先自訂一個 css 來指定你要預設的那個為翻轉。
或是以第一個範例為例多加這段
請問大大若是我要把他放到一個定點這樣我程式碼要怎麼寫才好?
(我有嚐試使用ap div包覆再用ccs:position:relative;position:absolute; 但是還是沒辦法放到我想放的位置)
這應該只是基本的 css 問題, 要先看你 html, 然後才能知道你想放的位置要怎樣寫
跟整個範例沒什麼關係哩~
回Bomb一點意見:
用style就可以把想要的預設翻轉了,
但是想在不碰到它就讓它轉回去的話,
記得另外寫一個function在其他圖片有動作的時候重置