Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

梅問題-Bootstrap教學-Bootstrap導覽列下拉選單加入網格系統變Mega Menu選單
  使用Bootstrap內建的導覽列,再加上Dropbox的下拉選單後,就可讓Bootstrap的導覽列變成雙層選單,當點撃選單後,就跳到對應的頁面,而這就是一個很單純的選單功能,但這樣條列的選單是較制式與平淡,就跟點餐看到一堆菜單的名稱一樣,因此當菜單附上圖片後,除了更能吸引人外,也更易了解每個選項的內容。
  所以今天要來分享,如何將Bootstrap導覽列的下拉選單進行擴充,讓原來只有條列式選單,變成一個Mega Menu的大型選單,就是當選單展開後,除了選項還能在裡面加入圖片,讓選單更加的吸引人,至於要怎麼做呢?現在就一塊來看看吧!
Step1
加入下方的CSS樣式設定。
.mwt-nav>.container {
  position: relative;
}
.mwt-nav li.full.open{
  position: static;
}

Step2
接著在navbar的class中,加入mwt-nav
<nav class="navbar navbar-inverse mwt-nav">
	.....

Step3
接著在要變大的Mega選單的li加入full,接著就可在下方加入Bootstrap的網格系統了。
 <li class="full"><a href="#" data-toggle="dropdown">選單網格 <span class="caret"></span></a>
   <div class="dropdown-menu" role="menu">
   	<div class="container">
   		.....
 		</div>
   </div>

Step4
當完成後,點開選單,就再只是條列式的選單,而且可將Bootstrap的網格系統應用到選單中。
梅問題-Bootstrap教學-Bootstrap導覽列下拉選單加入網格系統變Mega Menu選單
Step5
這時就可讓選單,圖文並茂。
梅問題-Bootstrap教學-Bootstrap導覽列下拉選單加入網格系統變Mega Menu選單
Step6
若要使用原來的條列式選單,只需將li中的full拿掉,就可回到原來的條列式選單啦!是不是超方便的呀!
梅問題-Bootstrap教學-Bootstrap導覽列下拉選單加入網格系統變Mega Menu選單
[範例預覽]

相關文章

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

Lookup-ID一鍵取得Facebook個人臉書、社團、粉絲頁的ID

Lookup-ID一鍵取得Facebook個人臉書、社團、粉絲頁的ID





回應本篇 »

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

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

近期講座

近期講座

更多講座