[Web] 홈페이지 일자형 슬라이딩 메뉴 구현하기 (수직 메뉴바)

 홈페이지에서 수직 형태의 메뉴 바를 구현하는 방법을 알아봅니다.

 

[ Contents ]

 

 

1. HTML

    <aside>
      <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>
              <li><a href="#">서브4</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>
              <li><a href="#">서브4</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </aside>

 header 상단부가 아니라, 왼쪽이나 오른쪽 aside에 있는 메뉴 네비게이션 바 구현 방법을 알아봅니다.

 

 위처럼 일자형으로 된 메뉴 네이게이션 바 형태입니다.

 해당 메인 메뉴에 마우스 오버하면 서브메뉴가 나타나도록 css와 js를 짜봅니다.

 

 

2. CSS

aside nav {
  background: navy;
  width: 180px;
  margin: 10px 0 0 10px;
}

aside li {
  line-height: 40px;
  text-align: center;
}

.main_menu>li>a {
  color: white;
}

.sub_menu {
  background: gray;
}

.sub_menu li a {
  display: block;
  color: white;
}

.main_menu>li a:hover {
  background-color: orange;
  color: #333;
  display: block;
}

.sub_menu li a:hover {
  background-color: orange;
  color: #333;
}

.sub_menu {
  display: none;
}

 

 sub_menu는 display: none 속성을 줘서 숨김 상태로 만듭니다.

 ul - li 태그 자체가 수직 구조를 가지기 때문에, float이나 flex 속성을 따로 줄 필요가 없습니다.

 

반응형

 

3. Java Script

let mainMenu = $('.main_menu>li');
mainMenu.mouseover(function () {
  $(this).find('ul').stop().slideDown();
}).mouseout(function () {
  $(this).find('ul').stop().slideUp();
});

 

 제이쿼리로 서브 메뉴를 펼치고, 접는 기능을 구현합니다.

 전체 서브메뉴가 다 펼쳐지는 게 아니라, 해당 메인 메뉴의 서브메뉴만 펼쳐지고 닫혀야 합니다. 그래서 $(this)를 이용해서 해당 ul 태그만 slideDown(), slideUp() 합니다.