HTML/CSS

コピペOK|レスポンシブ対応のハンバーガーメニューアニメーションをcssとjQueryで作る方法

更新日:

「ハンバーガーメニューってどうやって作るんだろう」

「ハンバーガーメニューのおしゃれなアニメーションってなんだろう」

「レスポンシブ対応がいいな」

こういった悩みに答えます。

目次

  • 基となる作品
  • 解説

基となる作品

解説

HTML

<body>
 <nav class="menu">
  <ul>
      <li><a class="menu" href="#1">アイテム1</a></li>
       <li><a class="menu" href="#2">アイテム2</a></li>
       <li><a class="menu" href="#3">アイテム3</a></li>
       <li><a class="menu" href="#4">アイテム4</a></li>
       <li><a class="menu" href="#5">アイテム5</a></li>
  </ul>
 </nav>

 <div class="menu__button">
   <span></span><span></span><span></span>
 </div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script>
   $(function() {
    $('.menu__button').click(function() {
        $(this).toggleClass('active');
 
        if ($(this).hasClass('active')) {
            $('.menu').addClass('active');
        } else {
            $('.menu').removeClass('active');
        }
    });
  });
 </script>
</body>

このjQueryでは「menu__buttonクラス」を押すと「menuクラス」と「menu__buttonクラス」に

「activeクラス」を付けたり、消したりができます。

上からスライドしてくるメニューのCSS

nav.menu{
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  color: black;
  text-align: center;
  transform: translateY(-100%);
  transition: all 0.6s;
  width: 100%;
}

nav.menu ul{
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.menu ul li{
  font-size: 20px;
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid black;
}

nav.menu ul li a{
  text-decoration: none;
  display: inline-block;
  color: black;
  margin: 1em 0;
}

nav.menu.active{
  transform: translateY(0%);
}

jQueryでmenu__buttonが押されたらnav.menuに「activeクラス」が付くので、

付いたときにtranslateY(0%)で下に降りてきます。

逆に「activeクラス」が付いていない時は上に行くようになっています。

メニューボタンのCSS

.menu__button{
    display: block;
    position: fixed;
    right: 15px;
    top: 15px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 3;
    background: gray;
    text-align: center;
}

.menu__button span{
    display: block;
    position: absolute;
    width: 28px;
    border-bottom: solid 3px white;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
}

.menu__button span:nth-child(1){
  top:9px;
}

.menu__button span:nth-child(2){
  top:18px;
}

.menu__button span:nth-child(3){
  top:27px;
}

.menu__button.active span:nth-child(1){
     top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.menu__button.active span:nth-child(2),
.menu__button.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

menu__buttonが押されたらactiveクラスが付いて、transform: rotate(45deg);で✖のマークになります。

まとめ

今回、レスポンシブなハンバーガーメニューアニメーションをcssとjQueryで作る方法をご紹介しました。

この記事を観てくれた人が少しでも参考になれたらと思います。

おすすめしている本

他の投稿

-HTML/CSS

Copyright© yamab-log , 2021 All Rights Reserved Powered by STINGER.