問題10:ハンバーガーメニューを実装しよう
ハンバーガーメニューを実装しよう!
見本を動画を参考に作成してください。
見本を動画を参考に作成してください。
期待する画面
解答ソースコード
<body>
<input type="checkbox" id="hamburger">
<label for="hamburger">
<span>
<i></i>
<i></i>
<i></i>
</span>
</label>
<nav class="ninja__hamburger">
<div class="ninja__hamburger__wrap">
<ul>
<li><a href="#">カテゴリA</a></li>
<li><a href="#">カテゴリB</a></li>
<li><a href="#">カテゴリC</a></li>
<li><a href="#">カテゴリD</a></li>
<li><a href="#">カテゴリE</a></li>
<li><a href="#">カテゴリF</a></li>
<li><a href="#">カテゴリG</a></li>
</ul>
</div>
</nav>
</body>
¥HTML¥
body {
padding: 24px;
}
input {
display: none;
}
label {
position: relative;
float: right;
clear: both;
}
span {
display: inline-block;
width: 35px;
height: 25px;
}
span i {
position: absolute;
width: 100%;
height: 2px;
background-color: #000;
display: block;
transition: all .3s ease-in-out;
}
span i:nth-child(1) {
top: 0;
}
span i:nth-child(2) {
margin: auto;
top: 0;
bottom: 0;
}
span i:nth-child(3) {
bottom: 0;
}
input:checked + label span i:nth-child(1) {
margin: auto;
transform: rotate(45deg);
right: 0;
bottom: 0;
left: 0;
top: 0;
}
input:checked + label span i:nth-child(2) {
transform: rotateX(90deg);
top: 0;
bottom: 0;
}
input:checked + label span i:nth-child(3) {
margin: auto;
transform: rotate(-45deg);
top: 0;
right: 0;
bottom: 0;
}
input:checked + label + .ninja__hamburger {
position: fixed;
z-index: 99;
opacity: 1;
}
.ninja__hamburger {
opacity: 0;
background-color: rgba(255, 255, 255, 0.7);
top: 80px;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
-webkit-transition: opacity .3s ease-in-out,z-index .3s ease-in-out;
transition: opacity .3s ease-in-out,z-index .3s ease-in-out;
}
.ninja__hamburger__wrap {
width: 520px;
background-color: #000;
position: absolute;
right: -100%;
top: 80px;
bottom: 0;
-webkit-transition: right .3s ease-in-out;
transition: right .3s ease-in-out;
overflow-y: scroll;
}
input:checked + label + .ninja__hamburger > .ninja__hamburger__wrap {
right: 0;
top: 0;
}
ul {
margin: 0;
}
li {
border-bottom: 1px solid #fff;
}
a {
padding: 0 50px;
color: #fff;
font-size: 24px;
height: 100px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
font-weight: 700;
line-height: 1;
transition: background-color .3s ease-in-out;
}
¥CSS¥
完了にする!
活動記録をTweetする
1.HTMLの宣言をしてみよう
ハンバーガーメニューのmein部分ですが、navタグ内に書いていきます。
尚、今回CSSのみの実装となりますのでlabelタグとnavタグは同階層で実装してください。
nav自体にposition:fixdを付与し右側に吸着させます。
中身については、:checkdがついていない状態の時にright:-100%で隠しておき:checkdが付与された時にright:0にする。
その際にtransitionでアニメーションも付与という感じで実装しております