Weebly自动生成的侧面菜单，可能使用JavaScript或jQuery [英] Auto-Generated Side Menu for Weebly, perhaps with JavaScript or jQuery

问题描述

有没有人开发过为Weebly网站自动生成左侧菜单的方法，可能是通过JavaScript或jQuery？我并不关心移动下拉菜单，而是更喜欢侧边菜单。在Weebly论坛网站上，有一个关于如何手动创建每个人的说明，但是每次添加页面时都需要更新它。

Has anyone developed a way to automatically generate a left menu for a Weebly site, maybe through JavaScript or jQuery? I don't really care for the moving dropdown menus and would prefer to have side menus instead. On the Weebly forums site, there is a description about how to create each one manually, but then you would need to update it every time you added a page.

推荐答案

我已经提出了自己的解决方案，使用jQuery和CSS。

I have come up with my own solution for this, using jQuery and CSS.

这是一般过程：

• 获取当前页面的根链接。如果你在主链接上，那就是它，否则，将树爬到父母那里。

• Get the root link of the current page. If you're on a main link, then that's it, otherwise, climb the tree to the parent.

确定主要父母是否有任何子链接链接。如果没有，请对左侧菜单不执行任何操作。

Determine if there are any sublinks to the main parent link. If not, do nothing with a left menu.

如果有子链接，请从页面上已有的导航中获取这些链接。

If there are sublinks, get those from the navigation that is already on the page.

创建一个结构，将页面内容向右移动，并为左侧菜单提供空间。

Create a structure to move the page contents to the right and give room for the left menu.

将子链接复制到左侧菜单区域。

Copy the sublinks into the left menu area.

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;
}

有关如何实现此功能的详细说明，查看我的博文：

For more detailed instructions on how to implement this, see my blog post:

这篇关于Weebly自动生成的侧面菜单，可能使用JavaScript或jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！