동적 드롭다운 menu_jquery를 생성하기 위해 CSS와 결합된 jQuery

제한된 탐색 메뉴 공간에 큰 하위 메뉴를 배치해야 할 경우 일반적으로 공간 부족을 보완하기 위해 드롭다운 메뉴를 사용합니다. 이 기사에서는 jQuery와 CSS를 사용하여 최소한의 시간에 동적 드롭다운 메뉴를 만드는 방법을 보여줍니다.

XHTML
첫 번째로 필요한 것은 페이지의 헤드 부분에 jquery 라이브러리를 도입하는 것입니다.

<script type="text/javascript" src="js/jquery.js"></script> 

그런 다음 순서가 지정되지 않은 목록을 사용하여 메뉴를 만들었습니다.

<ul class="menu"> 
  <li><a href="#">首页</a></li> 
  <li><a href="#">服务</a></li> 
  <li><a href="#">案例</a></li> 
  <li><a href="#">关于</a></li> 
  <li><a href="#">BLOG</a></li> 
</ul> 

한 눈에 알 수 있고 매우 단순해 보입니다. 처음에는 드롭다운 메뉴가 닫혀 있기 때문에 드롭다운을 트리거할 수 있는 보이는 버튼도 만들어야 합니다. 이 글에서는 그림을 트리거로 직접 사용합니다. 편의를 위한 버튼입니다. 그리고 메뉴 목록 상단에 사진을 배치하세요

<img src="nav.gif" width="184" height="32" class="menu_head" /> 

CSS
메뉴에 대한 CSS 스타일을 각각 생성합니다. 코드를 참조하세요.

.menu_head{border:1px solid #998675; background:#f30} 
.menu{display:none; width:184px; border:1px solid #998675; border-top:none} 
.menu li{list-style:none; background:#493e3b} 
.menu li a{padding:10px; display:block;color:#fff; text-decoration:none;} 
.menu li a:hover{font-weight:bold;} 
.menu li.alt{background:#362f2d;} 

.menu li.alt 스타일은 홀수와 짝수 줄과 줄 바꿈을 구별하는 데 사용되며 이는 아래 jquery 코드에 반영됩니다.
jQuery
jQuery 코드에서 먼저 드롭다운 메뉴 행을 구별하고 짝수 행에 스타일을 지정해야 합니다. 그런 다음 그림 버튼에 대한 클릭 트리거 이벤트를 추가하면 버튼을 클릭할 때 드롭다운 메뉴가 전환될 수 있습니다.

$(function(){ 
  $(".menu li:even").addClass("alt"); 
  $("img.menu_head").click(function(){ 
    $(".menu").slideToggle("fast"); 
  }); 
}); 

참고, jQuery의 SlideToggle 메소드를 사용하여 메뉴를 슬라이딩 방식으로 표시하고 숨겼는데 효과가 매우 부드럽습니다.

위 내용은 CSS와 결합하여 동적 드롭다운 메뉴를 만든 공유 jQuery입니다. 모든 사람의 학습에 도움이 되기를 바랍니다.