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

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

  1. スワイプメニューの実装方法
  2. 横幅を固定したスワイプメニューの実装方法

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

スワイプメニューの実装方法を紹介します。
ベースの 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 で横幅を指定しましょう。

以上。

横幅を固定したスワイプメニューの実装方法

例えば、お知らせ記事エリアをスワイプできるような、
個々の横幅を固定したスワイプメニューの実装方法を紹介します。
ベースの 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 {
width: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
.gnav ul {
width: 750px;
display: -webkit-flex;
display: flex;
overflow-x: scroll;
}
.gnav ul li {
width: 150px;
}

SASS はこちら。

.gnav {
width: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
ul {
width: 750px;
display: -webkit-flex;
display: flex;
overflow-x: scroll;
li {
width: 150px;
}
}
}

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

解説

まずは親要素に overflow: hidden; を指定。子要素が親要素よりも長くなった時にはみ出さないようにします。

子要素に display: flex; を指定して孫要素を横に並べます。
孫要素の合計値を width に指定。
overflow-x: scroll; を指定して、横にスクロールできるようにします。

最後に、孫要素に横幅を指定しておしまいです。

まとめ

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

この記事をシェアする

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