레이아웃 메뉴탭2 - jquery

Posted Apr 28, 2024 Updated May 3, 2024

By kimyih 4 min read

레이아웃 메뉴탭 만들기

완성화면

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

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

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

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

  
      $(function () {
             $(".nav> ul > li").mouseover(function () {
                 $(".nav > ul > li > ul").stop().slideDown();
             });
             $(".nav > ul > li").mouseout(function () {
                 $(".nav> ul > li > ul").stop().slideUp();
             });
         });

메뉴탭이 움직이기 위해선 필요한 jquery 입니다

바로 코드를 분석해보겠습니다.

  
$(function () {

$(function() { … });는 jQuery에서 문서가 완전히 로드된 후 코드가 실행되도록 보장하는 방법입니다.
이것은 JavaScript의 window.onload와 유사하며, 모든 HTML 요소와 관련 자원이 로드된 후에 내부의 함수가 실행됩니다.

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

$(“.nav > ul > li”)는 jQuery 선택자로서, 클래스가 nav인 요소의 바로 아래에 있는 ul 요소들, 그리고 그 ul 요소들의 바로 아래에 있는 li 요소들을 선택합니다.
mouseover() 함수는 마우스 포인터가 이 li 요소들 위로 올라갔을 때 이벤트를 발생시키고 함수를 호출합니다.

  
        $(".nav > ul > li > ul").stop().slideDown();

$(“.nav > ul > li > ul”) 선택자는 각 li 요소 안에 있는 ul 요소를 찾습니다. stop() 메소드는 해당 요소에 현재 진행 중인 모든 애니메이션을 즉시 멈춥니다.
이는 애니메이션 큐가 쌓이는 것을 방지하여 여러 번 마우스 오버할 때 발생할 수 있는 불필요한 애니메이션 반복을 방지합니다.
slideDown() 메소드는 ul 요소를 아래로 슬라이딩하면서 표시합니다.
이는 서브메뉴가 아래로 내려오면서 보여지는 시각적 효과를 생성합니다.

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

mouseout() 함수는 마우스 포인터가 li 요소에서 벗어났을 때 이벤트를 발생시키고 함수를 호출합니다.
이것은 마우스가 메뉴 항목에서 벗어났을 때 작동합니다.

  
        $(".nav > ul > li > ul").stop().slideUp();

여기서도 $(“.nav > ul > li > ul”) 선택자를 사용하여 각 li 요소의 자식 ul을 선택합니다.
stop() 메서드로 애니메이션을 멈추고, slideUp() 메서드로 ul 요소를 위로 슬라이딩하면서 숨깁니다.
이는 서브메뉴가 위로 접히면서 숨겨지는 시각적 효과를 생성합니다.

이렇게 하면 메인메뉴 하나에 마우스를 갖다대면 그 아래로 서브메뉴가 모두 다 나오는 형태입니다!

다음번엔 javascript 를 분석해보겠습니다!

layout

note

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

레이아웃 메뉴탭 만들기

Trending Tags