햄버거 버튼 클릭 시 gnb 아래로 내려오게 하기!
본문
**************html****************
<div class="cover">
<header id="header">
<div class="container">
<div class="utilMenu">
<ul>
<li><a href="">
LOGIN</a></li>
<li><a href="">
JOIN</a></li>
<li><a href="">
CART</a></li>
<li><a href="">
ORDERLIST</a></li>
</ul>
</div>
<div class="wrap">
<h1 class="logo">
<a href="" alt=""></a>
</h1>
<nav id="gnb">
<ul class="depth01">
<li>
<a href="../layout/product.php"></a>
<ul class="depth02">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li>
<a href="#"></a>
<ul class="depth02">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li>
<a href="#"></a>
<ul class="depth02">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li>
<a href="../layout/about.php"></a>
<ul class="depth02">
<li><a href="../layout/about.php"></a></li>
<li><a href="../layout/greetings.php"></a></li>
<li><a href="../layout/history.php"></a></li>
<li><a href="../layout/identity.php"></a></li>
<li><a href="../layout/directions.php"></a></li>
</ul>
</li>
</ul>
<div class="fake"></div>
</nav>
<div class="topMenu">
<ul>
<button class="btnAll">
<span></span>
<span></span>
<span></span>
</button>
<li class="search"><input type="text"><label for=""></label><i class="xi-search"></i></li>
</ul>
</div>
</div>
</div>
</header>
*********css************
#gnb .depth02 {overflow: hidden;height: 0;position: absolute;z-index: 99;left: 0;top: 100%;width: 100%; z-index: 100;}
#gnb:hover .depth02 {height: 380px; transition: 0.5s ease;}
#gnb .fake {overflow: hidden; height: 0; background-color: #f8f8f8; width: 100%; position: absolute; left: 0; top: 126px; z-index: 99;}
#gnb:hover .fake {height: 380px; transition: 0.5s ease; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;}
#header .btnAll span:nth-child(1) {top: 9px;}
#header .btnAll span:nth-child(2) {top: 19px;}
#header .btnAll span:nth-child(3) {top: 29px;}
body.open #header .btnAll span:nth-child(1) {top: 17px; transform: rotate(45deg);border: none;}
body.open #header .btnAll span:nth-child(2) {left: 0; opacity: 0;border: none;}
body.open #header .btnAll span:nth-child(3) {top: 17px; transform: rotate(-45deg);border: none;}
===========================================
안녕하세요! 제가 전체 메뉴인 gnb에 hover 했을 때 소메뉴 depth02 와 fake 라는 메뉴 뒷 배경이 같이 내려오게 css 작업 했습니다ㅠㅠ
햄버거 버튼을 따로 만들었는데, 햄버거 버튼 btnAll을 클릭했을 때 소메뉴인 depth02와 fake 부분이 아래로 슬라이드 되면서 보여지게 하는 스크립트를 어떻게 만들어야 할까요??
아직 초보라 어설픈 실력이라.. 부탁드립니다!
