web-dev-qa-db-ja.com

Wordpressの分割メニュー

私は最初のWordPressテーマをコーディングし、この問題を解決しようとしています。

デスクトップ版のWebサイトでは、メニューを2つのセクションに分割したいと思います。 1つはロゴの左側に表示され、もう1つは私のロゴの右側に表示されます（ロゴは中央に配置されます）。これを行う方法を私が知っている唯一の方法は、WPに2つの別々のMENUオブジェクトを作成し、それに応じてそれぞれCSSの位置を指定することです。

しかし、これは、私がメニューをモバイル対応のドロップダウンメニューに変換したいときに問題を引き起こします。これは、上記のアプローチでは、2つの別々のメニュー項目のリスト（LeftとRight）になり、私はそれらをモバイル向けのドロップダウンメニューのための一つのリストにマージするでしょうか。

たとえば、メニュー項目＃2と項目＃3の間に余白を追加するためのカスタムCSSを作成することができます。しかし、私がテーマを書いているので、メニュー項目がいくつ存在するかを前もって知る必要があるので、このアプローチはうまくいきません。メニュー項目の数に関係なく機能し、WP Menu UIを使用してメニュー項目を並べ替えることができるようなものにする必要があります。

これはこれに取り組むための間違った方法ですか？あなたがこれにもっと近づく方法を提案することができれば私は非常に感謝するでしょう。

menusmobile
2
hanazair

ANSWERのフォーマットには投稿されていませんので、投票できませんでした。ここで、

「おそらく、外観>メニューでモバイル用の3番目のメニューを設定し、他の2つを非表示にしながらモバイルスタイルシートにモバイルメニューを表示する。モバイルユーザー向けにエクスペリエンスを最適化したい場合は、そうしてください

私はそれが最も簡単な解決策であることを見つけました、そしてそれは素晴らしい働きをします！ありがとうございました ：）

結果はwww.speakforwolves.orgで見ることができました

0
hanazair

あなたはCSSを通して2番目のメニューの最初の要素を押すことによってこれをすることができて、それから位置を決めます。 （未検証）

#element li:nth-child(4) {
 margin-left:300px;
}
#logo {
 position:absolute;
 left:500px
 top:50px;
}

ピクセルを希望の長さに変更します

これはjQuery appendでも可能です。

$( "#element li:nth-child(3)" ).append( '</ul><ul class="right">' );

次に、2番目のメニューを新しいクラスでターゲットにします。 。右

0
Gareth Gillman