JQuery는 마우스 스크롤을 구현하여 탐색 드롭다운 list_jquery를 표시합니다.

웹사이트 네비게이션 바에 많은 항목이 있을 때, 우리는 종종 동일한 레벨 디렉토리의 열을 먼저 숨깁니다. 사용자의 마우스를 롤오버할 때 표시됩니다. 자바스크립트로 구현된 네비게이션 바 드롭다운 목록입니다. 에디터가 차근차근 설명해줄 거예요. 이를 구현하기 위해 Javascript 프레임워크인 Jquery를 사용한다는 점은 주목할 가치가 있습니다. 따라서 Jquery를 사용하실 때에는 반드시 다운로드를 하셔야 합니다.

HTML 코드를 먼저 작성하세요

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

테스트 웹페이지


여기서 CSS와 JS 파일을 별도로 외부 파일에 넣습니다.

layout.css 파일의 코드는

코드 복사

코드는 다음과 같습니다. @ CHARSET "GBK"; body{ font:12px Arial,Verdana ul{

margin:0px

>목록 스타일 유형:없음;
#it{
여백:0px;
높이:25px; text-align:center ;
line-height:25px;
배경:검정색
테두리:1px 단색 흰색; 🎜>너비:80px;
높이:25px;
text-align:center;
cursor:pointer; 검정색;
테두리:1px 단색 흰색;
.highLight{
너비:80px;
배경:흰색
테두리:1px ;
color :black;
}


여기서 JS 파일을 설명하는 것이 중요합니다.




코드 복사


코드는 다음과 같습니다.


$(document).ready(function ( ){
$('#ul').hide(); //드롭다운 목록을 숨기려면 페이지를 엽니다.
$('#it').hover( //마우스를 위로 슬라이드할 때 탐색 열
function(){
$('#ul').show(); //드롭다운 목록 표시
$(this).css({'color':'red', 'Background-color':'orange'}); // 시선을 사로잡는 탐색 열 스타일 설정
},
function(){
$('#ul').hide(); //마우스를 멀리 이동한 후 드롭다운 목록 숨기기

}
)
$('#ul').hover( //드롭다운 목록 자체도 표시되어야 합니다. 드롭다운 목록을 클릭할 수 없도록 마우스를 그 위로 밀어 넣습니다.

function(){ $('#ul') .show() }, function(){ $('#ul').hide(); $('#it').css({'color': 'white','ground-color':'black'}); 마우스가 드롭다운 목록에서 멀어지면 탐색 모음 스타일도 지워집니다. }

)

$('li'). hover( //드롭다운 목록 위로 마우스를 이동합니다. 현재 열 스타일을 변경하려면
function(){
$(this).css({'color':'red','ground-color':'orange'} )
}; 🎜>function(){
$(this).css({'color':'white','ground-color':'black'})
}
); );


현재 웹사이트 편집상의 문제로 인해 사진 업로드가 불가능할 경우, 먼저 로컬에서 테스트하여 효과를 확인하실 수 있습니다.