[CSS]軽量のスタイルシートで、スマホにもデスクトップにも快適で分かりやすいナビゲーション -Paradeiser
Post on:2015年9月16日
sponsorsr
スマホで表示すると三本線のアイコンになるハンバーガーメニューは、確かに小さい画面の問題を解決する方法の一つですが、ベストな選択ではありません。
ハンバーガーメニューの良い点を利用し、悪い点を改善した、スクリプト無しでレスポンシブ対応のナビゲーションを実装するスタイルシートを紹介します。
Paradeiserの特徴
- 実装は簡単で、超軽量
- Paradeiserは1.3KBのスタイルシート1つだけで、簡単に実装できます。
- CSS Only
- jQueryやスクリプトは使用しません。
- レスポンシブ対応
- スマホ、タブレット、デスクトップのそれぞれで快適に操作できます。
- オーバーフロー
- ナビゲーションはコンテンツにオーバーフローで表示されます。
- スクロール時の非表示にも対応
- 「Headroom.js」を使うことで、スクロール時に自動的に非表示・表示にできます。
Paradeiserのデモ
ハンバーガーメニューの悪い点は分かりにくいアイコンと全てのアイテムが隠されてしまうことです。
参考: The Hamburger Menu Doesn't Work
Paradeiserはこの2つの問題を解決し、スマホでもタブレットでもデスクトップでも快適に操作できるよう設計されたナビゲーションです。
まずは、デスクトップ時の状態で見てみましょう。
上部のバーに表示されるナビゲーションにはロゴを含む主要なリンクを3-5個が配置され、それ以外は右端のドロップダウンで表示されます。
デモページ: ドロップダウン
基本的なデザインはスマホ時でも同じで、ロゴを含む重要なリンクは常に表示された状態です。
デモページ: 幅480pxで表示
Paradeiserの使い方
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
[html]
...
[/html]
Step 2: HTML
nav要素の中に各アイテムを配置し、ドロップダウンはリスト要素で実装します。
[html]
[/html]
スクロール時にバーを非表示にする場合
「Headroom.js」を使うことで、下にスクロールした際にバーをアニメーションで上部に隠し、上にスクロールした際にバーを表示させることもできます。
[html]
[/html]
sponsors
