こんにちは朱夏です。
今回は、レスポンシブ対応では必須と言っていい機能、ナビゲーションだとかメニューと呼ばれているものを実装する方法を書いていこうと思います。
スマホのメニューはボタンを押すと展開されたりするので
実装するのが大変そうだな。
確かに大変ですが、サイト作成では避けて通れない部分なので、繰り返し挑戦して慣れていきましょう。
そして自分で型を作ってしまえば、毎回修正する場所は僅かです。
今回は、3つほど実装方法を紹介していきたいと思います。
それではやっていきましょう。
ドロップダウン型
ドロワー型
ボトム常駐型
あとがき
ドロップダウン型
先ずはドロップダウン型です。
これは、メニューボタンを押すと下ににゅっっとナビゲーションが展開されるものになります。
実装には、今回Bootstrapを使用します。
See the Pen
JjdyMOx by 朱夏 (@syunatsu1)
on CodePen.
こちらはHTMLのみで書かれています。
このナビゲーションバーの凄いところは、表示サイズによってスマホ対応もPC対応も自動で切り替わるところです。
ドロワー型
次はドロワー型です。
ドロワー型とは、ボタンを押すと横からメニュー一覧がニュッと出てくるやつです。
Android端末のメニューとして使われていたもので、同じ様な動作をするメニューの事をドロワーナビゲーション、ドロワーメニューなどと呼ぶみたいです。
このナビゲーションは、こちらのサイトを参考に作りました。
アレンジ内容は以下。
結果がこちらです。
See the Pen
abOyqxZ by 朱夏 (@syunatsu1)
on CodePen.
一番よく見かけるメニューの表示方法ですね。
仕組みは割と簡単で、以下の事をやっています。
- メニューを別シートで用意
- 画面外にメニューシートを隠す
- チェックボックスONでメニューを出す
- チェックボックスOFFでメニューを引っ込める
仕組みを理解するとなんてことないですが、最初はなんてハイレベルな事をやっているんだって思っていました。
CSSはそのうち分解して理解したいですね。
ボトム常駐型
こちらは、画面がスクロールしても下端に常駐するナビゲーションになります。
このタイプも割とよく見かけますね。
JavaScriptで実装されたものなどは、メニューではなくサイト閲覧を妨害する様な悪質な広告になっていたりするものもあります。
今回はギミックはほぼ使わずに、最初から最後まで常駐するボトム型ナビゲーションになります。
こちらもBootstrapを使っています。
See the Pen
xxGLWdr by 朱夏 (@syunatsu1)
on CodePen.
