プレビュー
まず、今回制作するハンバーガーメニューの完成プレビューは以下のようなものになります。
現在、僕が運用しているサイト L's (https://osaru.site/) でも使用しています。
レスポンシブ対応もしていますので、ぜひ使ってみてください！
| 表示していないとき | 表示しているとき |
|---|---|
 |
 |
手順
今回は以下のサイト構成だと仮定して説明していきます。
サイト構成
/index.html
/inquiry
| /index.html
/contents
| /index.html
あらかじめメニューに表示したいページを把握しておくと制作しやすいと思います。
手順１
以下のコードを入力しましょう。
メニューコンテンツなのでheaderタグ内に入れると良いと思います。
index.html
<div id="menu">
<input type="checkbox" id="menu-btn-check">
<label for="menu-btn-check" id="menu-btn"><span></span></label>
<div id="menu-content">
<ul>
<li><p>サイトメニュー</p></li>
<li><a href="index.html">TOP</a></li>
<li><a href="inquiry/">お問い合わせ</a></li>
<li><a href="contents/">コンテンツ</a></li>
<li><p>外部リンク</p></li>
<li><a href="https://twitter.com/">Twitter</a></li>
<li><a href="https://facebook.com">Facebook</a></li>
</ul>
</div>
</div>
解説
PCでは違うメニューを表示したいという方などはidを"pc-menu"にし、スマートフォン向け（ハンバーガーメニュー）のidを"sp-menu"というようにしてあげるとよいと思います。
この要素は後程CSSで非表示にします。
この要素をクリックすることで状態を管理する要素をクリックしたことになります。
手順2
以下のコードを入力しましょう。
style.css
#menu-btn {
position: fixed;
cursor: pointer;
top: 10px;
right: 10px;
display: flex;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
z-index: 90;
background-color: rgba(242, 234, 211, 0.75);
border: 1px solid rgba(46, 15, 13, 1);
border-radius: 25%;
}
#menu-btn span,
#menu-btn span::before,
#menu-btn span::after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: rgba(46, 15, 13, 1);
position: absolute;
transition: all 0.5s;
}
#menu-btn span::before {
bottom: 8px;
}
#menu-btn span::after {
top: 8px;
}
#menu-btn-check:checked ~ #menu-btn span {
background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ #menu-btn span::before {
bottom: 0;
transform: rotate(45deg);
}
#menu-btn-check:checked ~ #menu-btn span::after {
top: 0;
transform: rotate(-45deg);
}
#menu-btn-check:checked ~ #menu-content {
left: 0;
}
#menu-btn-check {
display: none;
}
#menu-content {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 100%;
z-index: 80;
background-color: rgba(242, 234, 211, 0.95);
transition: all 0.5s;
border-left: 2.5px solid rgba(46, 15, 13, 1);
}
#menu-content ul {
padding: 70px 10px 0;
}
#menu-content ul li {
border-bottom: solid 1px rgba(46, 15, 13, 1);
list-style: none;
}
#menu-content ul li p {
display: block;
font-weight: bold;
width: 100%;
font-size: 125%;
box-sizing: border-box;
color: rgba(46, 15, 13, 1);
text-decoration: none;
padding: 40px 25px 10px 10px;
position: relative;
}
#menu-content ul li a {
display: block;
width: 100%;
font-size: 100%;
box-sizing: border-box;
color: rgba(46, 15, 13, 1);
text-decoration: none;
padding: 15px 25px 10px 10px;
position: relative;
}
#menu-content ul li a::before {
content: '';
width: 7px;
height: 7px;
border-top: solid 2px rgba(46, 15, 13, 1);
border-right: solid 2px rgba(46, 15, 13, 1);
transform: rotate(45deg);
position: absolute;
right: 11px;
top: 16px;
}
解説
そこを変更することで色を変更することができます。
完成
これで完成です！