本稿では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いじるのはめんどい
開発者るな氏が実装してくれるの待ちましょう
コメント