ハンバーガーメニューの仕組み

レスポンシブデザインでよく見るハンバーガーメニューの作り方を、

仕組み含めて習得してしまいたい人にぜひ読んで頂きたいと思います。

ステップにわけてきっちりと理解していきましょう♪

完成図

パソコンで見たとき

パソコンで見たとき

スマホで見たとき

スマホで見たとき

[toc]

メニュー画像を用意する

今回は、私の好きなThemifyとCodropsとGitHubのアイコンをそれぞれ探して来て、パソコンに保存します。

検索方法は、Themifyの場合は、会員登録することで無料でもらえますが、Themify, png, icon とかでも出て来ます。(https://themify.me/themify-icons)

 

 

 

 

 

HTMLでクラスを決める

WEBサイトのメニューを決める訳ですが、今回は3つの極シンプルなメニューにします。

解説

まずPCのためのクラスを作り、3つのリンクをデザインするためのクラスとIDを作ります。
クラス listは、デフォルトで表示される ・ を消すため、3種類のIDは、それぞれの位置を指定するためです。

<!--パソコンでの表示方法を指定する為のHTML -->

    <div class="pc-menu">
     <ul id="navigation">
        <li class="list"><a id="themify" href="https://hogehoge.com/"><img src="img/themify.png" alt="themify"></a></li>    
        <li class="list"><a id="codrops" href="https://hogehoge.com/"><img src="img/codrops.png" alt="codrops"></a></li>
        <li class="list"><a id="github" href="https://hogehoge.com//"><img src="img/github.png" alt="github"></a></li>
      </ul>
     </div>


<!--スマホでの表示方法を指定する為のHTML -->
スマホでも同様、スマホのためのクラスを作ります。
少し違うのは、ハンバーガーメニューのための仕組みをここで作るので、ID:lavel1と ID:inputを作るところです。
   <div class="smafo-menu"> <input id="input" type="checkbox"> <label id="label1" for="input"><div class="line1"></div><div class="line2"></div><div class="line3"></div></label> <div id="content"> <ul class="list"> <li><a id="themify" href="https://hogehoge.com/"><img src="img/themify.png" alt="themify"></a></li> <li><a id="codrops" href="https://hogehoge.com/"><img src="img/codrops.png" alt="codrops"></a></li> <li><a id="github" href="https://hogehoge.com/"><img src="img/github.png" alt="github"></a></li> </ul> </div> </div>


CSSを書いていく

次に先ほどHTMLファイルで作ったクラスにデザインを施していきます。

コードは、coalaさんの動画を参考にさせて頂きました。(*動画は下記にあります)

基本の骨組みが少し出来て来たところで、クリックで表示・非表示にする仕組みを作っていきましょう。

 

ステップ1:表示/非表示を切り換えるためのコードを書く

 

まず最初、inputタグについてです。# : ID

HTMLでIDタグにクラス分けしましたので、#input { display: none; } と記述することで

PCでの非表示を指定することが出来ます。

つまり、パソコンで見る際は非表示にして、スマホサイズの画面で見る時にだけ

表示させるためのコードを書いていきます。

 /*inputタグのチェックボックス非表示*/

#input{ 
  display: none; 
}

ステップ2:inputタグにチェックを入れるとメニューが表示出来るようにする

そして、スマホで見た時には表示させるためのソースを書きます。

参考動画でも説明してくれている通り、チェックが入ると #contentクラスの中身を transform:translatex(0px); にして、通常値に戻すという指定をします。

 

/*チェックが入ったら見せる*/

#input:checked ~ #content { 
   transform: translatex(0px); 
 }

 

ステップ3:ハンバーガーメニューのデザインを作る

ハンバーガーメニューになる3本線のデザインは、

幅と高さ、背景色、位置を指定することで作ります。

.line1,.line2,.line3{ 
  width: 20px; 
  height: 2px; 
  background-color: 
  black; margin: 4px; 
}

 

メニューバーを配置するスペースのデザイン

/*メニューのデザイン*/ 

#content{ 
  background-color: white; 
  width: 200px; height: 100%; 
  transform: translateX(-210px); 
}

ハンバーガーメニューをクリックした時の表示位置

スマホで見た時の3つのメニューの位置をCSSでそれぞれ書きます。

#themify {
    display: block;
    margin-left: -30px !important;
}
#codrops {
    display: block;
    margin-left: 0px;
    margin-top: -30px;
}

#github {
     display: block;
     padding-left: 30px;
     margin-top: -30px;
}

liクラスで・を消します。

.list {
  list-style-type: none;
}

 

DEMO
Liked Liked
1 Comment