お知らせ「WEXAL導入およびテーマ変更作業に伴う不具合について」

Luxeritasでスマホメニューを横スクロールできるようにする

Luxeritas
この記事は約2分で読めます。
スポンサーリンク

本稿ではLuxeritasでスマートフォンサイトのグローバルメニューを横スクロールできるようにする方法を紹介します。
Cocoonでは記事を結構見かけるのですがLuxeritasでは見つからなかったので記してみました。
訪問者が直観的にサイト構造を把握できることから回遊率が上がるかもしれません。

スポンサーリンク

方法

パソコン用メニューを流用しながらCSSのみで対応します。

CSS

style.cssに以下のコードを貼りつけてください。

@media (max-width: 991px){
#gnavi ul.mobile-nav,#gnavi div.mobile-nav,#gnavi .mobile-nav li {
display: none
}
 #gnavi ul {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
overflow-x: scroll;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}

解説

Luxeritasではモバイルとパソコンの閾値が991pxなので、それにあわせます。
本来表示されるはずのモバイルナビを消します。

@media (max-width: 991px){
#gnavi ul.mobile-nav,#gnavi div.mobile-nav,#gnavi .mobile-nav li {
display: none
}

次いで、新たなモバイル用の設定を加えます。
ここはLuxeritasのパソコン用メニューの設定そのまま。

display:-webkit-box;
display:-ms-flexbox;
display:flex;

パソコン用メニューの設定では、はみ出した部分を包み込む(折り返す)設定になっています。

-ms-flex-wrap: wrap;
flex-wrap: wrap;

これを包み込まずに、スクロールによって表示するように変更します。

overflow-x: scroll;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
スポンサーリンク

まとめ

質問者の写真

アップルのサイトみたく、ナビの端に「<」「>」を表示できたらわかりやすいんだけどな
navi.phpいじるのはめんどい

 
解答者の写真

開発者るな氏が実装してくれるの待ちましょう

 
author

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
Luxeritas
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました