自適應RWD 多層下拉選單實作﹍Bootstrap 外掛SmartMenus ... | 下拉式選單bootstrap
所有網站架設要處理的區塊中,導覽列的下拉選單是最麻煩的一部份,如果需要「多層下拉選單」的話,難度就比較高,可參考「Blogger多層下拉選單實作[1]」。而行動裝置使用率大幅攀升後,導覽列非常需要有自適應RWD效果,手機上才能同步呈現下拉選單這麼複雜的功能。因此製作RWD導覽列含多層下拉選單,我認為是架設網站的過程,難度最高的一部份。所以在這篇「如何從Blogger範本網站挑到理想的版型,且不會出錯[2]」,我強烈建議挑選範本時,導覽列的功能要放最高權重。而如果你熟悉HTML/CSS的話,有機會可以自製RWD多層下拉選單,不用...
所有網站架設要處理的區塊中,導覽列的下拉選單是最麻煩的一部份,如果需要「多層下拉選單」的話,難度就比較高,可參考「Blogger 多層下拉選單實作[1]」。而行動裝置使用率大幅攀升後,導覽列非常需要有自適應 RWD 效果,手機上才能同步呈現下拉選單這麼複雜的功能。因此製作 RWD 導覽列含多層下拉選單,我認為是架設網站的過程,難度最高的一部份。
所以在這篇「如何從 Blogger 範本網站挑到理想的版型,且不會出錯[2]」,我強烈建議挑選範本時,導覽列的功能要放最高權重。
而如果你熟悉 HTML/CSS 的話,有機會可以自製 RWD 多層下拉選單,不用跟別人撞衫,而且並不困難,因為國外已經開發了非常完整的免費外掛,以下就來看如何實作。
一、SmartMenus 介紹1. 官網 上面是官網連結,這個免費的導覽列外掛 SmartMenus 歷史非常悠久,隨著網路技術的進步也不斷地演進,一路發展到現在的版本,最終是使用 jQuery、Bootstrap 等框架來開發各種導覽列效果。2. 各種 DEMO 效果
上面網址進入「Launch gallery »」後,包含各種展示效果,幾乎常見的導覽列樣式都可以找到。上圖是比較特別的動畫下拉選單,會有彈出式的特效,可進入官網看效果。
這個 Mega 下拉選單真是嚇壞我了!通常只會在要價不斐的付費範本看到這樣的效果,沒想到 SmartMenus 不但提供了這類的 Mega 下拉選單,而且還提供了多種版面效果!!
3. CDN
最棒的一點是,SmartMenus 這個外掛有 CDN 支援,代表讀者不用費心找網頁空間來擺放檔案,直接外連 CDN 就行了,非常方便、速度又快。二、準備動作 開始製作「自適應多層下拉選單導覽列」之前,必須先瞭解這個外掛是基於 jQuery、Bootstrap 而開發,因此需要先載入這兩個框架。連同框架,所有要引用的外部 CDN 連結如下:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>&...