jQuery 드롭다운메뉴 사용하는 방법-jquery.droppy.js

demun
퍼블리셔/jQuery
2012. 2. 9. 06:00

jQuery 를 사용한 드롭다운 메뉴가 참 많습니다. jquery 가 워낙 성능이 뛰어나다보니 많은 제이쿼리 드롭다운 메뉴를 보셧을 겁니다.
그럼 나도 한번 드롭다운메뉴를 만들어보자...라는 취지에서 예전부터 유명했던 jquery.droppy.js 를 소개할까 합니다.
홈페이지를 보시면 예제와 사용법이 있습니다.

그런데 정작 한글로 된 소개글은 하나도 없더군요. 그래서 겸사겸사 소개합니다.
홈페이지 => http://onehackoranother.com/projects/jquery/droppy/

사용법을 알려들리기 전에 먼저 사이트를 하나더 소개하겠습니다.
위의 홈페이지보다 더 자세히 설명을 해놓은곳이 있어 이걸 예제로 들면 되겠다싶어 소개합니다.
먼저 코드와 예제는 아래의 사이트를 참고하세요.
http://www.css-lecture.com/template/2009/0622/

마우스를 Folder 에 갖다 대시면 하위 메뉴가 펼쳐집니다.

대략 사용법은 위의 사이트에 나와 있습니다.
티스토리에서 사용하시려면 먼저 jquery 를 스킨 편집에서 업로드 시킨다음 jquery 를 링크시켜야 합니다.

jquery.droppy.js

아래의 코드를 </body> 위에 넣습니다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="./images/jquery.droppy.js"></script>
<script type="text/javascript">
	$(function() {
		$("#nav").droppy(); 
	});
</script>
</body>

그다음 html 마크업은 아래와 같습니다. 약간 수정했습니다.

<div id="globalNavi">
<ul id="nav">
	<li><a href='#'>Top level 1</a></li>
	<li><a href='#'>Folder</a>
		<ul>
			<li><a href='#'>Sub 2-1</a></li>
			<li><a href='#'>Folder</span></a>
				<ul>
					<li><a href='#'>Folder</span></a>
						<ul>
							<li><a href='#'>Sub</a></li>
							<li><a href='#'>Sub</a></li>
							<li><a href='#'>Sub</a></li>
							<li><a href='#'>Sub</a></li>
						</ul>
					</li>
					<li><a href='#'>Sub</a></li>
					<li><a href='#'>Folder</a>
						<ul>
							<li><a href='#'>Sub</a></li>
							<li><a href='#'>Sub</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href='#'>Sub 2-3</a></li>
		</ul>
	</li>
	<li><a href='#'>Top level 3</a></li>
	<li><a href='#'>Top level 4</a></li>
</ul>
</div>

스타일은 아래와 같습니다.
약간 수정했습니다. 수정한것은 아래 추가라고 표기했습니다.

ul,li	{ margin:0; padding:0; }
#globalNavi	{ background:#333; height: 28px; padding-top: 7px; text-align: center; }
#nav { width: 900px; margin: 0 auto; position: relative; line-height:1; text-align:left; }
#nav li { list-style: none; float:left; position: relative; }
#nav ul { display: none; position: absolute; top: 29px; left: 0; }
* html #nav ul { line-height: 0; }
#nav ul li { float: none; }
#nav ul { width: 120px; }
#nav ul ul { top: 0; left: 121px; }
#nav ul a { 
	display: block;
	width: 108px;
	background:#121212;
	padding: 6px;
	color: #FFF;
	border-bottom: 1px solid #FFF;
	opacity: 0.7;
	filter: alpha(opacity=70);
	zoom: 1;
	line-height: 1;
}
#nav ul a.hover { background: #444; }
/* 추가 */
#nav a { padding:5px 10px; color:#fff; }

이걸로 끝입니다.
하위로 무진장 펼쳐지는 드롭다운 메뉴를 볼수 있습니다.
이 jquery.droppy.js 는 사용법이 간단하고 ie6부터 모두 호환이 됩니다.
예전에 나왔지만 현재도 많이 사용합니다.

여기서 중요한것은 ul 의 id 인 #nav 를 jquery 선택자를 사용해서 선택만 한다는 점입니다. 이런식이죠.

>$(function() {
	$("#nav").droppy(); 
});

스타일은 약간만 수정하면 확장할 수 있습니다.

다른 드롭다운 메뉴

다른 드롭다운 메뉴 검색하서 모두 보기

수평 드롭다운 메뉴 => http://demun.tistory.com/2145

CSS 3 드롭다운 에니메이션 메뉴 => http://demun.tistory.com/2161

티스토리 카테고리 메뉴를 드롭다운으로 이용하는 방법 => http://demun.tistory.com/2175

수평 드롭다운 메뉴바 달기(jquery이용) Horizontal CSS Menus => http://demun.tistory.com/1672

이미지가 필요없는 css 드롭다운 메뉴 Vertical css menu => http://demun.tistory.com/1613

티스토리 블로그메뉴를 드롭다운으로 이용하는 방법 => http://demun.tistory.com/2174

css 애니메인션 드롭다운 => http://demun.tistory.com/2310

개 개

demun(대문블로그)

jQuery 드롭다운메뉴 사용하는 방법-jquery.droppy.js

다른 드롭다운 메뉴

티스토리툴바