不依賴Jquery的響應式多階層導航

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