JQuery는 멋진 수평 드롭다운 menu_jquery를 구현합니다.
- WBOY원래의
- 2016-05-16 17:08:171589검색
예전에는 웹사이트에서 메뉴가 표시되는 것을 자주 보았는데, 마우스를 위로 올리면 드롭다운 효과가 나타나는데, JQuery 영상을 보니 구현하기가 꽤 쉽다는 것을 알 수 있었습니다. 
Html에서는
- 태그를 통해 필수 요소를 작성합니다.
-
메뉴 항목 1 🎜>< ;a href="#"> 하위 메뉴 항목 11
; /a>
-
하위 메뉴 항목 21
< /li> -
하위 메뉴 항목 22 -
메뉴 항목 3 ;
하위 메뉴 항목 31 - 는 메뉴 항목 1, 메뉴 항목 2, 메뉴 항목 3입니다. 드롭다운 메뉴는 각각 각 기본 메뉴 아래에 있습니다. 한 레이어의 메인 메뉴는 Li에 배치되며, 하위 메뉴가 있는 경우에는 이 메인 메뉴의 Li에 새로운 ul을 생성한 후 순차적으로 중첩하여 다층 메뉴를 구성합니다.
CSS
코드 복사
코드는 다음과 같습니다.
ul, li{
/*ul 및 li의 점 지우기*/
코드 복사 코드는 다음과 같습니다.
ul>
메뉴 항목 2
항목 32
🎜>
가장 바깥쪽의
- 요소
}
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(){ 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"));
$(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의 하위 노드 중에서 노드만 선택한다는 것입니다.
}else{
mainNode.css("Background-image","url('images/collapsed.gif')") ;
}
}
}
이 멋진 드롭다운 메뉴가 완성되었습니다. 구현은 매우 간단하지만 내부의 작은 지식 포인트는 매우 단편적입니다. 예: .main a와 .main>a의 차이점은 전자는 .main 클래스의 요소 내용을 사용하여 모든 노드를 선택하는 반면, 후자는 .main의 하위 노드 중에서 노드만 선택한다는 것입니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.