Bootstrap教學-將Bootstrap下拉選單變成hover滑入展開

梅問題-Bootstrap教學-將Bootstrap下拉選單改成滑入展開
  Bootstrap除了內建的Grig很好用以外, 就連許多的javascript互動特效也很方便,像是大家最常使用的廣告輪播、下拉選單、頁籤.....等特效,直接將專案引用Bootstrap後,立即就可使用,同時這些特效也相當容易套用,再也不用每次四處去下載特效,一套用後還會出現問題,雖然說Bootstrap雖然很方便,但一切就只能它說的算,而最近梅干幫朋友設計了一個Wordpress版型,裡面的所用特效都是Bootstrap,其中上方的選單中,當有子選單時,則需點一下才能將它展開,最主要是Bootstrap是RWD的框架,所以在手機模式只有Touch,因此可以理解它的思維,但今天若只單純用於桌機版時,就有滑入的事件,所以當滑鼠滑入時,顯示子選單是比較符合經驗的,難不成要打掉重練嗎?其實並不用,只需要加入二行的css,立即就可實現 當滑鼠滑入時自動展開選單,至於要怎麼作現在就一塊來看看吧!!

其實方法很簡單,只需要在css中,加入以下的語法,立即就可把原先,點擊的下選單變成滑入顯示。
style.css
.dropdown-menu li:hover .sub-menu {visibility: visible;}
.dropdown:hover .dropdown-menu {display: block;}

完成後,立即測試看看,當滑鼠滑到下拉選單的區塊時,就會自動展開子選單了,是不是超ez的呀!
梅問題-Bootstrap教學-將Bootstrap下拉選單改成滑入展開
[範例預覽]

相關文章

「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

近期講座

2017 (二月講座)

2017 (一月講座)

更多講座