<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>full down menu</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<style>
/*-------- default setting --------*/
* {
margin: 0;
padding: 0;
}
a {
color: black;
text-decoration: none;
}
li {
list-style: none;
}
img {
display: block;
}
/*-------- header --------*/
.header {
width: 1032px;
height: 200px;
background-color: #ccc;
margin: 0 auto;
}
/*-------- lnb --------*/
#chk_menu {
display: none;
}
#chk_menu:checked ~ .menu_box {
height: 300px;
}
/* #chk_menu ~ .menu_box {display: none;} */
.lnb {
width: 1032px;
margin: 0 auto;
position: sticky;
top: 0;
}
.lnb .menu label {
float: left;
}
.lnb .menu ul {
float: left;
}
.lnb .menu li {
width: 206.4px;
height: 32px;
background-color: #8b0000;
color: white;
text-align: center;
line-height: 32px;
float: left;
}
.lnb .menu_box {
width: 1032px;
height: 0;
overflow: hidden;
transition-property: height;
transition-duration: 0.2s;
}
/*-------- wrap --------*/
.wrap {
width: 1032px;
height: 2000px;
background-color: #ccc;
margin: 0 auto;
}
/*-------- wing banner --------*/
#wing_banner {
display: none;
}
#wing_banner:checked ~ .wing_box {
width: 200px;
}
/* #wing_banner ~ .wing_box {display: none;} */
#wing_banner:checked ~ .banner .close {
display: block;
}
#wing_banner:checked ~ .banner .open {
display: none;
}
#wing_banner ~ .banner .close {
display: none;
}
#wing_banner ~ .banner .open {
display: block;
}
.wing {
display: block;
width: 50px;
height: 50px;
background-color: #8b0000;
color: white;
font-weight: bold;
text-align: center;
line-height: 50px;
position: fixed;
right: 0;
top: 50px;
}
.wing .wing_box {
width: 0;
height: 300px;
float: right;
color: black;
background-color: #eee;
transition-property: width;
transition-duration: 0.2s;
}
/*-------- top button --------*/
.top {
display: block;
width: 50px;
height: 50px;
background-color: #8b0000;
color: white;
font-weight: bold;
text-align: center;
line-height: 50px;
position: fixed;
right: 50px;
bottom: 50px;
}
</style>
</head>
<body>
<header class="header">
<h1 id="header">Header</h1>
</header>
<nav class="lnb">
<input type="checkbox" id="chk_menu" />
<div class="menu">
<label for="chk_menu">
<img src="./images/ham_btn.png" alt="풀다운메뉴 버튼" />
</label>
<ul>
<li>menu01</li>
<li>menu02</li>
<li>menu03</li>
<li>menu04</li>
<li>menu05</li>
</ul>
</div>
<div class="menu_box">menu_box</div>
</nav>
<div class="wrap">contents</div>
<nav class="wing">
<input type="checkbox" id="wing_banner" />
<div class="banner">
<label for="wing_banner" class="open"
><i class="fa-sharp fa-solid fa-angle-left"></i
></label>
<label for="wing_banner" class="close"
><i class="fa-sharp fa-solid fa-xmark"></i
></label>
</div>
<div class="wing_box">wing_banner</div>
</nav>
<a href="#header" class="top">Top</a>
</body>
</html>