0

wp_nav_menu を使用すると、Wordpress は維持しやすい優れたナビゲーションを作成します。現在、ナビゲーションにはサブメニューとサブサブメニューがあります。リンク 2 にカーソルを合わせると、5 つのサブメニューとその下のサブサブメニューを含む大きなサブメニューが開きます (このようにして、メニューの下にあるものを確認できます)。

JSFiddle オリジナルメニュー付き例 http://jsfiddle.net/tSLqV/1/

通常、.sub-menu は一部の要素にぶら下がる必要があるため、位置:絶対になります。しかし、何らかの理由で jsfiddle は .sub.menu をこのように正しく表示しません。したがって、この例では position:relative になりました。

=====

一部で動作するようになった JSFiddle の例 http://jsfiddle.net/HYBA7/5/

=====

どうしたの？サブサブメニューを含むサブメニューを表示することはできますが、流動的にしたいです。サブサブメニューが収まらない場合は、float:left; を使用して他のサブサブメニューに分類されます。サブメニューの高さが調整されます。

通常、私はこれを行います: max-width: 940px; 幅: 100%;

問題は、この ul がネストされていることです。100% を使用すると、li 親のためにすべての要素が 25% で表示されます。2番目のJSFiddleで動作する理由がわかりません...

次に、ul の幅を 400% にすることを考えました (4 x 25% で 100% になります)。しかし、これもうまくいきません。

=====

この ul li ul li ul li 混乱で 2 日間過ごした後、私は別のアプローチを探していました。これらのulliをすべて取り除くことができたらどうしますか？代わりに div を使用します (これが良い方法かどうかはわかりません)。そして、divは親の幅に問題はありませんか? Wordpress Codex を見ると、最初の ul を削除していくつかのクラスを変更できることがわかりましたが、それだけです。

メニュー項目に条件付きクラスを追加することによるパート 4.7 についてはわかりません。これにはまだ ul li があり、幅は親の ul li の内容に依存するためです。

ウォーカーについて読んだことがありますが、 ul.sub-menu を div 要素で変換することができませんでした。

=====

サブサブメニューを含む 5 つのサブメニューだけで追加のメニューをロードし、jQuery でスライドさせることができることはわかっていますが、JavaScript の助けを借りずにそれを使用し、css のみにするのが好きです。

誰でもこの問題で私を助けることができますか?

4

1 に答える 1

0

よし、サブメニューを流動的にすることができた。

各サブメニューにクラス (レベル 0、レベル 1) を追加するウォーカーを見つけました。

 class UL_Class_Walker extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"level-".$depth."\">\n";
  }      
}

その後、400% のアイデアに再び取り組みました。必要だった唯一のことは、左のプロパティにも % の値が必要であることです。だから私はこれを-100％にしました（4つの親メニュー項目があり、完全なメニューの上に配置する必要があるため）

li#menu-item-23 ul.level-0 {
position: absolute;
display: none;
/*width: 940px;*/
max-width: 960px;
width: 400%;
left: -100%;
background: #fff;
z-index: 100;

}

後で IE でテストしますが、Firefox と Safari ではすべてが適切に表示されます。

于 2012-03-19T12:57:20.410 に答える