본문 바로가기
jQuery/jQuery 예제

jQuery Slide Menu(슬라이드 메뉴)

by 진격의 파파 2013. 6. 25.
반응형

 

예전에는 보통 복잡한 자바스크립트 소스를 사용하여 메뉴 구성을 만들어 사용했었습니다. 하지만 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/ 

반응형