제이쿼리 드롭다운 메뉴 예제
jQuery 로 Drop&Down 메뉴를 만들어보자.
jquery와, dropdown.js 파일을 참조하면 쉽게 구현할 수 있다.
예제 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>드롭다운 셀렉트 박스</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="dropdown.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="dropdown.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.dropdown({
id:"#select1",
save_id:"#sel_1",
titlecolor:"#ffffff",
bgcolor:"#000000",
itemcolor:"#ffffff",
itembgcolor:"#06f"
});
$.dropdown({
id:"#select2",
save_id:"#sel_2",
color:"#00ff00",
titlecolor:"#00ff00",
bgcolor:"#000000",
itemcolor:"#00ff00",
itembgcolor:"#0000ff"
});
$.dropdown({
id:"#select3",
save_id:"#sel_3",
color:"#ff0000",
titlecolor:"#ff0000",
bgcolor:"#000000",
itemcolor:"#ff0000",
itembgcolor:"#00ff00"
});
});
</script>
</head>
<body>
<p>1. 자바스크립트 선택 : <input type="text" name="select1" id="sel_1" value="" /></p>
<p>2. CSS/HTML 선택 : <input type="text" name="select2" id="sel_2" value="" /></p>
<p>3. 플래시 선택 : <input type="text" name="select3" id="sel_3" value="" /></p>
<div id="select1">
<ul>
<li>자바스크립트 선택</li>
<li>
<ul>
<li><a href="#">메뉴/네비게이션</a></li>
<li><a href="#">이미지/갤러리</a></li>
<li><a href="#">텍스트/링크</a></li>
<li><a href="#">날짜/시계/계산</a></li>
<li><a href="#">스크롤</a></li>
</ul>
</li>
</ul>
</div>
<div id="select2">
<ul>
<li>CSS / HTML 선택</li>
<li>
<ul>
<li><a href="#">메뉴 디자인</a></li>
<li><a href="#">버튼/링크</a></li>
<li><a href="#">레이아웃/박스</a></li>
<li><a href="#">폼 디자인</a></li>
<li><a href="#">이미지/텍스트</a></li>
</ul>
</li>
</ul>
</div>
<div id="select3">
<ul>
<li>플래시 선택</li>
<li>
<ul>
<li><a href="#">이미지/갤러리</a></li>
<li><a href="#">템플릿</a></li>
<li><a href="#">색상/그림그리기</a></li>
<li><a href="#">멀티미디어</a></li>
<li><a href="#">파티클</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
파일 다운로드 :
dropdown.zip