ハンバーガメニューが出ます。
<input type="checkbox" id="hamburger">
<label for="hamburger">
<span class="burger">
<span class="bar"></span>
</span>
</label>
<label class="lijht-dark" for="hamburger"></label>
<div id="menu">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
</div>
CSS
#hamburger {
opacity: 0;
position: fixed;
}
label .burger{/*🈪の大きさと場所*/
position: fixed;
top: 1rem;
left: 1rem;
z-index: 3;
width: 2rem;
height: 2rem;
}
label .burger::before,/*🈪の太さと色*/
label .burger::after,/*をそれぞれ*/
label .burger .bar{/*３つ一緒に*/
position: absolute;
left: 0;
width: 100%;
height: 0.25rem;
border: 3px;
background: #fff;
content: "";
transition: all 0.5s;/*変化する時間*/
}
label .burger::before{/*場所*/
top: 0;
transform-origin: top left;
}
label .burger::after{/*場所*/
bottom: 0;
transform-origin: bottom left;
}
label .burger .bar{/*場所*/
top: 45%;
}
#menu {/* menuを縦並びにします。 */
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 2;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
}
#menu::before {/*menuの背景*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: -1;
width: 25rem;
background: #b25;
content: "";
transform: skewX(15deg) translateX(-100%);/*15度の斜めにします。*/
transform-origin: bottom left;
transition: transform 0.3s;/*移動時間*/
}
#menu a{/*menuの文字を整えて隠します。*/
margin: 1.3rem 0;
padding: 0.2rem 3rem;
font-size: 1.5rem;
font-family: 'Times New Roman', Times, serif;
color: #fff;
text-decoration: none;
transform: translateX(-100%);/*隠す*/
transition: all 0.15s, transform 0.5s;/*時間*/
transition-timing-function: cubic-bezier(0.19,1,0.22,1);/*出方*/
}
#hamburger:checked + label .burger::before,
#hamburger:checked + label .burger::after{/*両方長くします*/
width: 130%;
}
#hamburger:checked + label .burger::before{/*45度に傾けます。*/
transform: rotate(45deg);
}
#hamburger:checked + label .burger::after{/*-45度に傾けます。*/
transform: rotate(-45deg);
}
#hamburger:checked + label .burger .bar{/*大きさ0にします。*/
transform: scale(0);
}
#hamburger:checked ~#menu::before{/*赤い背景の移動*/
transform: skewX(15deg) translateX(0);
}
#hamburger:checked ~#menu a{/*文字の移動*/
transform: translateX(0);
}
#hamburger:checked ~ .lijht-dark{/*menuの場所を全体に広げて背景を暗くします。*/
background: #000;
opacity: 0.5;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}