반응형
안녕하세요. 오늘은 웹페이지에서 자주 쓰이는 반응형 드롭다운 메뉴 소스를 공유하려고 합니다.
필요에 따라 커스텀해서 사용하시면 될거같아요.
gnb에 마우스 hover할 시 전체 하위메뉴가 나타나는 예제입니다.
[결과]
[HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>
<body>
<header id="header">
<div class="container">
<h1 class="logo">
LOGO
</h1>
<a href="#" class="menu_btn">
<div></div>
<div></div>
<div></div>
</a>
<nav class="nav">
<ul class="gnb">
<li><a href="#">services</a>
<ul class="sub">
<li><a href="#">test sub</a></li>
<li><a href="#">test sub</a></li>
<li><a href="#">test sub</a></li>
<li><a href="#">test sub</a></li>
</ul>
</li>
<li><a href="#">offers</a>
<ul class="sub">
<li><a href="#">test sub</a></li>
<li><a href="#">test sub</a></li>
<li><a href="#">test sub</a></li>
</ul>
</li>
<li><a href="#">portfolio</a>
<ul class="sub">
<li><a href="">test sub</a></li>
<li><a href="">test sub</a></li>
<li><a href="">test sub</a></li>
<li><a href="">test sub</a></li>
<li><a href="">test sub</a></li>
<li><a href="">test sub</a></li>
<li><a href="">test sub</a></li>
</ul>
</li>
<li><a href="#">gallery</a>
<ul class="sub">
<li><a href="">test sub</a></li>
<li><a href="">test sub</a></li>
<li><a href="">test sub</a></li>
<li><a href="">test sub</a></li>
<li><a href="">test sub</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="hd_bg"></div>
</header>
</body>
</html>
[CSS]
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
html,body{ font-family: 'Noto Sans KR', sans-serif;}
body{background-color: bisque;margin: 0;padding: 0;}
a{color: inherit;text-decoration: none;}
.container{max-width: 1200px;width: calc(100% - 40px);margin: auto;}
#header {background: #fff;margin: 0;}
#header .logo{font-size: 25px;box-sizing: border-box;}
#header .container{display: flex;justify-content: space-between;align-items: center;}
#header .gnb{text-align: right;}
#header .nav .logo{display:flex;width:200px;flex-wrap:wrap;justify-content: center;align-items: center;text-transform:uppercase;cursor:pointer;}
#header .menu_btn{position:absolute;right:20px;top:20px;display:none;}
#header .menu_btn div { width: 25px;height: 2px;background-color:#000;margin: 6px 0px;position: relative;transition:all .8s ease;}
#header .menu_btn.lijo div{position:absolute;transition:all .8s ease;}
#header .menu_btn.lijo div:nth-child(1){transform: rotate(45deg);top: 7px;right: 0px;}
#header .menu_btn.lijo div:nth-child(2){width:0px;top: 7px;right: 0px;}
#header .menu_btn.lijo div:nth-child(3){transform: rotate(-45deg);top: 7px; right: 0px;}
#header .nav ul.gnb{margin-bottom:0px;padding-left:0px;display: flex;}
#header .nav ul.gnb li{margin-bottom:0px;color:#000;text-align: center;position: relative;}
#header .nav ul.gnb li a {box-sizing: border-box;display:block;transition:.8s ease;text-transform:uppercase;}
#header .nav ul.gnb > li > a {padding: 20px 40px;}
#header .nav ul.gnb li ul.sub{position:absolute;padding-left:0px;opacity:0;visibility: hidden;padding-top:10px;z-index: 3;width: 100%}
#header .nav ul.gnb li ul.sub li {display: block;position: relative;}
#header .nav ul.gnb li ul.sub li a{padding:10px;}
@media(min-width:1024px){
#header .nav ul.gnb:hover li ul.sub{visibility:visible;opacity:1;transform:translateY(0px);}
#header .nav ul.gnb li:hover{display:inline-block;margin-bottom:0px;}
#header.open .hd_bg{position: absolute;width: 100%;background: #fff;z-index: 1;transition: all .3s;border-top: 1px solid #dcdcdc}
#header .nav ul.gnb li ul.sub li a{text-align: center}
#header .nav .active {position: relative}
#header .nav .active:hover:after{content: '';display: block;width: 100%;height: 2px;background: #000;position: absolute;left: 0;bottom: 0}
#header .nav ul.gnb li ul.sub{display: block !important}
}
@media(max-width:1024px){
#header{position: relative;position: fixed;width: 100%;top: 0;left: 0;padding: 20px 0}
#header .menu_btn{display:block;top:50%;transform: translateY(-50%)}
#header .menu_btn.lijo{top: 30%}
#header .nav ul.gnb{position: absolute;top: 65px;transform: translateX(100%);left: 0;transition:.8s ease;width:100%; height: calc(100vh - 65px);background: #fff;overflow-y: auto;display: block}
#header .nav ul.gnb li a{text-align: left}
#header .nav ul.gnb > li > a{padding: 10px 20px}
#header .nav ul.gnb.surya {transform: translateX(0%);}
#header .nav ul.gnb li ul.sub{opacity: 1;visibility: visible;display:none;position:relative;padding-top:0px;width:100%;transition:0s;transform: translateY(0px);padding: 0 20px}
#header .nav ul.gnb li ul.sub:after{display:none;}
.hd_bg{display: none !important}
}
[js]
$(document).ready(function(){
$('.menu_btn').click(function(){
$('.menu_btn').toggleClass('lijo');
$('.gnb').toggleClass('surya');
});
$('.gnb li').click(function(){
$(this).find('.sub').slideToggle();
var t = $(this).find('.sub');
$('.sub').not(t).slideUp();
});
var max_h=0;
$(".sub").each(function () {
var h = parseInt($(this).css("height"));
if (max_h < h) {
max_h = h;
}
});
// 마우스 over 시
$('.gnb').mouseenter(function () {
// menu bg
var menuHeight = $('#header').outerHeight();
$('.hd_bg').css({
'top': menuHeight + 'px',
height: max_h + 30 + 'px',
});
$('#header').addClass('open');
});
$('.gnb').mouseleave(function () {
$('.hd_bg').css('height', '0');
$('#header').removeClass('open');
});
$('.gnb > li').mouseenter(function () {
$(this).addClass('active');
$(this).siblings().removeClass('active')
});
$('.gnb > li').mouseleave(function () {
$(this).removeClass('active');
});
});
codepen
반응형
'Web > HTML' 카테고리의 다른 글
| 파비콘(favicon) 만드는 사이트, 적용하는 방법 (0) | 2023.03.14 |
|---|---|
| [HTML] <form> 태그 사용 방법과 요소 (0) | 2021.04.23 |
| [HTML] video 태그 사용법 (0) | 2021.04.21 |
| 웹접근성 가이드 및 체크리스트 (0) | 2021.04.19 |
| [HTML] 이미지맵 태그(map, area ) 사용 방법, 쉽게 만들어주는 사이트 (0) | 2021.04.15 |