예전에는 보통 복잡한 자바스크립트 소스를 사용하여 메뉴 구성을 만들어 사용했었습니다. 하지만 jQuery 가 나온 이후 간편하게 jQuery의 라이브러리를 사용하여 더 화려한 효과를 낼 수 있습니다.
아래 소스와 이미지를 살펴 보시기 바랍니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Menu - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 150px; }
</style>
</head>
<body>
<ul id="menu">
<li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>
<li><a href="#">Addyston</a></li>
<li><a href="#">Delphi</a>
<ul>
<li class="ui-state-disabled"><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a>
<ul>
<li><a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li><a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li><a href="#">Perch</a></li>
</ul>
</li>
<li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>
</body>
</html>
// 깔끔한 3단 메뉴구성을 할 수 있는 소스 입니다. CSS를 조금 다룰줄 안다면 텍스트, 이미지 구성등 더 응용을 할 수 있지 않을까 생각합니다.
출처 : http://jqueryui.com/
'jQuery > jQuery 예제' 카테고리의 다른 글
| jQuery shuffle 효과(이미지가 한장씩 뒤로 넘어가는 효과) (2) | 2013.07.01 |
|---|
