CSSのみで作るハンバーガーメニュー【JavaScript不要】
どうも。黒蛇です。
CSSのみでハンバーガーメニューを作ってみたのでご紹介します。
JavaScriptは不要です。
- ハンバーガーメニューが作りたい
- でもJavaScriptは使いたくない
と考えている方はぜひご覧いただければと思います。
今回紹介するハンバーガーメニュー
今回紹介するハンバーガーメニューはこちらです。
See the Pen rNOMGab by kurohebi (@kurohebi) on CodePen.
CodePenで表示しているので、スマホの方はもしかしたら表示されていないかもしれませんが、当サイトで使用しているハンバーガーメニューと同じなので、右上の三本線をポチっと押してご確認いただければと思います。
ハンバーガーメニューの作り方
ハンバーガー部分の作り方
まずはハンバーガー部分を作ります。
クリックしたときに三本線からバツ印になるところですね。
HTMLのコードはこちらになります。
<nav>
<input type="checkbox" id="check">
<span class="span1"></span>
<span class="span2"></span>
<span class="span3"></span>
<label for="check"></label>
</nav>navタグを親要素として中にinputタグ、labelタグとspanタグ３つを子要素として入れています。
それぞれの役割はこのようになっています。
- navタグ ：ハンバーガー部分を入れる大枠。
- inputタグ：クリックの判定用。checkboxの属性を持たせる。
- labalタグ：ハンバーガーの周りの枠線。inputタグの属性を引き継ぐ。
- spanタグ：三本線の部分。
labalタグに「for=”chek”」を加えているところがポイントです(check はinputタグのid)。これにより、labelをクリックしたときにチェックボックスにチェックが付くようになります。
上記のHTMLだけではlabelもspanも中身がなく、空白になっているので下記のCSSで装飾して見やすくします。ちょっと長いかもですが、、、
nav {
position: relative;
height: 100vh;
overflow: hidden;
}
label {
width: 30px;
height: 30px;
border: 1px solid black;
position: absolute;
right: 10px;
top: 10px;
z-index: 1000;
}
span {
width: 20px;
height: 1px;
background-color: black;
position: absolute;
right: 15px;
transition: .3s;
z-index: 100;
}
.span1 {
top: 20px;
}
.span2 {
top: 27px;
}
.span3 {
top: 34px;
}<補足>
※navタグ：
position:relative; にして配置するときの基準にします。
height: 100vh; overflow: hiddenは絶対ではありません。
今回はメニューを画面の縦いっぱいに広げるために指定しています。
※labelタグ：
配置を指定するためにposition: absolute; にします。
※spanタグ：
配置を指定するためにposition: absolute; にします。
高さは個別に設定する必要があるのでクラス「span1」「span2」「span3」でそれぞれ指定します。
ここまで書くとこんな感じになります。
See the Pen KKdgrJM by kurohebi (@kurohebi) on CodePen.
ハンバーガーの見た目部分ができています。
labelタグにinputタグの属性を加えているので右上のハンバーガー部分をクリックすると左上のチェックボックスのチェックを切り替えることができるようになっています。
クリックしたときに「×」になるようにする
次はハンバーガーをクリックしたときにバツ印「×」になるよう以下のCSSを加えます。
#check:checked ~ .span2 {
display: none;
}
#check:checked ~ .span1 {
width: 27px;
transform: rotate(45deg);
top: 27px;
right: 12px;
}
#check:checked ~ .span3 {
width: 27px;
transform: rotate(-45deg);
top: 27px;
right: 12px;
}
#check {
display: none;
}
「#check:checked」は「チェックボックスにチェックが入っているとき」という意味です。
span2はチェックが入ったときにdisplay: none; にして隠します。
span1とspan3は transform: rotate(角度)で斜めにしています。また、斜めにしただけでは配置がおかしいので改めて位置と長さを指定しています。
最後にチェックボックスを display: none; にして隠します。
上記のCSSを加えると以下のようになります。
クリックしたときにバツ印になるようになりました。
See the Pen RwWGEWz by kurohebi (@kurohebi) on CodePen.
メニュー画面を表示する
次はメニューを表示させます。
メニューを表示させれば完成なのでもうひと踏ん張りです。
HTMLにメニュー用のコードを追加します。
ハンバーガー部分とあわせてこのようになります。
<nav>
<input type="checkbox" id="check">
<span class="span1"></span>
<span class="span2"></span>
<span class="span3"></span>
<label for="check"></label>
<ul>
<li>メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>
</ul>
</nav>続いて以下のCSSを加えます。
ul {
width: 100%;
height: 100%;
background-color: #2a9ee04a;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
position: absolute;
top: 0;
right: -100%;
transition: 1s;
z-index: 10;
}
li {
margin-top: 20px;
}
#check:checked ~ ul {
right: 0;
}ulタグのところでいろいろ書いていますが、ほとんどレイアウトを整えるもなのでご自由に変更してみてください。大切なのは「position: absolute;」「top: 0;」「right: -100%」のところです。「right: -100%;」と指定することで画面の右側に隠しています。
そして「#check: checked ~ ul」で「right: 0;」にすることで画面に表示されるようにします。
ここまでくればハンバーガーメニューの完成です。
完成したハンバーガーメニューをもう一度載せておきます。
お疲れ様でした！！
See the Pen rNOMGab by kurohebi (@kurohebi) on CodePen.
まとめ
今回はCSSのみでのハンバーガーメニューの作り方をご紹介しました。
ご参考になれば幸いです。
では、また。
