コピペで簡単 CSS でスワイプメニューの実装方法

コピペで簡単 CSS でスワイプメニューの実装方法を紹介します。
例えば、レスポンシブ対応のサイトで、スマートフォン表示の時にグローバルナビをスワイプメニューにしたい時に便利な方法です。

スワイプメニューの実装方法

スワイプメニューの実装方法を紹介します。
ベースの HTML は次の通りです。

<nav class="gnav">
<ul>
<li><a href="#">あああああ</a></li>
<li><a href="#">いいいいい</a></li>
<li><a href="#">ううううう</a></li>
<li><a href="#">えええええ</a></li>
<li><a href="#">おおおおお</a></li>
</ul>
</nav>

CSS はこちら。

.gnav {
overflow-x: auto;
overflow-y: hidden;
}
.gnav ul {
display: table;
}
.gnav ul li {
display: table-cell;
white-space: nowrap;
}

SASS はこちら。

.gnav {
overflow-x: auto;
overflow-y: hidden;
ul {
display: table;
li {
display: table-cell;
white-space: nowrap;
}
}
}

CSSの指定は最小限のものです。
PCやスマートフォンでの見た目の振り分けや、見た目の装飾は別途指定を追加してください。

解説

まずは親要素に overflow-x: auto; を指定。子要素が横に長くなった時にスクロールできるようにします。
逆に、縦スクロールは overflow-y: hidden; で、はみ出た部分を表示されないようにします。

続けて子要素に display: table; を指定。table を指定することで、内容に応じた横幅の強弱に対応できるようにします。
子要素が table の場合は、孫要素に display: table-cell; を指定。
中身がテキスト要素なら white-space: nowrap; を指定して、文字が勝手に改行されないようにします。

もし、子・孫要素のサイズが決まっている場合は、子要素の指定を table ではなく block に変更、子・孫要素に width で横幅を指定しましょう。

以上。

まとめ

コピペで簡単 CSS でスワイプメニューの実装方法を紹介しました。

スポンサーリンク

合わせて読みたい関連記事