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下拉選單改成滑入展開
[範例預覽]

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用





回應本篇 »

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

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