26、ECSHOP製作無限級響應式導航與垂直選單
2017-03-10
182
相關文章
由於ECSHOP與 jquery 的衝突,有些人可能對修改程式有些困,因此分享一下不依賴JQUERY的無限級響應式導航與垂直選單Script,這個腳本是純JS製作的,無論水平或垂直選單,都支援無限級響應式,在中大螢幕下滑鼠經過自動展開選單,手機則變成點擊展開並搭配滑動效果,在Bootstrap中要製作無限級選單不容易,但使用 ddlevelsmenu 這個JS腳本就可以輕易實現,不一定要用JQUERY或Bootstrap才能完成,因為很多效果CSS3已經具備了...
使用方式很簡單,首先 下載ddlevelsmenu 或先看效果展示 ,下載的壓縮包中包涵demo.htm、demo2.htm、changelog.txt、ddlevelsfiles(資料夾),將 ddlevelsfiles(資料夾)上傳至網站或模板目錄,然後在網頁頭部加入:





接著在頁面中加入你的選單程式碼,可參考 demo.htm、demo2.htm:
使用方式很簡單,首先 下載ddlevelsmenu 或先看效果展示 ,下載的壓縮包中包涵demo.htm、demo2.htm、changelog.txt、ddlevelsfiles(資料夾),將 ddlevelsfiles(資料夾)上傳至網站或模板目錄,然後在網頁頭部加入:





接著在頁面中加入你的選單程式碼,可參考 demo.htm、demo2.htm:
<div id="ddtopmenubar" class="mattblackmenu"> <ul> <!-- 第一層 --> <li> <a href="">首頁</a> </li> <!-- 有多層選單必須加上 rel="ddsubmenu?" 必須與子選單 id 對應 --> <li> <a href="/article_cat-12-ecshop+%E4%BD%BF%E7%94%A8%E6%95%99%E5%AD%B8.html">ECSHOP設定教學</a> </li> <li> <a href="#">模板插件</a> </li> <li> <a href="/article_cat-37-ECSHOP%E9%9F%BF%E6%87%89%E5%BC%8F%E6%A8%A1%E7%89%88.html">響應式模板DIY</a> </li> <li> <a href="#">支援服務</a> </li> </ul> </div> <!-- 手機用圖示 --> <a class="animateddrawer" id="ddtopmenubar-mobiletoggle" href="#"> <span></span> </a> <!-- 第一個子選單 --> <ul id="ddsubmenu1" class="ddsubmenustyle"> <li> <a href="#">子選單 1a</a> </li> <!-- 第二層 --> <li> <a href="#">子選單 2a</a> </li> <li> <a href="#">子選單 資料夾 3a</a> <ul> <!-- 第三層 --> <li> <a href="#">第三層子選單 3.1a</a> </li> <li> <a href="#">第三層子選單 3.2a</a> </li> <li> <a href="#">第三層子選單 3.3a</a> </li> <li> <a href="#">第三層子選單 3.4a</a> </li> </ul> </li> <li> <a href="#">子選單 4a</a> </li> <li> <a href="#">子選單 資料夾 5a</a> <ul> <!-- 第三層 --> <li> <a href="#">第三層子選單 5.1a</a> </li> <li> <a href="#">子選單 資料夾 5.2a</a> <ul> <!-- 第四層 --> <li> <a href="#">第三層子選單 5.2.1a</a> </li> <li> <a href="#">第三層子選單 5.2.2a</a> </li> <li> <a href="#">第三層子選單 5.2.3a</a> </li> <li> <a href="#">第三層子選單 5.2.4a</a> </li> </ul> </li> </ul> </li> <li> <a href="#">子選單 6a</a> </li> </ul> <!-- 第二個子選單 --> <ul id="ddsubmenu2" class="ddsubmenustyle"> <li> <a href="#">子選單 1b</a> </li> <!-- 第二層 --> <li> <a href="#">子選單 2b</a> </li> <li> <a href="#">子選單 資料夾 3b</a> <ul> <!-- 第三層 --> <li> <a href="#">第三層子選單 3.1b</a> </li> <li> <a href="#">第三層子選單 3.2b</a> </li> <li> <a href="#">第三層子選單 3.3b</a> </li> <li> <a href="#">第三層子選單 3.4b</a> </li> </ul> </li> <li> <a href="#">子選單 4b</a> </li> <li> <a href="#">子選單 資料夾 5b</a> <ul> <!-- 第三層 --> <li> <a href="#">第三層子選單 5.1b</a> </li> <li> <a href="#">子選單 資料夾 5.2b</a> <ul> <!-- 第四層 --> <li> <a href="#">第三層子選單 5.2.1b</a> </li> <li> <a href="#">第三層子選單 5.2.2b</a> </li> <li> <a href="#">第三層子選單 5.2.3b</a> </li> </ul> </li> </ul> </li> <li> <a href="#">子選單 6b</a> </li> </ul> <!-- 第三個子選單 --> <ul id="ddsubmenu3" class="ddsubmenustyle"> <li> <a href="/vip.php">贊助VIP</a> </li> <li> <a href="/host_list.php">虛擬主機用戶列表</a> </li> <li> <a href="/message.php">留言板</a> </li> <li> <a href="/contactus.php">聯絡我們</a> </li> <li> <a href="/bbs/">討論區</a> </li> </ul>如果你是 VIP 請至 VIP室 查看如何套用至ECSHOP模板中...
如果你對26、ECSHOP製作無限級響應式導航與垂直選單有任何問題請到討論區發帖。