반응형
스르륵 좌우로 나타나는 사이드메뉴 input:checked(checkbox)
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style>
input[id="menuicon"] {display:none;}
input[id="menuicon"] + label {display:block; margin:30px; width:20px; height:15px; position:relative; cursor:pointer;}
input[id="menuicon"] + label span {display:block; position:absolute; width:100%; height:4px; border-radius:30px; background:#000; transition:all .35s;}
input[id="menuicon"] + label span:nth-child(1) {top:0;}
input[id="menuicon"] + label span:nth-child(2) {top:50%; transform:translateY(-50%);} /* calc(50% - 2.5px); */
input[id="menuicon"] + label span:nth-child(3) {bottom:-1px;}
input[id="menuicon"]:checked + label {z-index:2;}
input[id="menuicon"]:checked + label span {background:#fff;}
input[id="menuicon"]:checked + label span:nth-child(1) {top:50%; transform:translateY(-50%) rotate(45deg);}
input[id="menuicon"]:checked + label span:nth-child(2) {opacity:0;}
input[id="menuicon"]:checked + label span:nth-child(3) {bottom:50%; transform:translateY(50%) rotate(-45deg);}
div[class="sidebar"] {width:300px; height:100%; background:#aaa; position:fixed; top:0; left:-300px; z-index:1; transition:all .35s;}
input[id="menuicon"]:checked + label + div {left:0;}
.menu-ul {font-size:0; width:300px; margin:30px auto; text-align:center;}
.menu-ul > li {font-size:1rem; display:inline-block; vertical-align:top; width:100%; list-style:none;}
</style>
</head>
<body>
<input type="checkbox" id="menuicon">
<label for="menuicon">
<span></span>
<span></span>
<span></span>
</label>
<div class="sidebar">
<div align="center">SITE MENU</div>
<ul class="menu-ul">
<li><a href="#">menu01</a></li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
<li><a href="#">menu04</a></li>
<li><a href="#">menu05</a></li>
<li><a href="#">menu06</a></li>
</ul>
</div>
</div>
</body>
</html>
</html>반응형
'HTML, CSS' 카테고리의 다른 글
| CSS 모작, BNX 반응형 상품 리스트 구현하기 (0) | 2021.10.17 |
|---|---|
| 반응형 메인 이미지 만들기 (0) | 2021.10.14 |
| HTML CSS 로그인 화면 예제 (0) | 2021.10.09 |
| 반응형 웹 HTML , CSS, 미디어쿼리 @media 예제 (0) | 2021.10.08 |
| HTML / CSS 반응형 웹과 미디어 쿼리(그리드 레이아웃, 플렉스 박스 레이아웃, CSS 그리드 레이아웃) (0) | 2021.10.07 |