Instantly share code, notes, and snippets.
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment