見出し画像

【Web制作の毎日コーディング日記（7日目）】ハンバーガーメニューを作ろう。

物理・プログラミング・Python、Web制作・自己啓発

こんにちは（@t_kun_kamakiri）。

本日は、毎日コーディング7日目となります。
日々の記録は☟マガジンにまとめています(^^)/

今日は、
ハンバーガーメニュの基本的な作り方について練習しようと思います。

画像9

👆こういう動きをするやつですね。
携帯とか画面幅が小さいときにつける動きです。

これは初心者にとっては結構難易度が高そうですが、基本的なことを以下にまとめておきました。

が、自分自身が初心者なので上手いコーディングではない可能性がありますのでお気づきの点があったらお知らせくださいm(__)m

ハンバーガーメニューボタンを押したときの動きから

まずは、ハンバーガーメニューボタンを押したときの動きから作っていきます。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Lesson4-12ハンバーガーメニューを作ろう</title>
   <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <header>
       <nav class="header-nav">
           <div class="gnav-black">
               <ul class="gnav-list">
                   <li class="gnav-item"><a href="">TOP <br>トップ</a></li>
                   <li class="gnav-item"><a href="">COMPANY <br>会社概要</a></li>
                   <li class="gnav-item"><a href="">SKILL <br>スキル</a></li>
                   <li class="gnav-item"><a href="">ABOUT <br>当ブログついて</a></li>
               </ul>
           </div>
       </nav>
   </header>
</body>
</html>

css/style.css

*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

li{
   list-style: none;
}

a{
   text-decoration: none;
}

.header-nav{
   border: 2px solid red;
}

.gnav-black{
   border: 2px solid blue;
}

.gnav-list{
   border: 2px solid green;
}

.gnav-item{
   border: 2px solid orange;
}
.gnav-item a{
   border: 2px solid brown;
}

☟このようにはじめはしておきます。

画像1

僕にとっては毎度おなじみ、枠を付けながらコーディングを進めます！！
枠を付けておくとめちゃくちゃわかりやすいんですよね！！

左端に寄せておきたいので、divタグで囲んでいた「.gnav-black」は「position: fixed;」とします。
ついでにその親要素である「.header-nav」に背景色をつけておきます。
※背景色をつけたのには理由があります。

.header-nav{
   border: 2px solid red;
   background-color: beige;
   height: 200px;
}

.gnav-black{
   border: 2px solid blue;
   position: fixed;
   /* width: 100%; */
}

画像2

わかりますでしょうか？

「position: fixed;」としたことで、「.gnav-black」全体が宙ぶらりんになった感じです。
このようにしておくことで、ハンバーガーメニューボタンを押したときの大まかな状態を作ることができます。

ちなみによくわかっていないですが、幅が左端のみに寄ってしまいました。
幅を「width: 100%; 」にすると・・・

.gnav-black{
   border: 2px solid blue;
   position: fixed;
   width: 100%; 
}

☟このようにすべての幅を覆いますね。

画像3

まあ、別にいいかっていう感じなので幅の指定はコメントアウト（/* width: 100%; */）しておきます。

とりあえず、適当にデザインをあてておきます。

.gnav-black{
   border: 2px solid blue;
   position: fixed;
   /* width: 100%; */
}

.gnav-list{
   border: 2px solid green;
   background-color: black;
   opacity: 0.5;
   padding: 20px;
   height: 100vh;
}

.gnav-item{
   border: 2px solid orange;
   margin-bottom: 20px;
}
.gnav-item a{
   border: 2px solid brown;
   color: #fff ;
   display: block;
   text-align: center;
   font-size: 12px;
   line-height: 1.7;
}

.gnav-item a::first-line{
   font-size: 16px;
}

☟こんな感じにしておきました。
枠を先につけているのでめちゃくちゃデザインがわかりやすいです。

画像4

ここで行ったcssのポイントとしては、

●「aタグ」はインライン要素なので、
display: block;
text-align: center;
とすることでブロック要素にして、その中の全体を中央揃えにする

●「aタグ」の最初の行だけを大きい文字にする
.gnav-item a::first-line{
font-size: 16px;
}

こちらの2点です。

これでハンバーガーメニューのボタンを押したときに出てくるメニュー一覧は完成です。
後で、ボタンを押したときの動きをつければ良いでしょう(^^)/


次にボタンのスタイルを作ります。

ボタンとはここです。

画像10

htmlを以下のようにします。

    <header>
       <nav class="header-nav">
           <input type="checkbox" name="" id="gnav-input" class="gnav-hidden">
           <label for="gnav-input" class="gnav-btn"></label>
           <label for="gnav-input" class="gnav-black"></label>
           
           <div class="gnav-content">
               <ul class="gnav-list">
                   <li class="gnav-item"><a href="">TOP <br>トップ</a></li>
                   <li class="gnav-item"><a href="">COMPANY <br>会社概要</a></li>
                   <li class="gnav-item"><a href="">SKILL <br>スキル</a></li>
                   <li class="gnav-item"><a href="">ABOUT <br>当ブログついて</a></li>
               </ul>
           </div>
       </nav>
   </header>

ヘッダーの中にチェックボックスを追加しました。
そして、そのチェックボックスに関連づいた「labelタグ」を用意しておきます。
「inputタグのid」と「labelタグのfor」同じ記述にしておくと（同じ属性）、ブラウザ上でlabelあたりを触ると「inputタグ」のチェックボックスを押したのと同じ反応になるので便利です・・・・・難しい考え方ですが、時期に慣れるでしょう(;^ω^)

cssは以下のようにします。

.gnav-hidden{
   /* display: none; */
}

.gnav-btn{
   background-color: black;
   opacity: 0.8;
   display: block;
   width: 40px;
   height: 40px;
   position: fixed;
}

「.gnav-btn」で「display: block;」にして塊として動けるようにしました。それから「position: fixed;」としてポジションを自由に動けるようにしました。

さらにポジションを以下のように決めます。
右側に寄せておきましょうかね。

.gnav-btn{
   background-color: black;
   opacity: 0.8;
   display: block;
   width: 40px;
   height: 40px;
   position: fixed;
   top:20px;
   right: 20px;
   z-index: 100;
}
top:20px;
right: 20px;

でポジションを指定しました。
画面スクロールしてもこのポジションは絶対に変わりません！

z-index: 100;

とすると、画面の上部に来るように指定できます。
※値が大きい方が上に来る。

ひとまず☟このようになりましたね。

画像5


メニュー一覧は普段は左側に隠れているようにしておきます。

.gnav-content{
   border: 2px solid blue;
   position: fixed;
   /* width: 100%; */
   left: -100%;
   transition: 0.3s;
   z-index: 100;
}

「left: -100%;」としているので普段は左側（-100％なのではみ出ている）に隠れている設定です。
それをチェックボックスにスイッチが入ると「left: -0;」となるようにすれば良いです。

画像11

※ここが一番難しそうですね('ω')

ここで「チェックボックス」にチェックが入ったときに、左側からメニュー一覧が出てくるようにします。

右上の黒四角とチェックボックスが「inputタグのid属性」と「labelタグのfor属性」で連携されているので以下のような動きをします。

#gnav-input:checked ~ .gnav-content{
   left: 0;
}

画像7


左上の「チェックボックス」が邪魔なので消しておきましょうかね。

.gnav-hidden{
   display: none;
}

画像6

これでハンバーガーメニューの基本的な動きがわかりました(^^)/

後はデザインをかっこいい感じで自分好みにカスタマイズするだけです。
それともう少し複雑な動きもできるかもしれませんが、それはおいおい勉強していくことにしましょう(^^♪

全体のコード

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Lesson4-12ハンバーガーメニューを作ろう</title>
   <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <header>
       <nav class="header-nav">
           <input type="checkbox" name="" id="gnav-input" class="gnav-hidden">
           <label for="gnav-input" class="gnav-btn"></label>
           
           <div class="gnav-content">
               <ul class="gnav-list">
                   <li class="gnav-item"><a href="">TOP <br>トップ</a></li>
                   <li class="gnav-item"><a href="">COMPANY <br>会社概要</a></li>
                   <li class="gnav-item"><a href="">SKILL <br>スキル</a></li>
                   <li class="gnav-item"><a href="">ABOUT <br>当ブログついて</a></li>
               </ul>
           </div>
       </nav>
   </header>
</body>
</html>

css/style.css

*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

li{
   list-style: none;
}

a{
   text-decoration: none;
}

.header-nav{
   border: 2px solid red;
   background-color: beige;
   height: 200px;
}

.gnav-content{
   border: 2px solid blue;
   position: fixed;
   /* width: 100%; */
   left: -100%;
   transition: 0.3s;
   z-index: 100;
}

.gnav-list{
   border: 2px solid green;
   background-color: black;
   opacity: 0.5;
   z-index:100 ;
   padding: 20px;
   height: 100vh;
}

.gnav-item{
   border: 2px solid orange;
   margin-bottom: 20px;
}
.gnav-item a{
   border: 2px solid brown;
   color: #fff;
   display: block;
   text-align: center;
   font-size: 12px;
   line-height: 1.7;
}

.gnav-item a::first-line{
   font-size: 16px;
}

.gnav-hidden{
   display: none;
}

.gnav-btn{
   background-color: black;
   opacity: 0.8;
   display: block;
   width: 40px;
   height: 40px;
   position: fixed;
   top:20px;
   right: 20px;
   z-index: 100;
}

#gnav-input:checked ~ .gnav-content{
   left: 0;
}

