CSS | スワイプで横スクロールするスライドメニューを実装する方法

2020-06-22CSS デザイン,CSS

CSSだけで実装するスワイプ（フリック）で横スクロールするスライドメニューの実装サンプルです。

スワイプで横スクロールするメニューの動作サンプル

スワイプで横スクロールするメニューを実装した動作サンプルです。

See the Pen MENU by yochans (@yochans) on CodePen.

動作サンプルのスライドメニューはモバイル端末向けです。

PCでドラッグによる横スクロールを実装するにはJavaScript等が必要になりますし、また、良くあるメニューであればPCでの横スクロールは実装せずにPC表示時は折り返すなどにした方がユーザービリティ的にも良いと考えています。
※スクロールバーを半透明にして、positionで被せてうんたら～ってことはできるかもしれません。

このページにPCからアクセスしている場合、F12でデロペッパーツールを開いてモバイルビュー表示で試すとスワイプ（フリック）でスライドすることが確認できると思います。

サンプルコード

<div class="scroll-nav">
	<ul>
		<li><a href="#">MENU</a></li>
		<li><a href="#">MENU</a></li>
		<li><a href="#">MENU</a></li>
		<li><a href="#">MENU</a></li>
		<li><a href="#">MENU</a></li>
		<li><a href="#">MENU</a></li>
		<li><a href="#">MENU</a></li>
		<li><a href="#">MENU</a></li>
		<li><a href="#">MENU</a></li>
		<li><a href="#">MENU</a></li>
	</ul>
</div>

.scroll-nav {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.scroll-nav::-webkit-scrollbar {
	display:none;
}

ul{
	display: flex;
	list-style-type: none;
	padding: 0;
	text-align: center;
}


li{
	display: flex;
	width:100px;
	padding: 8px;
	margin: 1px;
	background:#FF5252;
}

li a{
	width: 100%;
	color:#FFF;
	text-decoration:none;
}

※ulとliはサンプルの見栄え用ですのでいずれも本項目には特別必要ではないコードです。

スワイプ（フリック）での横スクロールを実装している部分は「-webkit-overflow-scrolling: touch;」になります。

また、スクロールバーが表示されるので、「::-webkit-scrollbar」を使って非表示にしています。

スクロールバーをデザインしたサンプル

スクロールバーをデザインした動作サンプルです。

See the Pen CSS Menu swipe to scroll horizontally 2 by yochans (@yochans) on CodePen.

サンプルコード（HTMLはul liの部分は共通なので割合しています）

.scroll-nav {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.scroll-nav::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

/* トラック部分 */
	.scroll-nav::-webkit-scrollbar-track{
}

/* バー部分 */
	.scroll-nav::-webkit-scrollbar-thumb {
	background: #2E7D32;
}

スクロールバーの幅は「::-webkit-scrollbar」で設定、横スクロールの場合は「width」ではなく「height」を指定することで反映されます。（サンプルでは一応widthも指定しています）

サンプルでは未指定ですが、スクロールバーのトラック部分は「::-webkit-scrollbar-track」で設定可能です。
backgroundでバーの色を指定可能で、他にもborder系の指定が反映されます。

スクロールバーのバー部分は「::-webkit-scrollbar-thumb 」で設定します。
backgroundでバーの色を指定可能で、他にもborder系の指定が反映されます。