[2015.11.17] css, javascript 를 활용한 메뉴 Line animation

한 번 응용할 만한 아이이어군요.ㅎ

이 소스에서 참고할 부분은~

DOM 요소에 data 속성을 이용해서 값을 다루는 방식인데요..

"data-"뒤에 key 값을 입력해두면 자바스크립트에서 .data(key) 방식으로 데이터를 가져올 수 있다는 말씀

<div class="demo__menu-items">
  <div class="demo__menu-item" data-section="home">Home</div>
  <div class="demo__menu-item" data-section="source">Source of inspiration</div>
  <div class="demo__menu-item" data-section="demos">Other demos</div>
  <div class="demo__menu-item" data-section="about">About</div>
</div>

이렇게 아래 3번째 줄처럼  var targetSection = $item.data("section"); 좋지요.ㅎㅎ

$(document).on("click", ".demo__menu-item", function() {
    var $item = $(this);
    var targetSection = $item.data("section");
    $item.addClass("clicked");
    $demo.removeClass("menu-active");
    $(".demo__section.active-section").removeClass("active-section");
    $(".demo__section--"+ targetSection).addClass("active-section");

    setTimeout(function() {
      $item.removeClass("clicked");
    }, menuTextAT);
});

​

간단한 사용 예제 및 Demo

See the Pen Hamburger Menu Lines Animation by Nikolay Talanov (@suez) on CodePen.