[Web] 슬라이드 메뉴 구현하는 방법 (전체 서브메뉴 슬라이딩)

 홈페이지에서 상단 네비게이션 메뉴 바에서 마우스를 올려뒀을 때, 하단 메뉴가 슬라이딩되게 만드는 법을 다룹니다.

 

[ Contents ]

 

 

1. HTML

 우리가 일반적으로 볼 수 있는 메뉴 형태입니다.

 위 메뉴는 아래와 같이 틀을 짤 수 있습니다.

 

<nav>
                <ul class="main_menu">
                    <li><a href="#">메인메뉴1</a>
                        <ul class="sub_menu">
                            <li><a href="#">서브1</a></li>
                            <li><a href="#">서브2</a></li>
                            <li><a href="#">서브3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">메인메뉴2</a>
                        <ul class="sub_menu">
                            <li><a href="#">서브1</a></li>
                            <li><a href="#">서브2</a></li>
                            <li><a href="#">서브3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">메인메뉴3</a>
                        <ul class="sub_menu">
                            <li><a href="#">서브1</a></li>
                            <li><a href="#">서브2</a></li>
                            <li><a href="#">서브3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">메인메뉴4</a>
                        <ul class="sub_menu">
                            <li><a href="#">서브1</a></li>
                            <li><a href="#">서브2</a></li>
                            <li><a href="#">서브3</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>

 nav안에 main_manu 클래스 ul를 짜고, 그 안에 sub_menu 클래스 ul를 짭니다.

 이중 ul 구조를 가지고 있죠.

 

 

2. CSS

header nav{
    width: 720px;
    margin-top: 30px;
    z-index: 1;
}

.main_menu{
    display: flex;
}

nav>ul>li{
    position: relative;
    line-height: 40px;
    width: 180px;
    text-align: center;
}

nav>ul>li a{
    color: #fff;
    display: block;
    background: #333;
    transition: 0.5s;
}


nav ul ul {
    position: absolute;
    left: 0;
    width: 100%;
    display: none;  /* 숨기기 */
}

nav ul ul li a{
    background: #fff;
    display: block;
    color: #333;
    transition: 0.5s;
}

nav>ul>li a:hover{
    background: #FCA149;
}

nav ul ul li a:hover{
    background: #49d2fd;
}

 메뉴바가 가장 상위에 표시되야 하므로, nav의 z-index를 1로 설정해줍니다.

 ul 태그의 특성상 li 태그가 아래로 나열되므로 main_menu는 display: flex 속성을 통해 수평 배열로 바꿉니다.

 sub_menu는 평소에는 보이지 않아야 하므로, display: none 으로 숨김 처리합니다.

 배경은 a태그에 뒀고, 마우스 hover 시 색깔이 변하도록 설정합니다.

 

 

반응형

 

3. Java script

// 메뉴 슬라이드 기능
let mainMenu = $('.main_menu > li');
let subMenu = mainMenu.find('ul');

mainMenu.mouseover(function(){
    subMenu.stop().slideDown();
}).mouseout(function(){
    subMenu.stop().slideUp();
})

 메인메뉴에 마우스 over 시, 하단 메뉴가 펼쳐지고

 마우스 out 시, 하단 메뉴가 접히도록 JS코드를 작성합니다.

 제이쿼리를 이용하면 간단하게 메뉴 동작을 설정할 수 있습니다.

 

 

 평소에는 위처럼 메뉴가 접혀있지만...

 

 마우스가 메뉴에 있을 시, 서브메뉴가 펼쳐지는 형태로 구현합니다.