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'jQuery' 카테고리의 다른 글
| ajax json 방식으로 호출 시 response 간단히 작성하기 (0) | 2017.08.17 |
|---|---|
| 객체 떨림 효과 (0) | 2013.11.29 |
| jquery ui touch (0) | 2013.05.29 |
| ajax 크로스 도메인 (0) | 2013.05.09 |
| ajax 사용하기 (xml) (0) | 2013.04.30 |