마우스 오버 시, 메뉴탭 구성하기

마우스 오버했을 때 메뉴탭이 각각 나오도록 만들기

상단 메뉴에 마우스 오버했을 때 메뉴탭이 각각 나오도록, 혹은 한번에 나오도록 만들어 보겠습니다.

 

HTML (메뉴바만) 작성하기

<div class="nav">
    <ul>
        <li>
            <a href="#">메뉴1</a>
            <ul class="submenu">
                <li><a href="#">서브메뉴1-1</a></li>
                <li><a href="#">서브메뉴1-2</a></li>
                <li><a href="#">서브메뉴1-3</a></li>
                <li><a href="#">서브메뉴1-4</a></li>
            </ul>
        </li>
        <li>
            <a href="#">메뉴2</a>
            <ul class="submenu">
                <li><a href="#">서브메뉴2-1</a></li>
                <li><a href="#">서브메뉴2-2</a></li>
                <li><a href="#">서브메뉴2-3</a></li>
                <li><a href="#">서브메뉴2-4</a></li>
            </ul>
        </li>
        <li>
            <a href="#">메뉴3</a>
            <ul class="submenu">
                <li><a href="#">서브메뉴3-1</a></li>
                <li><a href="#">서브메뉴3-2</a></li>
                <li><a href="#">서브메뉴3-3</a></li>
                <li><a href="#">서브메뉴3-4</a></li>
            </ul>
        </li>
        <li>
            <a href="#">메뉴4</a>
            <ul class="submenu">
                <li><a href="#">서브메뉴4-1</a></li>
                <li><a href="#">서브메뉴4-2</a></li>
                <li><a href="#">서브메뉴4-3</a></li>
                <li><a href="#">서브메뉴4-4</a></li>
            </ul>
        </li>
    </ul>
</div>

HTML 정리해보기

• 각각의 메뉴와 서브메뉴가 하나의 <ul> 속 4개의 <li>안에 들어있는 구조입니다.
• 각각의 서브메뉴는 한개의 <ul>과 4개의 <li>로 구성했습니다.

CSS 작성하기

.nav {
    width: 70%;
    background-color: #85d47e;
    padding: 30px 40px;
}
.nav > ul {
    display: flex;
    justify-content: right;
}
.nav > ul > li {
    position: relative;
}
.nav > ul > li > a {
    background-color: #84c482;
    display: block;
    padding: 10px 40px;
    transition: all 0.2s;
}
.nav > ul > li > a:hover {
    background-color: #56af4d;
}
.nav > ul > li > ul {
    position: absolute;
    left: 0;
    top: 42px;
    background-color: #ccc;
    width: 100%;
    display: none;
}
.nav > ul > li > ul > li > a {
    padding: 10px;
    display: block;
    transition: all 0.2s;
}
.nav > ul > li > ul > li > a:hover {
    background-color: #eafcbb;
}

CSS 정리해보기

• 메뉴바를 justify-content: right 속성을 통해 오른쪽 정렬해주었습니다.
• 각각의 서브메뉴가 들어있는 상위 <ul>태그는 position: absolute로 위치를 잡아주었습니다.

Javascript 작성하기

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

submenuList.forEach(li => {
    li.addEventListener("mouseover", () => {
        li.querySelectorAll("ul").forEach((el) => {
            el.style.display = "block";
        })
    });
    li.addEventListener("mouseout", () => {
        li.querySelectorAll("ul").forEach((el) => {
            el.style.display = "none";
        })
    });
});

Javascript 정리해보기

• 메뉴와 서브메뉴의 상위박스인 li태그를 선택자로 잡아 forEach를 사용하여 각각의 li태그에게 mouseover에 대한 함수를 부여합니다.
• 각각의 li (submenuList의 요소) 안에 있는 ul태그에 다시 forEach를 사용하여 스타일속성 display: block을 줍니다.
• mouseout에 대한 함수로도 같은 방법으로 스타일속성을 display: none으로 바꾸어줍니다.

 

마우스 오버했을 때 메뉴탭이 한번에 나오도록 만들기

 

Javascript 작성하기

const submenuList = document.querySelectorAll(".nav > ul > li");
const subMenu = document.querySelectorAll(".submenu");

submenuList.forEach(li => {
    li.addEventListener("mouseover", () => {
        subMenu.forEach(el => {
            el.style.display = "block";
        });
    });
    li.addEventListener("mouseout", () => {
        subMenu.forEach(el => {
            el.style.display = "none";
        });
    });
});

Javascript 정리해보기

• 마찬가지로 상위 li의 선택자를 만들어 forEach를 사용해 각각의 li에게 mouseover에 대한 함수를 적용합니다.
• 이번에는 class가 submenu인 요소 전체를 선택자로 만들어 forEach를 사용해 display: block의 스타일 속성을 줍니다.
• mouseout했을 때에도 같은 방법으로 스타일 속성 display: none을 부여합니다.

 

 

 

이상으로 마우스 오버했을 때 나오는 메뉴탭을 한번 만들어 보았습니다 !