[CSS] 드롭다운 메뉴바 구현하기

위와 같은 느낌의 드롭다운 메뉴바를 구현해보았다

 

드롭다운 메뉴바 자체의 코드가 어려운 것은 아니었지만

1. 각 메뉴별로 submenu 개수가 달라도 밑에 빈 공간이 생기지 않고

2. 위에서 아래로 내려오는 애니메이션 효과

가 되는 드롭다운 메뉴바를 구현하고 싶어서 좀 더 찾아보았다

 

HTML 코드

    <nav class="navigation">

        <ul>

            <li>

                <a href="">소개</a>

                <ul class="submenu">

                    <li><a href="">행사개요</a></li>

                    <li><a href="">일정표</a></li>

                    <li><a href="">오시는길</a></li>

                </ul>

            </li>

            <li>

                <a href="">라인업</a>

                <ul class="submenu">

                    <li><a href="">MAIN STAGE</a></li>

                    <li><a href="">SUB STAGE</a></li>

                </ul>

            </li>

            <li>

                <a href="">프로그램</a>

                <ul class="submenu">

                    <li><a href="">MAIN STAGE</a></li>

                    <li><a href="">SUB STAGE</a></li>

                    <li><a href="">체험 프로그램</a></li>

                </ul>

            </li>

            <li>

                <a href="">갤러리</a>

                <ul class="submenu">

                    <li><a href="">SMF 2022</a></li>

                    <li><a href="">SMF 2021</a></li>

                    <li><a href="">SMF 2020</a></li>

                    <li><a href="">SMF 2019</a></li>

                </ul>

            </li>

            <li>

                <a href="">커뮤니티</a>

                <ul class="submenu">

                    <li><a href="">공지사항</a></li>

                    <li><a href="">문의하기</a></li>

                    <li><a href="">FAQ</a></li>

                </ul>

            </li>

        </ul>

    </nav>

 

HTML 코드는 그냥 보통의 드롭다운 메뉴바 형식으로 작성해주면 된다

 

CSS 코드

.navigation {

    background-color: #1e192c;

    width: 100vw;

    position: fixed;

    color: white;

    margin-top: 10px;

    text-align: center;

    z-index: 10;

}

.navigation>ul {

    width: 100vw;

    display: flex;

    flex-direction: row;

    align-items: center;

}

.navigation>ul>li:hover .submenu {

    max-height: 100vh;

}

.submenu {

    max-height: 0;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;

    position: absolute;

    transition: 0.5s ease-in-out;

}

너무 길어져서 필요한 부분만 잘랐다

 

transition 효과를 주기 위해서는 변화하는 값이 연속적이어야 하기 때문에

display:none; → display:block 이나 visibility:hidden; → visibility:visible; 로 변화할 때는 자연스럽게 값이 바뀌지 않는다

 

검색해보니 max-height를 이용하면 연속적으로 값을 변화시킬 수 있었다

따라서 submenu의 max-height를 0으로 맞춰두고, 마우스를 올렸을 때 max-height를 드롭다운 메뉴의 최대값 이상이 되게끔 맞춰주면 된다