jQuery ul 레이블 드롭다운 메뉴 데모 code_jquery

메뉴의 내용은 ul 태그를 사용하여 메뉴를 구현하는 것입니다:

코드를 복사하세요 코드는 다음과 같습니다.

• 메뉴 1 >
  
  
  • 하위 메뉴 1
  
  
  • 하위 메뉴 2
    
    • 하위 메뉴 7
    >
  • 하위 메뉴 3
  
  
  
  
• a href=" ">메뉴 2
  
  
  
  • 하위 메뉴 4
  • 하위 메뉴 5
  
  
  • 하위 메뉴 6
  > ;
  
  
  

🎜 >



코드 복사

코드는 다음과 같습니다.

ul,ol,li{list-style: none;padding: 0px;margin:0px;} #menu *{line-height:30px;} #menu a{ text-꾸밈:none; display:block; >}

#menu ul{

text-align:left;
background:#333;
}
#menu .arrow{ /* 메뉴 항목 오른쪽에 있는 작은 화살표 */
float: right;
padding-right:5px;
}
#menu>ul{height:30px;} /* 메뉴바가 없더라도 높이 유지 메뉴 항목. */
/* 첫 번째 수준 메뉴*/
#menu>ul>li{
text-align:center
display:inline-block;
width:80px; }
#menu>ul>li>a{color:#fff;}
#menu>ul>li:hover{배경:#666;}
/* 드롭다운 메뉴 표시줄*/
#menu>ul>li ul{
display:none;
width:150px;
위치:absolute;
배경:#c1cd94
box-shadow:2px 2px 2px 000 ;
-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #123;
}
/* 드롭다운 메뉴의 메뉴 항목 */
#menu>ul>li>ul li{padding-left:5px; position:relative;}
#menu>ul>li>ul li>a{color:#000;}
#menu> ul>li>ul li:hover{배경:#d3dbb3;}
/* 레벨 3 이하의 메뉴 항목 위치 지정*/
#menu>ul>li>ul>li ul{left :150px; top:0px;}


JS 제어 코드입니다:




코드 복사

코드는 다음과 같습니다.

$(document).ready(function() { /* 메뉴 초기화*/ $('#menu>ul>li> ;ul').find ('li:has(ul:not(:empty))>a').append(">") / / 하위 메뉴가 있는 경우 메뉴 항목에 '>' 기호 추가$("#menu>ul>li").bind('mouseover',function() // 최상위 메뉴 항목에 대한 마우스 오버 작업{ $( this).children('ul').slideDown('fast');

}).bind('mouseleave',function() // 최상위 메뉴 항목에 대한 마우스아웃 작업

{
$( this).children('ul').slideUp('fast')
$('#menu>ul>ul li').bind( 'mouseover',function() //하위 메뉴에 대한 마우스 인 작업
{
$(this).children('ul').slideDown('fast')
}).bind(' mouseleave',function() / / 하위 메뉴의 마우스 아웃 작업
{
$(this).children('ul').slideUp('fast')
}); ;