レスポンシブデザインでよく見るハンバーガーメニューの作り方を、
仕組み含めて習得してしまいたい人にぜひ読んで頂きたいと思います。
ステップにわけてきっちりと理解していきましょう♪
完成図
メニュー画像を用意する
今回は、私の好きなThemifyとCodropsとGitHubのアイコンをそれぞれ探して来て、パソコンに保存します。
検索方法は、Themifyの場合は、会員登録することで無料でもらえますが、Themify, png, icon とかでも出て来ます。(https://themify.me/themify-icons)
HTMLでクラスを決める
WEBサイトのメニューを決める訳ですが、今回は３つの極シンプルなメニューにします。
解説
まずPCのためのクラスを作り、3つのリンクをデザインするためのクラスとIDを作ります。
クラス listは、デフォルトで表示される ・ を消すため、３種類の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さんの動画を参考にさせて頂きました。（＊動画は下記にあります）
基本の骨組みが少し出来て来たところで、クリックで表示・非表示にする仕組みを作っていきましょう。
ステップ１：表示／非表示を切り換えるためのコードを書く
まず最初、inputタグについてです。# : ID
HTMLでIDタグにクラス分けしましたので、#input { display: none; } と記述することで
PCでの非表示を指定することが出来ます。
つまり、パソコンで見る際は非表示にして、スマホサイズの画面で見る時にだけ
表示させるためのコードを書いていきます。
/*inputタグのチェックボックス非表示*/
#input{
display: none;
}ステップ２：inputタグにチェックを入れるとメニューが表示出来るようにする
そして、スマホで見た時には表示させるためのソースを書きます。
参考動画でも説明してくれている通り、チェックが入ると #contentクラスの中身を transform：translatex(0px); にして、通常値に戻すという指定をします。
<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>ステップ３：ハンバーガーメニューのデザインを作る
ハンバーガーメニューになる３本線のデザインは、
幅と高さ、背景色、位置を指定することで作ります。
.line1,.line2,.line3{
width: 20px;
height: 2px;
background-color:
black; margin: 4px;
}メニューバーを配置するスペースのデザイン
/*メニューのデザイン*/
#content{
background-color: white;
width: 200px; height: 100%;
transform: translateX(-210px);
}ハンバーガーメニューをクリックした時の表示位置
スマホで見た時の３つのメニューの位置を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;
}