有沒有人開發(fā)過一種方法來自動生成Weebly網(wǎng)站的左側(cè)菜單,可能是通過JavaScript或jQuery？我并不關(guān)心移動下拉菜單,而是更喜歡側(cè)邊菜單.在Weebly論壇網(wǎng)站上,有一個關(guān)于如何手動創(chuàng)建每個人的說明,但是每次添加頁面時都需要更新它.
解決方法:
我使用jQuery和CSS為此提出了自己的解決方案.
這是一般過程：
>獲取當(dāng)前頁面的根鏈接.如果你在主鏈接上,那就是它,否則,將樹爬到父節(jié)點.
>確定主父鏈接是否有任何子鏈接.如果沒有,請對左側(cè)菜單執(zhí)行任何操作.
>如果有子鏈接,請從頁面上已有的導(dǎo)航中獲取.
>創(chuàng)建一個結(jié)構(gòu),將頁面內(nèi)容向右移動,為左側(cè)菜單提供空間.
>將子鏈接復(fù)制到左側(cè)菜單區(qū)域.
JavaScript
<script type="text/javascript"> // You need this since Weebly uses another JavaScript library jQuery.noConflict(); function AddMenu() { // Find active link var activeLink = jQuery("#active"); if (activeLink.length == 0) { activeLink = jQuery(".wsite-nav-current"); } var linkParent = activeLink; //find root page while (linkParent.parent().parent().hasClass("wsite-menu-wrap")) { linkParent = linkParent.parent().parent().parent(); } // add menus when there are sub items to the root page -- but don't when there are no children (main page) if (linkParent .find("div").length > 0) { var contentDiv = jQuery("#wsite-content"); //I add a table structure, which I know isn't the best, but it works well here. contentDiv.html("<table class='leftmenupage'><tr><td class='leftmenu'>" linkParent.html() "</td><td class='rightcontent'>" contentDiv.html() "</td></tr></table>"); jQuery(".leftmenu div").show(); } // Mark main nav link with id="active" var linkHref = linkParent.find("a").attr("href"); var navLinks = jQuery("#navigation a"); for (var i = 0; i < navLinks.length; i ) { if (navLinks.eq(i).attr("href") == linkHref) { navLinks.eq(i).parent().attr("id", "active"); } } } AddMenu(); </script>CSS
ul.wsite-menu li { padding-bottom: 5px; } .leftmenupage { margin-left: -15px; width:850px; } td.leftmenu { width: 200px; white-space: nowrap; padding: 7px 7px; vertical-align: top; border-radius: 15px; background: #ddd; color: #333; padding: 12px 12px; min-width: 200px; min-height: 250px;} td.leftmenu li { padding-bottom: 7px; }td.leftmenu a { color: #333; font-size: 1.33em; padding: 5px 0px; display: block;}td.leftmenu a:hover {text-decoration: underline; }td.leftmenu li a { font-size: 1em; }td.leftmenu li{ color: #333; font-size: 1em; padding: 2px 0px;}td.leftmenu li li { color: #333; font-size: 1em; padding: 2px 0 2px 15px;} td.rightcontent { width: 75%; padding-left:25px; width: 650px;}有關(guān)如何實現(xiàn)此功能的更詳細說明,請訪問see my blog post：
來源：https://www.icode9.com/content-1-298951.html