[jQeury / slideToggle] 3단 메뉴 클릭하여 펼치기 / 접기

 

jQuery 연습
3단 메뉴 slideToggle로 펼치기/접기

---

 메뉴 슬라이드라고는 마우스 올리면 튀어나오고 치우면 숨겨주는 것밖에 모르고 있었던 나... 이번엔 메뉴를 클릭하면 나오게 구현하고 싶은데 2단 메뉴는 그렇다 치고 3단을 만들려니 이유도 모르게 자꾸 꼬여서 하루종일 머리를 굴렸다. slideToggle도 처음에 써봤을 때 자꾸 서브 메뉴를 누르면 엉뚱한 메뉴까지 말려들어가버려서 if문으로 한참 뻘짓하다가 드디어 방법을 찾았다.

<nav>
  <ul id="main_menu">
    <li><a href="#">WEB</a>
    <ul class="snd_menu sub_menu">
      <li><a href="#">Design</a>
        <ul class="trd_menu sub_menu">
          <li><a href="#">Hue</a></li>
          <li><a href="#">Saturation</a></li>
          <li><a href="#">Value</a></li>
      </ul>
      </li>
      <li><a href="#">Share</a></li>
    </ul>
    </li>
    <li><a href="#">INTERIOR</a></li>
    <li><a href="#">MARKETING</a></li>
    <li><a href="#">POSTER</a></li>
  </ul>
</nav>

3단 메뉴 HTML 구조

nav {
  width: 150px;
}
ul { padding: 0; }
li {
  list-style: none;
  line-height: 34px;
}
a {
  display: block; /* 범위 확장 */
  text-decoration: none;
  color: #616161;
  text-align: center;
}
.snd_menu { background: #efefef; }
.trd_menu { background: #ddd; }
.sub_menu { display: none; } /* 서브메뉴들 숨김 */

.selec { background: #c45; color: #efefef; } /* 임시 클래스(선택) */

 CSS. 스타일이 중요한 게 아니므로 최대한 간략하게! 정리해보았다. 여기서 신경쓸만한 건 서브메뉴에 sub_menu라는 클래스를 줘서 숨겨주는 것.
 <a> 태그에는 display: block; 속성을 넣어준다. 저게 없다고 작동이 안 되는 건 아니지만 제이쿼리에서 선택자로 <a> 태그를 가져올 거라 block 속성으로 li 넓이만큼 확장시켜주면 사용자 입장에서 좀더 자연스럽게 느껴질 것이다. 그리고 메뉴가 선택되었을 때 나올 스타일을 구상해서 임시 클래스를 만들어주었다.

$(document).ready(function(){
  
  //메뉴 슬라이드
  $('#main_menu > li > a').click(function(){
    $(this).next($('.snd_menu')).slideToggle('fast');
  })
  $('.snd_menu > li > a').click(function(e){
    e.stopPropagation();
    $(this).next($('.trd_menu')).slideToggle('fast');
  })
  
  // 버튼 클릭 시 스타일 변경
  $('li > a').focus(function(){
    $(this).addClass('selec');
  })
  $("li > a").blur(function(){
    $(this).removeClass('selec');
  })
  
})

 제이쿼리. <li> 태그에 직접적으로 달면 실행이 안 된다... 방법은 계속 찾아보는 중. 그게 되면 <li>를 클릭했을때 메뉴가 내려가고 <a> 태그를 선택하면 해당 메뉴로 페이지가 이동하는 코드를 짜고 싶다.
 3단 메뉴를 펼치려고 2단 메뉴를 클릭할 때 1단의 slideToggle에 영향을 주는 것을 방지하기 위해 e.stopPropagation(); 이걸 붙여준다. focus()와 blur()로 선택 메뉴 꾸며주는 건 덤. 사실 저것도 대충 갖다 박은 거라 실제로 페이지에 적용해보면 좀 부자연스럽다. 콘텐츠를 누르면 메뉴의 포커스가 사라져서 붕 뜬다든지.

 다른 메뉴를 클릭하면 열려있던 메뉴가 닫히는 등의 기능은 없다. 나도 지금 당장 필요하진 않아서 안 넣었다. 단순히 리스트를 나열하고 보여주는 용도로 사용하려고 만들었기 때문에...ㅎㅎ

 

See the Pen LYWjypE by yee0 (@yee0) on CodePen.