3、不依賴Jquery的響應式多階層導航
2020-09-25
128
相關文章
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
如果你對3、不依賴Jquery的響應式多階層導航有任何問題請到討論區發帖。