作者 主題: 26、ECSHOP製作無限級響應式導航與垂直選單  (閱讀 474 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
26、ECSHOP製作無限級響應式導航與垂直選單
« 於: 七月 22, 2019, 11:16:21 下午 »
由於ECSHOP與 jquery 的衝突,有些人可能對修改程式有些困,因此分享一下不依賴jquery的無限級響應式導航與垂直選單Script,這個腳本是純js製作的,無論水平或垂直選單,都支援無限級響應式,在中大螢幕下滑鼠經過自動展開選單,手機則變成點擊展開並搭配滑動效果,在BootStrap中要製作無限級選單不容易,但使用 ddlevelsmenu 這個js腳本就可以輕易實現,不一定要用jquery或BootStrap才能完成,因為很多效果css3已經具備了...

使用方式很簡單,首先 下載ddlevelsmenu 或先看 效果展示 ,下載的壓縮包中包涵demo.htm、demo2.htm、changelog.txt、ddlevelsfiles(資料夾),將 ddlevelsfiles(資料夾)上傳至網站或模板目錄,然後在網頁頭部加入:
代碼: [選擇]
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-mobile.css" />
<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js"></script>






接著在頁面中加入你的選單程式碼,可參考 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" rel="ddsubmenu1">ECSHOP設定教學</a></li>
        <li><a href="#" rel="ddsubmenu2">模板插件</a></li>
        <li><a href="/article_cat-37.html">響應式模板DIY</a></li>
        <li><a href="#" rel="ddsubmenu3">支援服務</a></li>
    </ul>
</div>
<!-- 手機用圖示 -->
<a class="animateddrawer" id="ddtopmenubar-mobiletoggle" href="#">
    <span></span>
</a>
<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar");//水平選單
    //ddlevelsmenu.setup("mainmenuid", "sidebar");//垂直選單(請參考 demo2.htm)
</script>
<!-- 第一個子選單 -->
<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="https://www.we-shop.net/host.php" target="_blank">虛擬主機</a></li>
    <li><a href="/message.php">留言板</a></li>
    <li><a href="/contactus.php">聯絡我們</a></li>
    <li><a href="/bbs/">[url=https://www.we-shop.net/bbs/">討論區</a></li>
</ul>
如果你是 VIP 請至 VIP室 查看如何套用至ECSHOP模板中...
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php