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

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