ドロワーメニュー実装しました!
2019/10/09
このサイトのヘッダー(上の部分)を、常に画面上に表示させて、”BLOGS”を押すとすっとメニューが出るようにしました!
やり方等解説していこうと思います!(せっかくコードボックス作ったしね…)
ヘッダーを画面上部に固定する方法
まずはこれから!!
といっても、私の環境では簡単でした。
こんな感じでCSSに記述します
1 | header{ |
はい、これだけです!
この”fixed”というのは、absoluteのような絶対配置ですが、画面上に固定される感じです!
ここまではいいのよ…ここまでは…
次!ドロワーにする!
スマートフォン用ドロワーメニューの作り方
私は、スマホとPCで挙動を変えたかった(:hoverの関係)ので、スマホ用のヘッダーとパソコン用のヘッダーを作りました!
ちょっと複雑なので
HTMLにドロワーで表示させたいコンテンツを書く
↓
CSSでそれを隠す
↓
タップしたときに出てくるようにする
という流れで書いていきます!
まず、HTMLにドロワーで表示させたいコンテンツを書いていきます。
私の場合はheaderの下に新しいsectionを追加しました。
(いろいろ略していきます)
1 | <header> |
こんな感じで、headerとは別に、新しいセクションを作って運用しようと考えました(特に理由はなかったりします。)
しかし、このままでは、コンテンツが丸見えです。
これをCSSで隠してしまいましょう。
1 | (メディアクエリ、スマホ用の中) |
はい!ここは何をやったのかと言うと
headerから出てきてほしいので、positionをfixedに
opacity:0;で、透明度を0に
margin-topを-100pxにして、画面外、ヘッダーの場所に退避
headerのz-indexを2に、ドロワーのz-indexを1にして、headerが、ドロワーの前に来るように
しています。
z-indexというのは絵描きでいうレイヤーのようなもので、数字が大きいほうが手前に来るようになっています。
こうすれば、headerの後ろに透明なドロワーがあっても、透明な要素をクリックすることはなくなります。
はい、これで隠す(収納する)のは完了しました。
しかし!このままでは引き出すことが出来ません。
BLOGSを押すとでてくるようにしたい…
そこで使うのが透明なチェックボックスです!
チェックボックスを設置し、そこにチェックが入った時にmarginを増やして、ドロワーに出てきてもらえばいいのです!
早速HTMLを書いていきましょう。
1 | <header> |
はい、ここででしたのは
1 | <lavel for"〇〇"></label> |
を使って、チェックボックスと文字をリンク
1 | <input type="checkbox" id="〇〇" /> |
を使ってチェックボックスを配置
以上です!
しかし、このままではチェックボックスは表示されたままですし、チェックを入れても何も起こりません。
CSSに記述を追加しましょう
1 | (メディアクエリ、スマホ用の中) |
以上です!ここでしたことは、
transition-durationで、滑らかに変化させる
inputをdisplay:none;でチェックボックスを非表示にする
#label1:checked ~ を使って、チェックボックスにチェックが入った時の表示を作る
でした!
はい!これだけでこのサイトのようにBLOGSをクリックするとすーっと出てきてくれます!
キモは、見えないチェックボックスを設置することですね。
パソコン用ドロワーメニューの作り方
パソコン用の表示で、headerにマウスカーソルが乗った時に、ドロワーが展開するように設定していきます!
といっても、簡単です。スマホとほぼ同じ!
ただ、違うのがheader内にドロワーのコンテンツを入れることです。
早速HTMLを書いていきましょう。
1 | <header> |
ここでは
headerの中に表示させたいコンテンツを追加
しました。
こうすることで、headder:hoverが有効に使えるわけです。
あ、.hidden_pcというクラスをつかしたので、スマホ用メディアクエリ内に
1 | (スマホ用メディアクエリの中) |
を追加しておきましょう!
PCのほうで、普段は隠して、headerにカーソルが乗ったら出るようにします。
CSSに追加を加えます。
1 | (PC用メディアクエリの中) |
はい!これだけです!
やったことはほぼスマホと一緒です!
違うところは
header:hobverでheaderにマウスカーソルが乗った時の表示を作る
ところだけですね!
これでスマホ用、PC用のドロワーメニュが完成しました!
もっと賢いやり方もあると思いますが、これでも動きます!
今回はこんな感じで!
それでは、ありがとうございましたm(__)m