コピペでできる!簡単スライダーナビゲーション!
ホームページのヘッダーでよく見る「スライダーメニュー」。
今回はこのスライダーメニューをHTMLとCSSだけで作ってみたいと思います。
コピペで簡単に作れるので、ぜひ使ってみてください。
スライダーメニューとは?
スライダーメニューは、スライドができるメニューの事です。ヘッダー下に配置しているサイトが多いと思います。
スライドが出来るのでメニューが多くなった場合でも、配置に困らないのが特徴です。
特にヘッダー部はサイトタイトルやサイトの説明を配置しますし、コンテンツ部の表示領域を確保する為、メニューの高さを抑える必要があります。
スライドメニューでは、横にスライドさせる事で高さを抑える事が出来るので、ヘッダー下の配置に適しています。また、スマホなどの幅の狭い場合にも対応しやすいです。
さらに、クリックしなくてもメニューの中身が見えるのも大きなメリットです。
ボタンによる開閉式のメニューでは、ユーザーがクリックしないと、メニューの中身を確認できません。クリックなしでサイトの構成を把握できるのは大きなメリットです。
とは言っても、メニューが2、3個表示できる幅は必要です。スマホなどでヘッダーをスッキリしたデザインにしたい場合や、一つのメニュー項目が長くなる場合は、ボタンで開閉できるナビゲーションドロワーなどが適しています。
メリット
- 高さを抑える事ができる。
- レスポンシブデザインにも適用しやすい。
- ユーザー操作なしにメニューの中身が見える。
- ユーザー操作なしにメニューの中身を確認できる。
デメリット
- メニューを2、3個表示できる幅が必要。
- 長いメニューには適さない。
ソースコード&プレビュー
ソースコードの解説
リストを作る
メニュー部はリストで作ります。メニューですのでリストの番号はいらないため、列挙リスト(ul要素)を使用します。
HTML
<nav class="global-nav">
<div class="horizon-flow">
<ul class="nav-list">
<li class="nav-item"><a href="#">メニュー1</a></li>
<li class="nav-item"><a href="#">メニュー2</a></li>
<li class="nav-item"><a href="#">メニュー3</a></li>
<li class="nav-item"><a href="#">メニュー4</a></li>
<li class="nav-item"><a href="#">メニュー5</a></li>
<li class="nav-item"><a href="#">メニュー6</a></li>
<li class="nav-item"><a href="#">メニュー7</a></li>
</ul>
</div>
</nav>
特別なことはしていない単なるリストです。1点だけ、ul要素を囲うようにdiv要素を配置しています。スクロールバーを隠すためにこのようにしています。
リストのマークを消す
リストアイテムの先頭についてる黒ぽちを消します。黒ぽちを消すためにCSSのlist-styleプロパティにnoneを指定します。
CSS
.nav-list {
list-style: none;
}
リストを横並びにする
リストはブロック要素なので縦に並んでいます。リストを横並びにするために、displayプロパティのtableとtable-cellを使います。
CSS
.nav-list {
display: table;
}
.nav-list .nav-item {
display: table-cell;
}
リストをスライドさせる
リストアイテムの数が多くなった場合に、スライドさせるため、CSSのoverflow-xプロパティにscrollを指定します。
CSS
.global-nav .horizon-flow {
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
}
ここまでで、スライダーメニューの基本的な動作が完成です。
スライダーバーを隠す
メニューにスライダーバーが表示されているとかっこ悪いので隠してしまいます。
スライダーバーを隠すため、スクロールする要素(.horizon-flow)の外側の要素(.global-nav)の高さをメニューアイテムの高さに合わせます。そして、overflow-yプロパティにhiddenを指定し、スクロールバーを隠します。
CSS
.global-nav {
height: 24px;
overflow-y: hidden;
}
まとめ
いかがでしたでしょうか。HTML/CSSで簡単にスライダーメニューが作成できました。実装もリストアイテムを横並びにしてスクロールさせるという、非常にシンプルで分かりやすいです。
今回はメニューとして使いましたが、関連記事一覧の表示などにも使えそうです。ぜひ、あなたのサイトにも使ってみてください。
最後まで読んでいただき、ありがとうございます。
また読んでくださいませ。
そんじゃーね。