jquery_jquery를 사용하여 무한 계층적 수평 탐색 메뉴를 구현하는 방법

이 문서의 예에서는 jquery가 무한 계층적 수평 탐색 메뉴를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

1. jquery 플러그인 버전 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

(function($){
$.fn.extend({
         드롭라인 메뉴: 기능(구성) {
                var configs = $.extend({                                    오버: 200,
아웃: 100,
                  오른쪽 아래:'css/down.gif'
               },configs||{});
This.find(">ul").addClass("dropmenu");
this.find("ul li:has(ul)").addClass('hasmenu').find(">a").append("");
            var currentobj;
                $('li.hasmenu').hover(function() 반환{                                                                      > >  if ($.browser.msie) {//ie:hidden
에서 생성된 오버플로 지우기                             $(this).parent("ul").css({'overflow': 'visible'}); ~ $(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs.over);
},기능(){ $(this).find(">ul").stop(true, true).slideUp(configs.out);
            });
}
});
})(jQuery);

2. 스타일 코드

코드 복사

코드는 다음과 같습니다.* {margin:0;padding:0} .droplinebar{ 위치: 절대; Z-색인: 20;

너비: 700px;

}
.droplinebar ul.dropmenu {
위치: 상대;
}
.droplinebar ul{
너비: 100%
플로트: 왼쪽
글꼴: 굵은 13px Arial;
background: #242c54 url(bluedefault.gif) center centerpeat-x /*메뉴바의 기본 배경*/
}
.droplinebar ul li{
부동:왼쪽
}
.droplinebar ul ul {
너비: 700px;
표시:없음;
Z-색인: 100;
위치:절대;
왼쪽:0
배경: #303c76; 확대/축소: 1;
}
.droplinebar ul li a{
부동: 왼쪽;
색상: 흰색;
패딩: 9px 11px;
텍스트 장식: 없음;
디스플레이:블록
}
.droplinebar ul li.hasmenu a img {border:none;margin-left:5px;}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*onMouseover의 기본 메뉴 표시줄 링크 배경*/
색상: 흰색;
배경: 투명 URL(blueactive.gif) 중앙 중앙 반복-x;
}
/* 하위 레벨 메뉴 링크 스타일 */
.droplinebar ul li ul li a{
글꼴: 일반 13px Verdana;
패딩: 6px;
패딩 오른쪽: 8px;
여백: 0;
border-bottom: 1px 솔리드 네이비;
}
.droplinebar ul li ul li a:hover{ /*하위 메뉴 링크의 배경색 onMouseover */
배경: #242c54;
}

3. HTML代码如下

复代码 代码如下:

<스크립트 유형="텍스트/자바스크립트">
$(문서).ready(함수(){
    $("#mydroplinemenu").droplinemenu();
});

• 홈


• CSS 예
   
  
   
  • 활동 1
  
   
  • 활동 2
  
   
  • 활동 3>
         
    
         
    • 수상스포츠 1
    
         
    • 수상스포츠 1
    
         
    • 수상스포츠 1
    
         
    • 수상스포츠 1
    
         
    
       
     
  • 활동 4
  
   
  
  
  
• 도구


• 자바스크립트
   
  
   
  • 여행 1
  
   
  • 여행 2
  
   
  • 여행 3
  
   
  • 여행 4>
         
    
         
    • 아프리카 1
    
         
    • 아프리카 2
    
         
    • 아프리카 3
    
         
    • 아프리카 4
               
      
               
      • 케냐 1
      
               
      • 케냐 2
      
               
      • 케냐 3
      
               
      • 케냐 4
      
               
      • 케냐 5
      
               
      
             
           
    
       
     
  • 여행 5>
  
   
  
  
  
• 갤러리

4. 플러그인 버전 코드 없음:

코드 복사 코드는 다음과 같습니다.

$(document).ready(function(){
var configs_over = 200,configs_out = 100;
$("#mydroplinemenu").find(">ul").addClass("dropmenu").find("li:has(ul)").addClass('hasmenu').find(">a" ).append("");
$('.dropmenu li.hasmenu').hover(function(){                                   If ($.browser.msie) {//IE:hidden
에서 생성된 오버플로를 지웁니다.                 $(this).parent("ul").css({'overflow': 'visible'});           }
           $(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs_over);
},함수(){
            $(this).find(">ul").stop(true, true).slideUp(configs_out);
});
});

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.