JQuery는 멋진 수평 드롭다운 menu_jquery를 구현합니다.

예전에는 웹사이트에서 메뉴가 표시되는 것을 자주 보았는데, 마우스를 위로 올리면 드롭다운 효과가 나타나는데, JQuery 영상을 보니 구현하기가 꽤 쉽다는 것을 알 수 있었습니다.

Html에서는

태그를 통해 필수 요소를 작성합니다.

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

ul>


메뉴 항목 1 🎜>< ;a href="#"> 하위 메뉴 항목 11




; /a>



메뉴 항목 2



• 
  하위 메뉴 항목 21
  
  
• 
  하위 메뉴 항목 22
  
;/li>


메뉴 항목 3 ;
하위 메뉴 항목 31


항목 32

🎜>
가장 바깥쪽의
요소
• 는 메뉴 항목 1, 메뉴 항목 2, 메뉴 항목 3입니다. 드롭다운 메뉴는 각각 각 기본 메뉴 아래에 있습니다. 한 레이어의 메인 메뉴는 Li에 배치되며, 하위 메뉴가 있는 경우에는 이 메인 메뉴의 Li에 새로운 ul을 생성한 후 순차적으로 중첩하여 다층 메뉴를 구성합니다.
  
  CSS
  
  
  
  
  코드 복사
  
  
  코드는 다음과 같습니다.
  
  
  ul, li{
  /*ul 및 li의 점 지우기*/
list-style:none;
}
ul{
/*하위 메뉴의 들여쓰기 값 지우기*/
padding:0;
margin:0; } .hmain{ background-image:url(../images/title.gif); front background-repeat:repeat-x; width:120px;
}
li{
background-color:#EEEEEE; //배경 이미지가 배경색을 덮습니다
}
a{
//모든 밑줄 취소
text-design:none;
padding-left:20px;
display:block; 🎜> 디스플레이:인라인 블록;
너비:100px;
패딩-하단:3px;
.hmain a{
색상:흰색 ;
배경-이미지:url(../images/collapsed.gif)
배경-반복:no-repeat;
배경 위치:3px 센터; li a {
색상:검정색;
배경 이미지:없음
.hmain ul{
표시:none;
.hmain{
float: left;
margin-right:1px;
}



jquery.js 및 menu.js가 참조됩니다. HTML에서 menu.js는 다음과 같습니다.




코드 복사


코드는 다음과 같습니다.


$(document).ready( function(){
//페이지의 DOM이 로드되면 실행된 코드
$(".main> a,.hmain a").click( function(){
//메인 메뉴 항목에 해당하는 하위 메뉴 항목을 찾았습니다
var ulNode=$(this).next("ul")
ulNode.slideToggle()
changeIcon( $(this))
} );
$(".hmain").hover(function(){
$(this).children ("ul").slideToggle();
changeIcon($(this).children( "a"));
},function(){
$(this).children("ul").slideToggle()
changeIcon($ (this).children("a") );
}); }) /* *메인 메뉴 표시 아이콘 수정*/ functionchangeIcon( mainNode){ if(mainNode) {
if(mainNode.css("Background-image").indexOf("collapsed.gif")>=0){
mainNode.css("배경 -image","url('images/expanded.gif')");
}else{
mainNode.css("Background-image","url('images/collapsed.gif')") ;
}
}
}


이 멋진 드롭다운 메뉴가 완성되었습니다. 구현은 매우 간단하지만 내부의 작은 지식 포인트는 매우 단편적입니다. 예: .main a와 .main>a의 차이점은 전자는 .main 클래스의 요소 내용을 사용하여 모든 노드를 선택하는 반면, 후자는 .main의 하위 노드 중에서 노드만 선택한다는 것입니다.