jQuery 네비게이션 full dropdown_navi
2021. 12. 9. 12:13ㆍStudy/jQuery
CSS
@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
body{font-family:"돋움", "돋움체"; font-size:16px; color:#333;}
h3{font-size:1rem;}
ul,ol{ list-style:none;}
a{color:inherit; text-decoration:none;}
body{background: green;}
.wrap{width: 100%;}
#headerArea{position: fixed; left:0; top:0; width:100%; height:50px; border-bottom:1px solid #999; background: #fff;}
#gnb{clear:both; width:1200px; margin: 0 auto;}
.dropdownmenu{}
.dropdownmenu::after{content:''; display: block; clear: both;}
.dropdownmenu > li{float:left; position:relative;width:16.66%; height:50px;}
.dropdownmenu > li h3 a{display:block; height: 50px; line-height: 50px; text-align: center; transition: all .5s; }
/* 2depth */
.dropdownmenu li ul{position:absolute; top:50px; left:0; width:100%; height:120px; padding:20px 0; line-height:2; display:none;}
.dropdownmenu li ul li{text-align:center; font-weight:bold;}
.dropdownmenu li ul li a{display:block; color:#666; border-radius: 5px; transition: all .5s;}
.dropdownmenu li ul li a:hover{color:#fff; background: green;}
JS
$(document).ready(function() {
//2depth 열기/닫기
$('ul.dropdownmenu').hover(
function() {
$('ul.dropdownmenu li.menu ul').fadeIn('normal',function(){$(this).stop();}); //모든 서브를 다 열어라
$('#headerArea').animate({height:250},'fast').clearQueue();
},function() {
$('ul.dropdownmenu li.menu ul').fadeOut('fast'); //모든 서브를 다 닫아라
$('#headerArea').animate({height:50},'normal').clearQueue();
});
//1depth 효과
$('ul.dropdownmenu li.menu').hover(
function() {
$('.depth1',this).css('color','red');
},function() {
$('.depth1',this).css('color','#333');
});
//tab 처리
$('ul.dropdownmenu li.menu .depth1').on('focus', function () {
$('ul.dropdownmenu li.menu ul').slideDown('normal');
$('#headerArea').animate({height:250},'fast').clearQueue();
});
$('ul.dropdownmenu li.m6 li:last').find('a').on('blur', function () {
$('ul.dropdownmenu li.menu ul').slideUp('fast');
$('#headerArea').animate({height:50},'normal').clearQueue();
});
});
HTML
<!DOCTYPE html>
<html lang="en">
<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>Nexon</title>
<link rel="stylesheet" href="css/layout.css" media="all">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/fullnav.js"></script>
</head>
<body>
<div class="wrap">
<header id="headerArea">
<div class="headerInner">
<nav id="gnb">
<ul class="dropdownmenu">
<li class="m1 menu">
<h3><a class="depth1" href="sub1/sub1_1.html">기자단</a></h3>
<ul>
<li><a href="http://dodopic.cafe24.com/sub1/sub1_1.html">기자단 소개</a></li>
<li><a href="http://dodopic.cafe24.com/sub1/sub1_2.html">멤버들</a></li>
<li><a href="http://dodopic.cafe24.com/sub1/sub1_3.html">취재방</a></li>
</ul>
</li>
<li class="m2 menu">
<h3><a class="depth1" href="http://dodopic.cafe24.com/sub2/sub2_1.html">NOS</a></h3>
<ul>
<li><a href="http://dodopic.cafe24.com/sub2/sub2_1.html">NOS 소개</a></li>
<li><a href="http://dodopic.cafe24.com/sub2/sub2_2.html">명예의 전당</a></li>
</ul>
</li>
<li class="m3 menu">
<h3><a class="depth1" href="http://dodopic.cafe24.com/sub3/sub3_1.html">NAF</a></h3>
<ul>
<li><a href="http://dodopic.cafe24.com/sub3/sub3_1.html">NAF 소개</a></li>
<li><a href="http://dodopic.cafe24.com/sub3/sub3_2.html">모집요강</a></li>
<li><a href="http://dodopic.cafe24.com/sub3/sub3_3.html">접수하기</a></li>
<li><a href="http://dodopic.cafe24.com/sub3/sub3_4.html">갤러리</a></li>
</ul>
</li>
<li class="m4 menu">
<h3><a class="depth1" href="http://dodopic.cafe24.com/sub4/sub4_1.html">글로벌 인턴쉽</a></h3>
<ul>
<li><a href="http://dodopic.cafe24.com/sub4/sub4_1.html">모집요강</a></li>
<li><a href="http://dodopic.cafe24.com/sub4/sub4_2.html">대결!경쟁 PT</a></li>
</ul>
</li>
<li class="m5 menu">
<h3><a class="depth1" href="http://dodopic.cafe24.com/sub5/sub5_1.html">GO! 넥슨</a></h3>
<ul>
<li><a href="http://dodopic.cafe24.com/sub5/sub5_1.html">넥슨 완전정복</a></li>
<li><a href="http://dodopic.cafe24.com/sub5/sub5_2.html">넥슨 피플</a></li>
<li><a href="http://dodopic.cafe24.com/sub5/sub5_3.html">공지사항</a></li>
<li><a href="http://dodopic.cafe24.com/sub5/sub5_4.html">넥슨인 게시판</a></li>
</ul>
</li>
<li class="m6 menu">
<h3><a class="depth1" href="http://dodopic.cafe24.com/sub6/sub6_1.html">게임동아리</a></h3>
<ul>
<li><a href="http://dodopic.cafe24.com/sub6/sub6_1.html">동아리 소개</a></li>
<li><a href="http://dodopic.cafe24.com/sub6/sub6_2.html">게임 플레이</a></li>
<li><a href="http://dodopic.cafe24.com/sub6/sub6_3.html">게임 톡!</a></li>
</ul>
</li>
</ul>
</nav>
<!-- nav e -->
</div>
<!-- headerInner e -->
</header>
<!-- header e -->
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery slide scroll, quicktop, tab (0) | 2021.12.10 |
|---|---|
| jQuery 네비게이션 Full drop-down + 스크롤 반응 배경 (0) | 2021.12.09 |
| jQuery 네비게이션3 (0) | 2021.12.09 |
| jQuery 네비게이션2 (0) | 2021.12.09 |
| jQuery 네비게이션1 (0) | 2021.12.09 |
