디자인팁

서브메뉴 네이게이션

페이지 정보

작성자 BSAA 작성일16-06-03 16:22 조회1,618회 댓글0건

첨부파일

본문

 

상단메뉴에 마우스 오버 하게되면 서브메뉴가 무빙으로 나오는 애니메이션 효과입니다.

 

샘플 사이트 보기

 

subMenuNavigation.html 파일 열어보시면

 

css : main_1.css

js : jquery.easing.1.3.js (애니메이션 무빙효과 소스), rolloverimg_png.js (마우스 롤 오버)DD_belatedPNG_0.0.8a-min.js (마우스 롤 오버)

 

 

제이쿼리 옵션

 

<script type="text/javascript">

 

var $mainMenu; // 메인메뉴를 감싸고 있는 div 

var $subMenu; // 서브메뉴를 감싸고 있는 div 

$(document).ready(function(e) {

$mainMenu=$("div.mainMenu");

$subMenu=$("div.subMenu");

$subMenu.hide(); // 초기에 모든 서브메뉴를 안보이게 

$mainMenu.bind("mouseenter", onOver); // 각메인메뉴에 마우스오면 onOver 함수 실행 

$("div.nav").bind("mouseleave", onOut); // 메뉴전체를 감싸고 있는 div.nav 에서 마우스아웃될때 모든 메인메뉴와 서브메뉴를 비활성화

      

    });

function onOver(){

mainOut(); // 기존에 활성화 되어있는 메인메뉴를 비활성화 적용 

subOut(); // 기존에 활성화 되어있는 서브메뉴를 비활성화 

mainOver($(this)) // 마우스를 올린 메인메뉴활성화 (매개변수활용)

subOver($(this));// 마우스를 올린 메인메뉴의 서브메뉴만 활성화 (매개변수활용)

}

function onOut(){ // 메뉴전체를 감싸고 있는 div.nav 에서 마우스아웃될때 모든 메인메뉴와 서브메뉴를 비활성화

mainOut(); 

subOut();

}

function mainOver(newMenu){

newMenu.children("p").stop(); // 에니메이션 충돌방지 ( 기존에니메이션은 멈춤 ) 

newMenu.children("p").animate({top:-23},200,"easeOutCubic");

// 마우스를 올린메인메뉴의 자식객체의 p테그(이미지를포함) 를 올려주면서 에니메이션 (활성화)

}

function mainOut(){

$mainMenu.children("p").stop();

$mainMenu.children("p").animate({top:0},200,"easeOutCubic");

// 기존에 활성화된 메인메뉴의 자식객체의 p테그(이미지를포함) 를 원위치로 내려주면서 에니메이션 (비활성화)

}

function subOver(newMenu){

newMenu.next().show(); // 마우스를 올린메뉴에 해당되는 서브메뉴만 보여줌 

newMenu.next().stop();

newMenu.next().animate({left:-30, opactiy:1},200,"easeOutCubic"); // 서브메뉴를 왼쪽으로 -30 만큼이동하면서 보여지는 에니메이션 

// 중요) 각메뉴 li를 기준으로 좌표를 지정했기 때문에 모든 서브메뉴의 좌표가 동일

}

function subOut(){

$subMenu.stop();

$subMenu.animate({left:0,opactiy:0},50,"easeOutCubic", function(){

// 서브메뉴를 오른쪽 0으로 다시원위치 하고 에니메이션이 끝나면 사라지게해줌 (사라지지않으면 다른서브메뉴와 겹침 )

$(this).hide();

});

}

// 함수를 한꺼번에 실행하면 

/*function onOver(){

$("div.mainMenu p").stop();

$("div.mainMenu p").animate({top:0},200,"easeOutCubic");

$("div.subMenu").stop();

$("div.subMenu").animate({left:0},200,"easeOutCubic", function(){

$(this).hide();

});

$(this).find("div.mainMenu p").stop();

$(this).find("div.mainMenu p").animate({top:-23},200,"easeOutCubic");

$(this).find("div.subMenu").show();

$(this).find("div.subMenu").stop();

$(this).find("div.subMenu").animate({left:-30},200,"easeOutCubic");

}

function onOut(){

$("div.mainMenu p").stop();

$("div.mainMenu p").animate({top:0},200,"easeOutCubic");

$("div.subMenu").stop();

$("div.subMenu").animate({left:0},200,"easeOutCubic", function(){

$(this).hide();

});

}*/

</script> 

 

 

html 소스는 subMenuNavigation.html​ 파일에 저장이 되있습니다.

 

 

 

댓글목록

등록된 댓글이 없습니다.