제이쿼리 이용해서 메뉴를 접었다 폈다 하기

제이쿼리 이용해서 메뉴를 접었다 폈다 하기

 

많은 웹들을 보면서 좋은, 그리고 편리한 기능인 메뉴를 접었다 폈다 할 수 있는 기능을 과연 제이쿼리로 구현할 수 있을지 자료도 검색하면서 배우는 중입니다.

개발자들이 올려놓은 좋은 자료들을 공유해서 함께 문제를 해결해 보자구요.~~

위의 '더보기'를 클릭하면 아래의 리스트가 나오는 것을 제이쿼리 html 그리고 css 3가지를 이용해서 만드는 과정입니다.

1번째 html 코드

<span class="more">
  <span class="blind">더보기 V</span>
</span>
<div class="board">
  <ul class="list">
    <li>가계부</li>
    <li>날씨</li>
    <li>네이버 예약</li>
    <li>네이버 캐스트</li>
    <li>네이버 클라우드</li>
  </ul>
  <ul class="list">
    <li>만화 / 웹툰</li>
    <li>매거진캐스트</li>
    <li>메모</li>
    <li>뮤직</li>
    <li>부동산</li>
  </ul>
  <ul class="list">
    <li>영화</li>
    <li>오디오클립</li>
    <li>오피스</li>
    <li>웹소설</li>
    <li>자동차</li>
  </ul>
</div>

2. css 파일

.more {
  display:block;
  width: 55px;
  height: 16px;
  background-image:url('https://s.pstatic.net/static/www/img/2017/sp_nav_v170523.png');
  background-position: 0 -78px;
}

.blind {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  width: 1px;
  height: 1px;
}

.more:hover, .close:hover {
  cursor:pointer;
}

.close {
  display:block;
  background-image:url('https://s.pstatic.net/static/www/img/2017/sp_nav_v170523.png');
  width: 42px;
  height: 16px;
  background-position: -166px -78px;
}

.board {
  font-family:'돋움';
  font-size:13px;
  position:absolute;
  top:30px;
  width:410px;
  height:135px;
  background:pink;
  visibility:hidden;
}

.list {
  float:left;
}

.list li {
  list-style:none;
  margin-top:5px;
}

.list li:hover {
  text-decoration:underline;
  cursor:pointer;
}

3. 마지막으로 제이쿼리(jquery) 문장이 있는 자바스크립트입니다.

$(document).ready(function(){
  $('.more').click(function(){
    if($('.more').hasClass('more')){
       $('.more').addClass('close').removeClass('more');
       $('.board').css('visibility', 'visible');
    }else if($('.close').hasClass('close')){
       $('.close').addClass('more').removeClass('close');  
       $('.board').css('visibility', 'hidden');
    }
  });
});

 

한번 만들어 보면 중독됩니다.^^