- このトピックには3件の返信、2人の参加者があり、最後に
により10年、 6ヶ月前に更新されました。
-
投稿
-
-
いつもお世話になっております。
モバイル表示のときもPC表示と同じようなナビゲーションメニュバーをつけたいと考えています。
TOPページで記事の一覧の上に横3列×縦n列で表示させたいのですが、画面サイズ（スマホ、タブレット）が違っても、それにあわせて各メニューのサイズが広がって調整される、又は画面が広い場合は一列で表示させるようにするにはどうすればよいでしょうか？
-
グローバルメニューをレスポンシブにするのは、かなりカスタマイズでも難しい部類になると思います。
#navi自体を画面幅に追従させてレスポンシブになるかというとそうではなく、その中身もレスポンシブで表示できるようにしないといけないからです。
簡単に言うと、
[ul] [li][/li] [li][/li] [li][/li] [/ul]こういう構造なら比較的簡単にレスポンシブ化できるのですが、Simplicityはじめ通常のグローバルメニューはこれが更にネストされて、
[ul] [li][/li] [li] [ul] [li][/li] [li][/li] [li][/li] [/ul] [/li] [li][/li] [/ul]こんなふうになっています。つまりマウスオーバーで何かしら子メニューが表示される部分です。これをどのようにして画面サイズが異なる状況でレスポンシブ化するかが一番難しい所です。故にカスタマイズがかなり難しいポイントになります。
そこで以前こんなサンプルを作りました。
サンプル: menu, vertical slide 主にWordpress theme Simplicity用 | codepen
比較的簡単に実装できるようにしましたが、こういう感じのを元に色々とカスタマイズしてみて下さい。
-
グローバルナビについては、現在カスタマイザーで設定できるもの以上のものはちょっと難しいと思います。
どうしても難しい部類のカスタマイズになるため、サポート対象外のものにもあるように、自前で行っていただくか、クラウドソーシング等に依頼していただけると助かります -
hidekichiさま、わいひらさま
コメントありがとうございました。
私にはハードルが高そうですので、別の方法を考えてみます。
ありがとうございました。
だいどら
-
- トピック「モバイル表示でもナビゲーションバーを設置したい」には新しい返信をつけることはできません。