jQuery 네비게이션3
2021. 12. 9. 12:00ㆍStudy/jQuery
CSS
@charset "utf-8";
/* CSS Document */
/* base */
*{margin: 0; padding: 0;}
body{font-family:arial; font-size: 16px; color:#333;}
h3{font-size:1rem}
ul,ol{list-style:none;}
a{color:inherit; text-decoration:none;}
#wrap{width: 100%;}
#headerArea{width: 100%; position:fixed; background: green; height:57px;}
#headerArea .headerInner{width: 1200px; margin: 0 auto;}
.dropdownmenu{width:1200px; height:57px; margin:0 auto;}
.dropdownmenu::after{content:''; display: block; clear: both;}
.dropdownmenu > li{float:left; position:relative; width: 16.66%; text-align: center;}
.dropdownmenu > li h3{position:relative; height:57px; overflow:hidden;}
.dropdownmenu > li h3 a{display:block; height:57px; line-height:57px; transition: all .5s;}
/* 2depth 중요 */
.dropdownmenu > li ul{position:absolute; left:0; top:57px; width:100%; padding:15px 0; background: green; display: none;}
.dropdownmenu > li ul li a{display:block; color:#fff; padding: 10px 0; transition: all .5s; margin: 0 5px; border-radius: 5px;}
.dropdownmenu > li ul li a:hover{color:#000; background:#fff;}
JS
// JavaScript Document
$(document).ready(function() {
//$('ul.dropdownmenu li ul').hide();
$('ul.dropdownmenu li.menu').hover(
function() {
$('ul', this).fadeIn('normal',function(){$(this).stop();});
$('a.depth1', this).css('color','#fff');
},function() {
$('ul', this).fadeOut('fast');
$('a.depth1', this).css('color','#333');
});
//.clearQueue()
//키보드 tab처리
$('ul.dropdownmenu li.menu .depth1').on('focus', function () { //1depth a태그가 포커스를 받을때
$(this).parents('.menu').find('ul').fadeIn('fast'); //자신의 1depth에 있는 서브(ul)만 열어라
$(this).parents('.menu').siblings().find('ul').fadeOut('fast'); //자신을 제외한 나머지 모든 1depth에 있는 서브(ul)를 닫아라
});
$('ul.dropdownmenu li.m6 li:last').find('a').on('blur', function () { //1depth a태그가 포커스를 잃을때
$('ul.dropdownmenu li.m6 ul').fadeOut('fast'); // 가장 마지막에 위치한 1depth에 서브메뉴를 닫아라
});
});
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>Save The Children</title>
<link href="css/main_layout.css" rel="stylesheet" media="all">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/fullnav.js"></script>
</head>
<body>
<!-- //skipNav -->
<div id="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">About Us</a></h3>
<ul>
<li><a href="sub1/sub1_1.html">Spirit And Ideas</a></li>
<li><a href="sub1/sub1_2.html">History</a></li>
<li><a href="sub1/sub1_3.html">Finance</a></li>
</ul>
</li>
<li class="m2 menu">
<h3><a class="depth1" href="sub2/sub2_1.html">Campign</a></h3>
<ul>
<li><a href="sub2/sub2_1.html">Every One</a></li>
<li><a href="sub2/sub2_2.html">Change The Future</a></li>
<li><a href="sub2/sub2_3.html">Moja Season 5</a></li>
</ul>
</li>
<li class="m3 menu">
<h3><a class="depth1" href="sub3/sub3_1.html">Participation</a></h3>
<ul>
<li><a href="sub3/sub3_1.html">Signature</a></li>
<li><a href="sub3/sub3_2.html">Volunteer Work</a></li>
<li><a href="sub3/sub3_3.html">Giving Clup</a></li>
</ul>
</li>
<li class="m4 menu">
<h3><a class="depth1" href="sub4/sub4.html">Helped</a></h3>
</li>
<li class="m5 menu">
<h3><a class="depth1" href="sub5/sub5.html">Gallery</a></h3>
</li>
<li class="m6 menu">
<h3><a class="depth1" href="bbs/zboard.php?id=board1">Board</a></h3>
<ul>
<li><a href="bbs/zboard.php?id=board1">Notice</a></li>
<li><a href="bbs/zboard.php?id=board2">FAQ</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery 네비게이션 Full drop-down + 스크롤 반응 배경 (0) | 2021.12.09 |
|---|---|
| jQuery 네비게이션 full dropdown_navi (0) | 2021.12.09 |
| jQuery 네비게이션2 (0) | 2021.12.09 |
| jQuery 네비게이션1 (0) | 2021.12.09 |
| jQuery node(DOM) 선택자 (0) | 2021.12.08 |
