web-dev-qa-db-ja.com

自己生成型メニューを作成し、メニューレイアウトにdivを追加する

私が達成しようとしていること：

1レベルのサブメニューを含むメニュー

PAGE 1<br>
--- Page 1 sub-page 1<br>
--- Page 1 sub-page 2<br>
PAGE 2<br>
--- Page 2 sub-page 1<br>
--- Page 2 sub-page 2<br>
--- Page 2 sub-page 3<br>
PAGE 3<br>
--- Page 3 sub-page 1<br>
--- Page 3 sub-page 2<br>

PAGE 1の場合、最上位ページの下のセクションにすべてのPAGE 1サブページを表示します。ページ1のときにページ2の上に移動すると、最上位ページの下のセクションにすべてのページ2のサブページが表示されます。

これを私のウェブサイト上で正しく表示するために、私はul.sub-menuの中にdivを追加する必要があります。

<ul>
  <li><a>...</a>
    <ul class="sub-menu">
      <div class="container">
        <li><a>...</a></li>
        <li><a>...</a></li>
        <li><a>...</a></li>
      </div>
    </ul>
  </li>
</ul>

これを行うために、Walkerクラスを作成しようとしましたが、それを私のwp_nav_menu（）関数に追加すると、メニューがすべて削除されます。これは私が使ったウォーカークラスです：

class custom_wp_walker extends Walker_Nav_Menu{
  function start_lvl(&$output, $depth) {
    $output .= '<ul class="children"> 
                  <div class="container">';
  }
  function end_lvl(&$output, $depth) {
    $output .= '
        </div>
        </ul>';
  }
}

さて、私のメニューが自己生成されるようにするために、私はwordpressバックエンドでメニューを作成していません（Appearance - > Menus）。また、walkerクラスを削除すると、子項目を含むすべてのメニュー項目がフロントエンドに追加されます。私はそれを正しくスタイルすることができません。

ただし、バックエンドでメニューを作成し、自分が持っているアイテムを手動で追加すると、Walkerクラスが機能し、余分なdivが追加されます。問題は、子アイテムが自動的に追加されず、それらが必要になることです。 Walkerクラスは、動作するためにバックエンドに手動でページを追加することを要求しますか？

私がサイトを構築している人たちは少し技術的に挑戦しているので、彼らは自分たちでそれをすることができないのでそれはそれ自身を移入する必要があります。

それで、私の質問は、どのように私はその余分なdivをul.sub-menuの中に追加することができて、そしてまだ完全に自己移入メニューを持っていることができるか？ Walkerクラス以外に別の方法はありますか？私は解決策を考え出すためにグーグルを試してみましたが、他に何も見つけませんでした。

theme-developmentmenuswalkersub-menu
2
laura.f

あなたのHTML構造は次のようになります。

<ul class="parent-class">
  <li>Page 1</li>
  <li>
    <ul class="child-class">
      <li> Sub menu item 1</li>
      <li> Sub menu item 2</li>
    </ul>
  </li>
</ul>

Wordpressは自動的にアクティブページに "active"クラスを追加し、それからあなたはcssですべてをスタイルすることができるはずです。何かのようなもの

.parent-class li ul {
   Display:none;
}

.Active li ul {
   display:block;
}

.parent-class:hover > .parent-class li ul {
   display:block

}
0
mrmadhat