スマホサイトのナビゲーションに横スクロールを採用しては？
関連記事：「PCの時は画面内に横並びでモバイルの時は画面外からスワイプして横スクロール」を更新しております。（2022年10月6日）
こちらの方がより簡単に実装できます。
スマホのナビ、気づかれない？
スマートフォンでアクセスした際、ナビゲーションを最初非表示にして、ハンバーガーメニュー（←こんなの）をタップするとナビゲーションが表示されるサイトはたくさんありますし、私も使います。
しかしユーザビリティというか、やっぱりこのボタンをボタンとして理解してくれず、下層ページに移動できないユーザーが一部いたりしている場合が稀にあります。特にご年配の方もスマートフォンを普通に持っている今、誰にでもわかりやすいUIを考えることは非常に重要ではないでしょうか。なんて思うわけです。
横スクロールに注目した
まずはこちらのサイトをスマホでご覧ください。
https://www.apple.com/jp/iphone/
iPhoneが並んでいるナビゲーション、横スクロールしませんか？これだとユーザーにもボタンの存在をわかりやすく伝えることができるのと同時にレイアウト的にもスッキリしていいですよね。しかも横にスワイプすると慣性スクロールするのも気持ちいい！
というわけで作ってみます。
制作のポイント
- 1:画面外からスワイプして表示されること
- 2:慣性スクロールでぬるっと動くこと
- 3:スクロールバーを出さない
この辺りでしょうか
<nav> <div> <ul> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> <li><a href="#">Third</a></li> <li><a href="#">Fourth</a></li> <li><a href="#">Fifth</a></li> <li><a href="#">Sixth</a></li> </ul> </div> </nav>
シンプルなhtmlです。これにCSSを加えます。
nav{ width:100%; overflow: hidden; } nav div{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } nav ul{ display: inline-table; max-width: 100%; } nav ul li{ display: table-cell; } ::-webkit-scrollbar{ display: none; }
ざっくり書くとこんな感じです。
CSSのポイントはulを包むdivを一個作って、
そこに-webkit-overflow-scrolling: touch;を
加えることで、慣性スクロールが実現されます。
また、ulにinline-tableを設定し、
liにはtable-cellで
横並びにさせることがポイントです。
inline-tableにしないと
画面外からやってきてくれません。
また、スクロールバーの表示に関しては
：：-webkit-scrollbarで
表示を調整することができます。
簡単なデモページ
サンプルを作りました。スマホでご覧ください。