jQuery 아코디언 메뉴, 사이드바 메뉴 slideUp, slideDown, accordion menu

jQuery로 만든 초간단 아코디언 메뉴입니다.

다운 버튼을 누르면 display:none 시켜놓은 대메뉴에 

포함된 서브메뉴가 자연스럽게 슬라이드 다운되며 나옵니다.

 

accordion menu

내용도 간단하고 소스도 단순하니 긴 설명없이 소스 올려두겠습니다.

HTML 소스 입니다.

<div class="accordion">
  <div class="cate">
    <span class="menu">
      <a href="#" class="menulink">HELLO</a>
      <a href="javascript:void(0);" class="subopen"></a>
    </span>
      <ul>
        <li>hello1</li>
        <li>hello2</li>
        <li>hello3</li>
        <li>hello4</li>
        <li>hello5</li>
        <li>hello6</li>
      </ul>
  </div>
  <div class="cate">
    <span class="menu">
      <a href="#" class="menulink">GOODBYE</a>
      <a href="javascript:void(0);" class="subopen"></a>
    </span>
      <ul>
        <li>bye1</li>
        <li>bye2</li>
        <li>bye3</li>
      </ul>
  </div>
    <div class="cate">
    <span class="menu">
      <a href="#" class="menulink">GOODNIGHT</a>
      <a href="javascript:void(0);" class="subopen"></a>
    </span>
      <ul>
        <li>goodnight1</li>
        <li>goodnight2</li>
        <li>goodnight3</li>
      </ul>
  </div>
</div>

 

 

CSS 소스입니다.

body{ padding:50px; }
.cate{ 
  width:300px;
  position:relative;
  border-style:solid;
  border-width:1px 1px 0 1px;
  border-color:#000;
}
.cate:last-child{
  border-bottom:1px solid #000;
}
.cate .menu{
  display:block;
  position:relative;
  width:100%;
  background:gray;
  height:80px;
}
.cate .menu .menulink{
  display:block;
  color:#fff;
  text-decoration:none;
  width:70%;
  padding-left:15px;
  line-height:80px;
}
.cate .menu .subopen{
  position:absolute;
  width:8px;
  height:8px;
  right:15px;
  padding:0;
  top:0;
  bottom:0;
  margin:auto;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
  transform:rotate(45deg);
}

.cate ul li{
  padding:5px 10px;
}
.cate ul li:first-child{
  padding-top:20px;
}
.cate ul li:last-child{
  padding-bottom:20px;
}

 

마지막으로 JS소스입니다.

jQuery로 작성한 소스이므로 head 태그 범위안에 jquery.js 파일 아래 넣으시길 바랍니다.

저는 jquery 1.4.4 버전으로 작업했습니다.

 

( function( $ ) {
  $('.cate ul').hide();
  $('.cate .menu .subopen').click(function() {
    if($(this).hasClass('active')){
       $(this).parent().next().slideUp('slow');
       $(this).removeClass('active');
    }else{
      $('.accordion').find('.active').parent().next().slideUp('slow');
      $('.accordion').find('.active').removeClass('active');
      $(this).parent().next().slideDown('slow');
      $(this).addClass('active');
    }     
   
   });
})( jQuery );