本稿では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いじるのはめんどい
開発者るな氏が実装してくれるの待ちましょう
私はConoHa以外を勧めない。
2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。
レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。
※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。