☟こんな感じです(^^)/

画像8

いい感じですね(^^)/

動きだけ確認できれば、まずは良いでしょう( ｀ー´)ノ

ちなみに今日で「毎日Web制作コーディング7日目」になりますが、めちゃくちゃ上達してきた感があります。

引き続き練習していきます！

追記：「開く」「閉じる」を切り替える

ちょとだけアレンジをしてみようと思います。

●左上のチェックボックスにチェックがあるときは、右上の文字は「開」になっている。

画像12


●左上のチェックにチェックが無いときは、右上の文字は「閉」になる。

画像13

※あえてチェックが見えるようにしておきます。

.gnav-hidden{
   /* display: none; */
}

htmlファイルに「開」と「閉」という文字を用意します。

    <header>
       <nav class="header-nav">
           <input type="checkbox" name="" id="gnav-input" class="gnav-hidden">
           <label for="gnav-input" class="gnav-btn">
               <p>開</p>
               <p>閉</p>
           </label>
           
           <div class="gnav-content">
               <ul class="gnav-list">
                   <li class="gnav-item"><a href="">TOP <br>トップ</a></li>
                   <li class="gnav-item"><a href="">COMPANY <br>会社概要</a></li>
                   <li class="gnav-item"><a href="">SKILL <br>スキル</a></li>
                   <li class="gnav-item"><a href="">ABOUT <br>当ブログついて</a></li>
               </ul>
           </div>
       </nav>
   </header>

文字が上下左右で中央に来るようにします。

.gnav-btn{
   background-color: black;
   opacity: 0.8;
   /* display: block; */
   width: 40px;
   height: 40px;
   position: fixed;
   top:20px;
   right: 20px;
   z-index: 100;

   cursor: pointer;
   display: flex;
   justify-content: center; /*左右中央揃え*/
   align-items: center;     /*上下中央揃え*/    
}

中央ぞろえには最後の3行が重要ですね。

display: flex;
justify-content: center; /*左右中央揃え*/
align-items: center; /*上下中央揃え*/

このようにすることにより、これ以下の子要素は「flex(横並びになり)」、中央ぞろえで並んで、上下も中央に来ます。

この状態で、「.gnav-btn p」の1つ目は表示させておきながら、「.gnav-btn p」の2つ目は表示させないようにしておきます。

.gnav-btn p:nth-of-type(1),.gnav-btn p:nth-of-type(2){
   border: 2px solid brown;
   color: #fff ;
   text-align: center;
}

.gnav-btn p:nth-of-type(2){
   display: none;
}

これで、「開」しかみえていませんね('ω')

画像14

ここで、チェックボックスにチェックが入ると、切り替わるようにします。

#gnav-input:checked ~ .gnav-btn p:nth-of-type(1){
   display: none;
}
#gnav-input:checked ~ .gnav-btn p:nth-of-type(2){
   display: flex;
}

最後にチェックは非表示にしておきましょう(^^♪

.gnav-hidden{
   display: none;
}

これで上手くいきます。

画像15

画像16

いちおうわかりやすいように枠は残したままにしていますが、最終的なデザインの段階では枠はとってしまってかっこよく仕上げればよいのかと思います。

では、以上です(^^)/

よければTwitterフォローとブログをお読みください('◇')ゞ

Twitter➡@t_kun_kamakiri
ブログ➡宇宙に入ったカマキリ（物理ブログ）

この記事が気に入ったらサポートをしてみませんか？