[css] 풀드롭다운 메뉴 만들기

안녕하세요. 

요즘 자주 보이는 풀 드롭다운 메뉴입니다.

gnb와 햄버거메뉴가 함께 있는 스타일입니다.

 

[html]

	<!--header-->
	<div id="header">
		<h1 class="logo">
			<a href="#">LOGO</a>
		</h1>
		<ul id="gnb">
			<li class="dept1">
				<a href="#">메뉴</a>
				<ul class="inner_menu">
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
				</ul>
			</li>
			<li class="dept1">
				<a href="#">메뉴</a>
				<ul class="inner_menu">
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
				</ul>
			</li>
			<li class="dept1">
				<a href="#">메뉴</a>
				<ul class="inner_menu">
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
				</ul>
			</li>
			<li class="dept1">
				<a href="#">메뉴</a>
				<ul class="inner_menu">
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
				</ul>
			</li>
			<li class="dept1">
				<a href="#">메뉴</a>
				<ul class="inner_menu">
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
					<li class="dept2">
						<a href="#">메뉴2</a>
					</li>
				</ul>
			</li>
		</ul>

		<a href="#" class="menu_bar">
			<span></span>
			<span></span>
			<span></span>
		</a>

		<div class="menu_open">
			<ul>
				<li class="dept1">
					<a href="#">메뉴</a>
					<ul>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
					</ul>
				</li>
				<li class="dept1">
					<a href="#">메뉴</a>
					<ul>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
					</ul>
				</li>
				<li class="dept1">
					<a href="#">메뉴</a>
					<ul>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
					</ul>
				</li>
				<li class="dept1">
					<a href="#">메뉴</a>
					<ul>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
					</ul>
				</li>
				<li class="dept1">
					<a href="#">메뉴</a>
					<ul>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
						<li class="dept2">
							<a href="#">메뉴2</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>

		<div class="hd_bg"></div>

	</div>
	<!--//header-->

	<div class="visual">

	</div>

 

 

[css]

/* reset css */
html{font-size: 10px}
body{font-size: 1.6rem}
*{margin: 0;padding: 0;}
ul li,
ol li{list-style: none;}
a{text-decoration: none;color: inherit;}


#header{display: flex;justify-content: space-between;align-items: center;padding: 2rem;position: relative;}
#header #gnb{display: flex;z-index: 99;margin-left: auto;}
#header #gnb > .dept1 {position: relative;;padding: 1rem 2rem;text-align: center;}
#header #gnb > .dept1 > a.active{color: red;font-weight: bold}

#header #gnb .inner_menu {position: absolute;top: 100%;left:50%;transform: translateX(-50%);width:100%;padding-top:3rem;display: none}
#header #gnb  .dept2 {padding: 1rem 0;color: #555}
#header #gnb  .dept2 > a:hover,
#header #gnb  .dept2 > a:active,
#header #gnb  .dept2 > a:focus {font-weight: bold}

#header .menu_bar {margin-left: auto;z-index: 9999;position: relative;}
#header .menu_bar.active span:nth-child(1){display: none}
#header .menu_bar.active span:nth-child(2){transform:rotate(130deg)}
#header .menu_bar.active span:nth-child(3){transform: rotate(45deg);top: 0px;position: absolute}
#header .menu_bar span{width: 22px;height: 2px;background: #555;display: block;margin: 6px}
.menu_open{position: fixed;width: 100%;height: 100vh;background: #fff;top: 0;left: 0;z-index: 999;padding: 3rem;display: none}
.menu_open > ul{display: flex;}
.menu_open > ul li{width: 20%;}

.hd_bg{background: #fff;width: 100%;height: 0;left: 0;z-index: 1;position: absolute;}

.visual{background:#ccd1f1;width: 100%;height: 100vh;}

 

[js]

		$(document).ready(function() {
			var gnb = $('#gnb');

			// 마우스 over 시
			gnb.mouseenter(function() {
				$('.inner_menu').show();
				// menu bg
				var menuHeight = $('#header').outerHeight();
				var inmeHegiht = $('.inner_menu').outerHeight();
				$('.hd_bg').css({
					'top': menuHeight + 'px',
					height: inmeHegiht + 'px'
				});
			});

			// 마우스  leave 시
			gnb.mouseleave(function() {
				$('.inner_menu').hide();
				$('.hd_bg').css('height', '0')

			});

			//dept2 hover시 dept1 active
			$('.dept1').mouseenter(function() {
				$(this).children().addClass('active');
				$(this).siblings().children().removeClass('active')
			});
			$('.dept1').mouseleave(function() {
				$(this).children().removeClass('active');
			});
			
			/* 햄버거 메뉴 */
			$('.menu_bar').click(function(){
				$(this).toggleClass('active');
				$('.menu_open').slideToggle();
			});
		});