레이아웃 메뉴탭1 - javascript

레이아웃 메뉴탭 만들기

완성화면

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

---

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

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

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

---

        window.onload = function () {
            const navList = document.querySelectorAll(".nav > ul > li");

            navList.forEach(function (navItem) {
                navItem.addEventListener("mouseover", function () {
                    this.querySelector(".submenu").style.height = "158px";
                })
            })

            navList.forEach(function (navItem) {
                navItem.addEventListener("mouseout", function () {
                    this.querySelector(".submenu").style.height = "0px";
                })
            })
        }

메뉴탭이 움직이기 위해선 필요한 javascript 입니다.🙌
이렇게 보면 막막해보일 수 있지만 한 줄씩 분석해서 흐름을 알면 이해하기 더욱 쉬워요!

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

$(function(){

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

    window.onload = function () {

• window.onload는 브라우저 창(window)에 대한 ‘로드 완료(load)’ 이벤트를 처리합니다.
  이 함수는 웹 페이지의 모든 구성 요소(이미지, 스크립트 파일 등)가 완전히 로드되고 난 후에 실행됩니다.
  여기서 정의된 함수는 익명 함수입니다.

        const navList = document.querySelectorAll(".nav > ul > li");

• document.querySelectorAll 메서드는 주어진 CSS 선택자에 일치하는 문서 내의 모든 요소를 NodeList 객체로 반환합니다.
  이 예에서 .nav > ul > li 선택자는 클래스가 nav인 요소의 직접 자식인 ul, 그리고 그 ul의 직접 자식인 모든 li 요소를 선택합니다.

        navList.forEach(function (navItem) {

• forEach 메서드는 주어진 함수를 배열의 각 요소에 대해 한 번씩 실행합니다.
  여기서 navList는 li 요소들의 컬렉션입니다.
  각 li 요소는 navItem이라는 매개변수로 함수에 전달됩니다.
  이 함수는 각 li 요소에 대해 실행됩니다.

            navItem.addEventListener("mouseover", function () {

• addEventListener 메서드는 지정된 요소에 이벤트 핸들러를 등록하는 데 사용됩니다.
  여기서는 각 navItem에 대해 mouseover 이벤트(마우스가 요소 위로 올라갔을 때 발생)가 발생하면 실행될 함수를 등록합니다.

                this.querySelector(".submenu").style.height = "158px";

• this 키워드는 현재 이벤트가 실행되는 요소, 즉 마우스 오버 이벤트가 발생한 navItem을 가리킵니다.
  querySelector(“.submenu”)는 이 navItem 내에서 클래스 이름이 submenu인 첫 번째 요소를 찾습니다.
  이 요소의 스타일 중 height 속성을 “158px”로 설정하여 서브메뉴를 표시합니다.

---

        navList.forEach(function (navItem) {

• 이 줄은 navList의 각 요소에 대해 또 다른 forEach 메서드를 호출하여 mouseout 이벤트(마우스가 요소에서 벗어났을 때 발생)를 처리합니다.

            navItem.addEventListener("mouseout", function () {

• mouseout 이벤트에 대한 리스너를 추가합니다. 마우스가 요소에서 벗어났을 때 실행될 함수를 설정합니다

                this.querySelector(".submenu").style.height = "0px";

• 여기에서도 this는 이벤트가 발생한 navItem을 가리키며, .submenu 클래스를 가진 자식 요소의 height 스타일을 “0px”로 설정합니다.
  이는 서브메뉴를 숨기는 효과를 나타냅니다.

---

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

다음에는 다른 유형탭을 준비하겠습니다! 🎈