0

私は現在、Wordpress のカテゴリに基づいて構築された、サブ メニューを含むメニューをセットアップしています。基本的に、最上位のカテゴリをすべて取得し、それぞれにサブメニューを作成して、その親カテゴリのすべての投稿を表示します。

したがって、構造は次のようになります。

<ul class="menuCat">
   <li> <a href="#" title="lifestyle">lifestyle</a>
      <ul class="show-hide">
         <li><a href="http://localhost/wordpress/article-7/">Article #7</a></li>
         <li><a href="http://localhost/wordpress/article-5/">Article #5</a></li>
         <li><a href="http://localhost/wordpress/hello-world/">Article #3</a></li>
      </ul>
   </li>
   <li> <a href="#" title="musique">musique</a>
      <ul class="show-hide">
         <li><a href="http://localhost/wordpress/article-8/">Article #8</a></li>
         <li><a href="http://localhost/wordpress/article-7/">Article #7</a></li>
         <li><a href="http://localhost/wordpress/article-2/">Article #2</a></li>
         <li><a href="http://localhost/wordpress/article-1/">Article #1</a></li>
         <li><a href="http://localhost/wordpress/hello-world/">Article #3</a></li>
      </ul>
   </li>
</ul>
<div id="content">...

サブメニューは に設定されていdisplay:noneます。カテゴリがクリックされると、サブメニュー ul が (jQuery トグルを使用して) メイン メニューの下に表示されます。ローカルで実行しているため、実際の例を示すことはできませんが、動作方法は次の「カテゴリ」リンクをクリックした場合と同じです: http://wpshower.com/demo/?theme=imbalance .

私の問題は、この構造と視覚的に達成したいこと (前の URL を参照) では、サブメニュー ブロックを絶対位置に配置する他のオプションが表示されないことです。しかし、そうすると、メニューがトリガーされたときに残りのコンテンツを押し下げる必要があります。私がこれまでに試したことは、現在表示されているサブメニューの高さに基づいてマージントップを設定することです。残念ながら、高さもouterHeightも役に立ちませんでした...

何か案は ？

ありがとう！

4

2 に答える 2

0

いくつかのニュースですが、サブメニューは「start_el」ワードプレス関数内の親リストアイテムと同時に作成されるため、HTML構造を変更できないと思います。その関数は、メニューのカテゴリリンクごとに呼び出されます。

于 2013-02-20T10:29:33.263 に答える
0

絶対的な位置付けが必要な理由について詳しく説明していただけますか？すべてのサブメニューをトップレベルメニューの下に静的に配置し、jQueryを使用して一度に1つだけが表示されるようにすることで、目的を達成できるように見えます。

それらを静的に配置することにより、サブメニューは展開時にその下のコンテンツを押し下げ、1つを除くすべてのサブメニューが常に表示するように設定されている限り、なし。あなたはそれがそこにあることさえ知らないでしょう。

ただし、これを機能させるには、HTMLの構造を変更する必要があります。サブメニュー項目は、トップレベルメニューリスト内ではなく、トップレベルメニューリストの下のdivにある必要があります。 

<ul class="menuCat">
   <li> <a href="#" title="lifestyle">lifestyle</a>
   </li>
   <li> <a href="#" title="musique">musique</a>
   </li>
</ul>
<div id="submenu-container">
      <ul class="show-hide lifestyle">
         <li><a href="http://localhost/wordpress/article-7/">Article #7</a></li>
         <li><a href="http://localhost/wordpress/article-5/">Article #5</a></li>
         <li><a href="http://localhost/wordpress/hello-world/">Article #3</a></li>
      </ul>
      <ul class="show-hide musique">
         <li><a href="http://localhost/wordpress/article-8/">Article #8</a></li>
         <li><a href="http://localhost/wordpress/article-7/">Article #7</a></li>
         <li><a href="http://localhost/wordpress/article-2/">Article #2</a></li>
         <li><a href="http://localhost/wordpress/article-1/">Article #1</a></li>
         <li><a href="http://localhost/wordpress/hello-world/">Article #3</a></li>
      </ul>
</div>
<div id="content"></div>

$(function () {
    $('.menuCat > li').click(function (e) {
        var target = $('.show-hide.' + e.target.title);
        $('.show-hide').not(target).hide();
        target.toggle();
    });
});



ul.menuCat li {
    display:inline-block;
    vertical-align: top;
}
ul.show-hide {
    display: none;
    background-color:lightgrey;
}
#content {
    height: 200px;
    width: 100%;
    background-color: red;
}

例については、次のデモを参照してください：http: //jsfiddle.net/ijoukov/PCgxR/

于 2013-02-19T18:57:56.533 に答える