DIV 메뉴 레이어 구현 code_javascript 기술-JS 튜토리얼-php.cn

DIV 메뉴 레이어 구현 code_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

풀어 주다： 2016-05-16 18:15:54

원래의

1222명이 탐색했습니다.

QQ몰 카테고리 메뉴를 스크린샷으로 찍어주셨는데요, 효과는 이렇습니다.
DIV 메뉴 레이어 구현 code_javascript 기술
가져보니 어! 저희 블로그 공원도 이런데요! 저는 이 효과를 직접 해본 적이 없어서 그냥 직접 해보고 싶었어요! (저는 아티스트는 아니지만 js에 대해 조금 알고 있습니다!)
1. 분석:
1. 오른쪽의 큰 카테고리는 레이어 아래에 divMenuContent로 표시되어야 합니다.
2. 왼쪽에 마우스가 위로 움직이는 것이 레이어이기도 하고, 그 아래에는 divMenuItem
으로 표현되어 있습니다. 질문: 그림과 같이 표현하려면 어떻게 해야 하나요? 좌우측이 일체형처럼 보이죠! 그래서 divMenuItem의 오른쪽은 아무것도 없고 z축이 divMenuContent보다 높아서 divMenuContent의 테두리만 누르면 된다고 생각했어요!
두 레이어의 스타일은 다음과 같습니다.

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

 
# divMenuItem 
{ 
위치:absolute; 
z-index:99; 
너비:147px; 
테두리:3px solid #963 ; 
경계-오른쪽:0px; 
디스플레이:없음 
} 
{ 
디스플레이:없음; 위치:절대값:98; 
폭:505px; 
경계:3px 
배경색:#FC9; } 

 
그런 다음 테스트할 페이지를 레이아웃합니다. 




코드를 복사합니다. 

코드는 다음과 같습니다.

< ;body>

cccccccdccccc

🎜>< ;li> eeeeeeeeeeeeee

ffffffffffff

메뉴 스타일 설정:

복사 코드

코드는 다음과 같습니다:

body
{
margin:0px;

padding:0px>}
.menu
{

list-style-type:none; float:left; 테두리:1px 녹색 너비:150px; 메뉴 li { 높이:25px; 배경색:#CCC;

테두리:1px 단색 빨간색

} 

주요 구현: 

코드 복사

 코드는 다음과 같습니다.

$("#menu li").mouseenter( function() 
{ 
var offset=$(this).offset(); 
$("# divMenuItem") 
.offset({ 
top:offset.top,left: offset.left

})
.html($(this).html())
.show( )

$("#divMenuContent") .offset({ top:offset.top,left:offset.left $(this).width()-1 }) .show() })

주요 이슈 여기 포지셔닝이 있습니다! 논리적으로는 맞지만 한 번 위로 이동할 때 일반 표시를 제외하고 매번 위로 이동할 때 첫 번째 표시가 약간 어긋나는 것을 볼 수 있습니다! 나는 아직 여기서 무슨 일이 일어나고 있는지 파악하지 못했습니다! 나중에 show() 다음에 offset()만 추가하면 괜찮았으면 좋겠습니다. 
수정된 JS는 다음과 같습니다. 

코드 복사

 코드는 다음과 같습니다.

$( function(){ 
$("#divMenuItem,#divMenuContent").mouseout(function(e) 
{ 
if($(e.toElement).parent().attr(" id") !="menu" && $(e.toElement).attr("id")!="divMenuContent") 
{

$("#divMenuItem").hide();
$(" #divMenuContent").hide();
}
})

$("#menu li").mouseenter(function() { var offset=$( this).offset(); $("#divMenuItem") .offset({ top:offset.top,left:offset.left })

.html($ (this) .html())

.show()
.offset({
top:offset.top,left:offset.left
})
$("#divMenuContent ")
.offset({
top:offset.top,left:offset.left $(this).width()-1
})
.show()
/* .offset( {
top:offset.top,left:offset.left $(this).width()-1
});*/
.offset({
top:$( "#메뉴 li").first().offset().top,left:offset.left $(this).width()-1
})
})
})

내부에 주석이 있습니다. offset() 부분과 그것과 아래의 offset()은 두 가지 효과이며, 현재 렌더링은 다음과 같습니다.