ドロワーメニュー実装しました!

2019/10/09

このサイトのヘッダー(上の部分)を、常に画面上に表示させて、”BLOGS”を押すとすっとメニューが出るようにしました!

やり方等解説していこうと思います!(せっかくコードボックス作ったしね…)

ヘッダーを画面上部に固定する方法

まずはこれから!!

といっても、私の環境では簡単でした。

こんな感じでCSSに記述します

1
2
3
4
header{
position: fixed;
margin:0 auto 0 auto;
}

はい、これだけです!

この”fixed”というのは、absoluteのような絶対配置ですが、画面上に固定される感じです!

ここまではいいのよ…ここまでは…

次!ドロワーにする!

スマートフォン用ドロワーメニューの作り方

私は、スマホとPCで挙動を変えたかった(:hoverの関係)ので、スマホ用のヘッダーとパソコン用のヘッダーを作りました!

ちょっと複雑なので

HTMLにドロワーで表示させたいコンテンツを書く

CSSでそれを隠す

タップしたときに出てくるようにする

という流れで書いていきます!

まず、HTMLにドロワーで表示させたいコンテンツを書いていきます。

私の場合はheaderの下に新しいsectionを追加しました。

(いろいろ略していきます)

1
2
3
4
5
6
7
8
9
10
11
<header>
<!-- 略 -->
</header>
<div class="hidden_sm">
<section class="header_ex">

<!-- ここにドロワーで表示させたいものを書く -->

</section>
</div>

こんな感じで、headerとは別に、新しいセクションを作って運用しようと考えました(特に理由はなかったりします。)

しかし、このままでは、コンテンツが丸見えです。

これをCSSで隠してしまいましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(メディアクエリ、スマホ用の中)

header{
position:fixed;
margin:0 auto 0 auto;
z-index:2;
}

.headder_ex{
position:fixed;
opacity:0;
margin: -100px auto auto auto;
z-index: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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<header>
<nav class="nav_pc">
<!-- PCのヘッダー -->
</nav>
<nav class="nav_sm">
<!-- スマホのヘッダー -->
<ul>
<li>

<!--チェックボックスとリンクさせたい文字を挟む-->
<label for="label1">BLOGS</label>

</li>
</ul>
</nav>
</header>
<div class="hidden_sm">

<!-- チェックボックスを設置 -->

<section class="header_ex">

<!-- ここにドロワーで表示させたいものを書く -->

</section>
</div>

はい、ここででしたのは

1
<lavel for"〇〇"></label>

を使って、チェックボックスと文字をリンク

1
<input type="checkbox" id="〇〇" />

を使ってチェックボックスを配置

以上です!

しかし、このままではチェックボックスは表示されたままですし、チェックを入れても何も起こりません。

CSSに記述を追加しましょう

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
(メディアクエリ、スマホ用の中)

header{
position:fixed;
margin:0 auto 0 auto;
z-index:2;
}

.headder_ex{
position:fixed;
opacity:0;
margin: -100px auto auto auto;
z-index:1;
/* 滑らかに変化させたいので、追加 */
transition-duration: 1s;
}

.hidden_blog input {
/* チェックボックスを非表示 */
display: none;
}

.nav_pc{
/* pc用のヘッダーを非表示 */
display:none;
}

#label1:checked ~ .header-exp {
/* チェックボックスにチェックが入った時の表示 */
opacity: 1;
margin: 32px auto auto auto;
}

以上です!ここでしたことは、

transition-durationで、滑らかに変化させる

inputをdisplay:none;でチェックボックスを非表示にする

#label1:checked ~ を使って、チェックボックスにチェックが入った時の表示を作る

でした!

はい!これだけでこのサイトのようにBLOGSをクリックするとすーっと出てきてくれます!

キモは、見えないチェックボックスを設置することですね。

パソコン用ドロワーメニューの作り方

パソコン用の表示で、headerにマウスカーソルが乗った時に、ドロワーが展開するように設定していきます!

といっても、簡単です。スマホとほぼ同じ!

ただ、違うのがheader内にドロワーのコンテンツを入れることです。

早速HTMLを書いていきましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<header>
<nav class="nav_pc">
<!-- PCのヘッダー -->
<ul>
<li>
<a href="/blogs/">BLOGS</a>
</li>
</ul>
</nav>
<div class="hidden_pc">

<!-- ここにドロワーで表示させたいものを書く -->

</div>

<nav class="nav_sm">
<!-- スマホのヘッダー -->
</nav>
</header>

ここでは

headerの中に表示させたいコンテンツを追加

しました。

こうすることで、headder:hoverが有効に使えるわけです。

あ、.hidden_pcというクラスをつかしたので、スマホ用メディアクエリ内に

1
2
3
4
5
6
(スマホ用メディアクエリの中)

.hidden_pc{
display:none;
}

を追加しておきましょう!

PCのほうで、普段は隠して、headerにカーソルが乗ったら出るようにします。

CSSに追加を加えます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(PC用メディアクエリの中)
.hidden_pc{
opacity:0;
margin:-200px auto 0 auto;
transition-duration: 1s;
}

/* マウスカーソルが乗った時の表示 */

header:hover .hiddenpc{
opacity:1;
margin:0 auto 0 auto;
}

.nav_sm , .hidden_sm{
/* スマホ用なので非表示 */
display:none;
}

はい!これだけです!

やったことはほぼスマホと一緒です!

違うところは

header:hobverでheaderにマウスカーソルが乗った時の表示を作る

ところだけですね!

これでスマホ用、PC用のドロワーメニュが完成しました!

もっと賢いやり方もあると思いますが、これでも動きます!

今回はこんな感じで!

それでは、ありがとうございましたm(__)m