Weebly用のサイド生成メニュー、おそらくJavaScriptまたはjQuery付き

Question

Weeblyサイト用の左メニューを自動的に生成する方法を誰かが開発したことがありますか？私は実際にドロップダウンメニューを気にせず、代わりにサイドメニューを持つことを好みます。 Weeblyフォーラムサイトには、手動で作成する方法についての説明がありますが、ページを追加するたびに更新する必要があります。

Answer 1

jQueryとCSSを使用して、私自身の解決策を考え出しました。ここで

は、一般的なプロセスです：

• は、現在のページのルートリンクを取得します。あなたがメインのリンク上にいるならば、そうでなければ、親にツリーを登る。

• メインの親リンクへのサブリンクがあるかどうかを確認します。そうでない場合は、左メニューで何もしないでください。

• サブリンクがある場合は、すでにページにあるナビゲーションからサブリンクを取得します。

• ページの内容を右側に移動し、左側のメニューのためのスペースを与える構造を作成します。

• 左側のメニュー領域にサブリンクをコピーします。

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

これを実装する方法の詳細な手順について

、see my blog post：