jQuery CSS_jquery로 구현된 슈퍼 섹시 드롭다운 메뉴

• 홈


• 자습서
  
  
  
  • Ch1>
  Ch2>
  • Ch21>
    • Ch211
      • Ch2111
  Ch21111
  
  
  Ch21112
  
  
  Ch21113
  
  
  Ch21114
  
  
  Ch21115
  
  
  Ch21116
  
  
  
  
  
  • Ch2112
  
  
  • Ch2113>
  
  
  • Ch2114>
  
  
  • Ch2115
  
  
  
  


• Ch212>


• Ch213>


• Ch214>

Ch22

• Ch221>


• Ch222>


• Ch223>

Ch23>

Ch3>

• Ch31>


• Ch32>

리소스

• 하위 탐색 링크


• 하위 탐색 링크

회사 소개

광고

제출

문의하기

2단계 CSS




复代码


代码如下:

3단계 jQuery

复aze代码 代码如下:

<스크립트 유형="텍스트/자바스크립트">
$(document).ready(function() {
// 상단 메뉴
$("ul.submenu1").parent().append("" ); //js가 활성화된 경우에만 드롭다운 트리거를 표시합니다. (ul.submenu1* 뒤에 빈 범위 태그를 추가합니다.)
$("ul.topmenu lispan").click(function() { //트리거를 클릭할 때 ...
//다음 이벤트는 하위 메뉴1 자체에 적용됩니다(하위 메뉴1 위아래로 이동)
$(this).parent().find("ul.submenu1").slideDown('fast') .show(); //클릭 시 하위 메뉴1 드롭다운
$(this).parent().hover(function() {
}, function() {
$(this).parent( ).find("ul.submenu1").slideUp('slow'); //하위 메뉴1 밖으로 마우스를 가져가면 다시 위로 이동합니다.
})//다음 이벤트가 하위 메뉴에 적용됩니다. Trigger (트리거에 대한 호버 이벤트)
}).hover(function() {
$(this).addClass("hover"); //호버 위에 마우스를 올리면 "hover" 클래스 추가
} , function() { //호버 아웃 시
$(this).removeClass("hover"); //호버 아웃 시 "hover" 클래스 제거

$( "ul.topmenu li ul.submenu1 li").hover(function() {
$(this).find("ul.submenu11:first").show("slow");
}, function() {
$(this).find("ul.submenu11:first").hide("fast");
});
});



演示代码

http://www.jb51.net/jiaoben/23955.html