CSS でスワイプメニューを実装する方法
最終更新日 - 公開日 2017.06.10
by
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 で横幅を指定しましょう。
以上。
横幅を固定したスワイプメニューの実装方法
例えば、お知らせ記事エリアをスワイプできるような、
個々の横幅を固定したスワイプメニューの実装方法を紹介します。
ベースの 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 でスワイプメニューを実装する方法を紹介しました。
