目前位置: 首頁 > Boostrap4響應式模板DIy > 3、不依賴Jquery的響應式多階層導航

3、不依賴Jquery的響應式多階層導航 超大 稍大 微大

10 發表於: 2020-09-25 最後更新: 最後更新時間:2020-09-27

ddlevelsmenu.js是一個不必依賴Jquery的響應式多階層導航,因此在ecshop也能順利使用,附件的檔案中附有水平和垂直兩種呈現方式,作法也很簡單,解壓縮後將ddlevelsfiles整個資料夾上傳到模板目錄,裡面有個blank.htm需要複製到網站的根目錄,然後參考如的代碼:

	<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>
	
	<div id="ddtopmenubar" class="mattblackmenu fixed-top">
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#" rel="ddsubmenu1">DHTML</a></li>
	<li><a href="#" rel="ddsubmenu2">CSS</a></li>
	<li><a href="#">Forums</a></li>
	<li><a href="" rel="ddsubmenu3">Web Tools</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", "topbar|sidebar")
	</script>
	
	<ul id="ddsubmenu1" class="ddsubmenustyle">
	<li><a href="#">Item 1a</a></li>
	<li><a href="#">Item 2a</a></li>
	<li><a href="#">Item Folder 3a</a>
	  <ul>
	  <li><a href="#">Sub Item 3.1a</a></li>
	  <li><a href="#">Sub Item 3.2a</a></li>
	  <li><a href="#">Sub Item 3.3a</a></li>
	  <li><a href="#">Sub Item 3.4a</a></li>
	  </ul>
	</li>
	<li><a href="#">Item 4a</a></li>
	<li><a href="#">Item Folder 5a</a>
	  <ul>
	  <li><a href="#">Sub Item 5.1a</a></li>
	  <li><a href="#">Item Folder 5.2a</a>
	    <ul>
	    <li><a href="#">Sub Item 5.2.1a</a></li>
	    <li><a href="#">Sub Item 5.2.2a</a></li>
	    <li><a href="#">Sub Item 5.2.3a</a></li>
	    <li><a href="#">Sub Item 5.2.4a</a></li>
	    </ul>
	  </li>
		</ul>
	</li>
	<li><a href="#">Item 6a</a></li>
	</ul>
	
	
	<!--Top Drop Down Menu 2 HTML-->
	
	<ul id="ddsubmenu2" class="ddsubmenustyle">
	<li><a href="#">Item 1b</a></li>
	<li><a href="#">Item 2b</a></li>
	<li><a href="#">Item Folder 3b</a>
	  <ul>
	  <li><a href="#">Sub Item 3.1b</a></li>
	  <li><a href="#">Sub Item 3.2b</a></li>
	  <li><a href="#">Sub Item 3.3b</a></li>
	  <li><a href="#">Sub Item 3.4b</a></li>
	  </ul>
	</li>
	<li><a href="#">Item 4b</a></li>
	<li><a href="#">Item Folder 5b</a>
	  <ul>
	  <li><a href="#">Sub Item 5.1b</a></li>
	  <li><a href="#">Item Folder 5.2b</a>
	    <ul>
	    <li><a href="#">Sub Item 5.2.1b</a></li>
	    <li><a href="#">Sub Item 5.2.2b</a></li>
	    <li><a href="#">Sub Item 5.2.3b</a></li>
	    </ul>
	  </li>
		</ul>
	</li>
	<li><a href="#">Item 6b</a></li>
	</ul>
	
	<!--Top Drop Down Menu 3 HTML-->
	
	<ul id="ddsubmenu3" class="ddsubmenustyle">
	<li><a href="#">Image Optimizer</a></li>
	<li><a href="#">FavIcon Generator</a></li>
	<li><a href="#">Email Riddler</a></li>
	<li><a href="#">htaccess Password</a></li>
	<li><a href="#">htaccess Banning</a></li>
	</ul>

DEMO

您必須先 登入 註冊 才能下載附件!
對於本站文章有任何問題或建議歡迎到 : 討論區寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 最後更新時間:2020-09-27