WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

CSS3でメニューアイコンのアニメーション

f:id:mmmmofu:20161115171109p:plain

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>menu</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <div class="content">
    <header>
      <div class="menu">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </header>
    <ul class="menu_open">
      <li>HOME</li>
      <li>CONTENTS</li>
      <li>NEWS</li>
    </ul>
  </div>
</body>
</html>

spanタグを3つで横線3本を表現


CSS

html, body, div, header, p, span, ul, li {
  margin: 0;
  padding: 0;
  font-family:
  "HiraginoKakuGothicProN",
  meiryo,
  sans-serif;
}
ul, li {
  list-style: none;
}

.content {
  width: 750px;
  height: 1000px;
  margin: 0 auto;
  background: #CCC;
}
header {
  width: 750px;
  height: 50px;
  background: #333;
}
header .menu {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 0 0 0 10px;
  cursor: pointer;
  padding-top: 8px;
  box-sizing: border-box;
  -webkit-transition: all linear .3s;
  -o-transition: all linear .3s;
  transition: all linear .3s;
}
header .menu p {
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}
header .menu:hover {
  opacity: 0.6;
}
header .menu span {
  position: absolute;
  display: block;
  width: 50px;
  height: 4px;
  background: #FFF;
}
header .menu span:nth-child(1){
  top: 10px;
  -webkit-transition: .3s all cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: .3s all cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: .3s all cubic-bezier(0.645, 0.045, 0.355, 1);
}
header .menu span:nth-child(2){
  -webkit-transition: .3s all cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: .3s all cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: .3s all cubic-bezier(0.645, 0.045, 0.355, 1);
  top: 23px;
}
header .menu span:nth-child(3){
  -webkit-transition: .3s all cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: .3s all cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: .3s all cubic-bezier(0.645, 0.045, 0.355, 1);
  top: 37px;
}
header .close span:nth-child(1){
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 23px;
}
header .close span:nth-child(2){
  -ms-transform: translate(30px);
  -webkit-transform: translate(30px);
  transform: translate(30px);
  top: 23px;
  opacity: 0;
}
header .close span:nth-child(3){
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 23px;
}
.menu_open {
  width: 100%;
  background: #FFF;
  overflow: hidden;
  height: 0;
}
.menu_open li {
  text-align: center;
  border-top: 1px solid #333;
  padding: 15px 0;
  cursor: pointer;
}
.menu_open li:first-child {
  border-top: none;
}

表示時のスタイルとボタンを押した時のスタイルを用意する

$(function(){
  $('.menu').on('click', function(){
    if($('.menu').hasClass('close')) {
      $(this).removeClass('close');
      $('.menu_open').animate({'height':0},400);
    } else {
      $(this).addClass('close');
      $('.menu_open').animate({'height':164}, 400);
    }
  });
});

ボタンをクリックしたらクラスを切替える