레이아웃 메뉴탭1 - jquery

Posted Apr 27, 2024 Updated Apr 30, 2024

By kimyih 3 min read

레이아웃 메뉴탭 만들기

완성화면

큰 메뉴를 하나씩 선택할 때 마다 서브메뉴들이 한줄씩 나오는 탭메뉴입니다.
jquery와 javascript 를 사용하여 이 애니메이션을 할 수 있습니다. javascrip / jquery 를 따로따로 작성하여 한 줄씩 분석해보겠습니다!

탭 메뉴를 만들기 위해 구조를 간단하게 설명해드릴게요!

위 사진과 아래 사진을 같은 색으로 구분해놨습니다!

구조는 간단하게 이렇게 봐주시면 됩니다!

  
        $(function(){
            //선택자
            $(".nav > ul > li").mouseover(function(){
                $(this).find(".submenu").stop().slideDown();
            });
            $(".nav > ul > li").mouseout(function(){
                $(this).find(".submenu").stop().slideUp ();
            });   

이 코드를 하나씩 분석해서 이해 할 수 있도록 알아보도록 하겠습니다!

  
$(function(){

$(function(){ … });은 jQuery에서 페이지의 모든 HTML, JavaScript, CSS가 로드된 후 실행되어야 하는 코드를 감싸는 방법입니다. 이는 문서가 준비되었을 때 함수 내의 코드가 실행되도록 합니다.

첫 번째 이벤트 핸들러: 서브메뉴를 보여주기

  
$(".nav > ul > li").mouseover(function(){

이 줄은 클래스가 nav인 요소의 직접 자식인 ul, 그리고 그 자식인 li 요소들을 선택합니다. .mouseover() 메서드는 마우스가 이 요소들 위에 올라가면 지정된 함수를 실행하도록 설정합니다.

  
    $(this).find(".submenu").stop().slideDown();
});

$(this).find(“.submenu”)는 현재 마우스가 올라간 li 요소 내에서 클래스가 submenu인 자식 요소를 찾습니다.
.stop() 메서드는 현재 진행 중인 애니메이션을 즉시 정지시킵니다. 이는 애니메이션 중첩을 방지합니다.
.slideDown()은 선택된 요소를 점차적으로 펼쳐 보이게 하는 애니메이션을 추가합니다.
이로써 서브메뉴가 아래로 슬라이드되며 펼쳐집니다.

두 번째 이벤트 핸들러: 서브메뉴 숨기기

  
$(".nav > ul > li").mouseout(function(){

mouseout 이벤트는 마우스가 요소 밖으로 벗어날 때 발생합니다.

  
    $(this).find(".submenu").stop().slideUp();
});

이 코드 라인도 마찬가지로 .find(“.submenu”)를 사용하여 서브메뉴를 찾습니다.
.stop() 메서드로 기존 애니메이션을 중단시키고,
.slideUp() 메서드는 서브메뉴를 점차적으로 숨기는 애니메이션을 추가합니다. 서브메뉴가 위로 슬라이드되며 숨겨집니다.

코드를 한 줄 씩 흐름을 알면 jquery 적기가 더 수월합니다 ! 다음엔 javascript 방식으로 알려드리겠습니다!

note

This post is licensed under CC BY 4.0 by the author.

레이아웃 메뉴탭 만들기

Trending Tags