Skip to content

Instantly share code, notes, and snippets.

@hooney
Created January 15, 2019 04:04
Show Gist options
  • Save hooney/9c0e0148af21c4f352a4213e288044b7 to your computer and use it in GitHub Desktop.
Save hooney/9c0e0148af21c4f352a4213e288044b7 to your computer and use it in GitHub Desktop.
2-depth nav using jquery
/* global */
body {
margin:0;
padding:0;
font: 12px/1.2 "돋움", dotum, sans-serif;
background:#666;
}
/* header */
#header {
width:800px;
height:150px;
margin:50px auto;
background:#000;
position:relative; /* 포지션의 기준점을 잡습니다. */
}
#nav {
position:absolute; /* header를 기준으로 하단에 위치시킵니다. */
left: 0;
bottom:0;
}
#nav ul, #nav li {
margin:0;
padding:0;
}
#nav li {
position:relative;
list-style:none;
float:left;
margin-right:5px;
}
#nav a {
display:block;
padding: 1em 2em;
font-weight:bold;
text-decoration:none;
}
#nav li ul {
position:absolute;
top:3.5em;
width: 300px;
display:none; /* li의 자식인 ul을 숨겨둡니다. */
}
#nav li.on ul {
display:block; /* 활성화된 li의 자식인 ul만 보여줍니다. */
}
/* color */
#header {background:#000;}
#nav a {background:#fff; color:#000;}
#nav .on a,
#nav li li a {background:#390; color:#fff;}
<div id="header"><!-- 상단 박스를 만들고 -->
<div id="nav"><!-- 가로형 2단 메뉴바를 ul x ul 형태로 만듭니다. -->
<ul>
<li class="on"><!-- 첫번째 1단 메뉴를 활성화 합니다. --> <a href="/">처음</a>
<ul>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
</ul>
</li>
<li><a href="#">갤러리</a>
<ul>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
</ul>
</li>
<li><a href="#">블로그</a>
<ul>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
</ul>
</li>
<li><a href="#">등록</a>
<ul>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
</ul>
</li>
<li><a href="#">소개</a>
<ul>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
</ul>
</li>
<li><a href="#">포럼</a>
<ul>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
</ul>
</li>
</ul>
</div><div id="header"><!-- 상단 박스를 만들고 -->
<div id="nav"><!-- 가로형 2단 메뉴바를 ul x ul 형태로 만듭니다. -->
<ul>
<li class="on"><!-- 첫번째 1단 메뉴를 활성화 합니다. --> <a href="/">처음</a>
<ul>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
</ul>
</li>
<li><a href="#">갤러리</a>
<ul>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
</ul>
</li>
<li><a href="#">블로그</a>
<ul>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
</ul>
</li>
<li><a href="#">등록</a>
<ul>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
</ul>
</li>
<li><a href="#">소개</a>
<ul>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
</ul>
</li>
<li><a href="#">포럼</a>
<ul>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
$('#nav li').bind('mouseenter keyup', function() { // 메뉴바의 각 메뉴들에 마우스를 올리거나 키보드로 이동하면,
$(this).addClass('on').siblings().removeClass(); // 해당 메뉴에 클래스 on을 추가하고, 다른 메뉴의 클래스를 제거합니다.
}); // 네. 3줄로 끝입니다.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment