簡単コピペ！ハンバーガーメニューサンプル4選

どうもみなさん！株式会社プロットハブの山名です！
以前私が投稿したハンバーガーメニューの記事「コピペOK！実案件でも使用したハンバーガーメニュー込みのレスポンシブな追従ヘッダーをご紹介！」がサイト内の記事としては一番閲覧されていたようです！(大歓喜)
ならばもっと数を増やしてみるか！ということで、今回はコピペするだけで使えるハンバーガーメニューを4つご紹介します！
パソコンサイズからスマホサイズまでレスポンシブ対応込みで作ってみたので、是非デモページで実際の表示を確認して使ってみてくださいね！
※デモページのハンバーガーメニューは1024px以下で表示されるのでウィンドウサイズを縮小してご確認ください。

共通の記述

基本のHTML

今回ご紹介するサンプルの共通HTMLです！
jQueryの読み込みとヘッダーの高さを取得してナビメニューのpadding-topに代入している処理も共通で記述してますが、不必要なら消してくださいw

コードを表示

<!-- 基本HTMLの記述 -->

  <!-- ヘッダー部分の基本HTML -->
  <header class="header">
    <div class="header-container">

      <h1 class="header-logo">
        <a href="#" id="logo" class="logo-link">
          <img src="img/logo1.svg" alt="">
        </a>
      </h1>

      <nav id="hb-menu" class="nav-menu">
        <ul class="menu-list">
          <li class="menu-item"><a href="#" class="menu-link">MENU1</a></li>
          <li class="menu-item"><a href="#" class="menu-link">MENU2</a></li>
          <li class="menu-item"><a href="#" class="menu-link">MENU3</a></li>
          <li class="menu-item"><a href="#" class="menu-link">MENU4</a></li>
          <li class="menu-item"><a href="#" class="menu-link">MENU5</a></li>
          <li class="menu-item"><a href="#" class="menu-link">MENU6</a></li>
        </ul>
      </nav>

      <!-- ハンバーガーメニュー ボタン  -->
　　　　<!-- この中にそれぞれのハンバーガーメニューのHTMLを入れてください  -->
      <!-- ハンバーガーメニュー ボタン ここまで -->

    </div>
  </header>
  <!-- ヘッダー部分の基本HTML ここまで --

  <!-- jQueryの読み込み -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- jQueryの読み込みここまで -->

  <!-- 共通のjQuery処理 -->
  <script type="text/javascript">
    jQuery(function($) {
      // ヘッダーの高さを代入する処理
      function setHeaderHeights() {
        var commonHeaderHeight = $("header").outerHeight();
        // ハンバーガーメニューの上部にheaderの高さ分の余白をつける
        $("#hb-menu").css("padding-top", commonHeaderHeight + "px");
      }
      // ヘッダーの高さを代入する処理をウィンドウリサイズ時にも動かす
      $(window).on('resize', function() {
        setHeaderHeights();
      });
      // ヘッダーの高さを代入する処理をウィンドウリサイズ時にも動かす
      setHeaderHeights();
      // ヘッダーの高さを代入する処理 ここまで
   });
  </script>
  <!-- 共通のjQuery処理ここまで -->

基本のCSS

お次は基本のCSSです！お好みのCSSファイルにコピペして用途に併せて変更してください！

コードを表示

<!-- 共通css -->
  <style media="screen">
    body {
      margin-left: auto;
      margin-right: auto;
      max-width: 1920px;
      font-size: 1rem;
      line-height: 1.5rem;
    }

    /* ヘッダー */

    .header-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    @media (min-width: 769px) {
      .header-container {
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }

    @media (min-width: 1025px) {
      .header-container {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        padding-left: 2rem;
        padding-right: 2rem;
      }
    }

    .header-logo {
      width: 40%;
      cursor: pointer;
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms;
    }

    .header-logo:hover {
      opacity: 0.6;
    }

    @media (min-width: 1025px) {
      .header-logo {
        width: 25%;
      }
    }

    /* ナビメニュー */

    .nav-menu {
      position: fixed;
      top: 0px;
      right: 0px;
      z-index: 10;
      height: 100%;
      width: 100%;
      --tw-translate-x: 100%;
      -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      background-color: rgb(0 0 0 / var(--tw-bg-opacity));
      --tw-bg-opacity: 0.6;
      -webkit-transition-duration: 700ms;
      transition-duration: 700ms;
    }

    @media (min-width: 1025px) {
      .nav-menu {
        position: static;
        inset: 0px;
        height: auto;
        width: 75%;
        --tw-translate-x: 0px;
        -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        background-color: transparent;
        padding-top: 0px !important;
      }
    }

    .nav-menu.active {
      --tw-translate-x: 0px;
      -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .menu-list {
      margin-left: auto;
      margin-right: auto;
      width: 75%;
      padding-top: 2.5rem;
      padding-bottom: 2.5rem;
    }

    @media (min-width: 1025px) {
      .menu-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: auto;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        gap: 1.25rem;
        padding-top: 0px;
        padding-bottom: 0px;
      }
    }

    .menu-list .menu-item {
      border-bottom-width: 1px;
    }

    @media (min-width: 1025px) {
      .menu-list .menu-item {
        border-bottom-width: 0px;
      }
    }

    .menu-list .menu-item .menu-link {
      display: block;
      cursor: pointer;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity));
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms;
    }

    .menu-list .menu-item .menu-link:hover {
      opacity: 0.6;
    }

    @media (min-width: 769px) {
      .menu-list .menu-item .menu-link {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
      }
    }

    @media (min-width: 1025px) {
      .menu-list .menu-item .menu-link {
        padding-top: 0px;
        padding-bottom: 0px;
        font-size: 1rem;
        line-height: 1.5rem;
        --tw-text-opacity: 1;
        color: rgb(0 0 0 / var(--tw-text-opacity));
      }
    }
  </style>
  <!--  共通css ここまで  -->

ここからはそれぞれのHTMLとCSSとjQueryの記述です！それぞれのファイルに追記してください！

ハンバーガーメニューサンプル1「3本線から×」

ハンバーガーメニューといえばこのデザインを思い浮かべる方も多いのではないでしょうか？
パッと×に変わるだけでなく、動きもつけています。

HTML

コードを表示

      <!-- ハンバーガーメニュー ボタン 3本線から× -->
      <button id="openbtn" class="hamburger-button">
        <div class="hamburger-lines">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </div>
      </button>
      <!-- ハンバーガーメニュー ボタン 3本線から× ここまで -->

CSS

コードを表示

  <!--  ハンバーガーメニュー - 3本線から×  -->
  <style media="screen">
    .hamburger-button {
      position: relative;
      z-index: 50;
      height: 3rem;
      width: 3rem;
      cursor: pointer;
      border-radius: 0.375rem;
      --tw-bg-opacity: 1;
      background-color: rgb(0 0 0 / var(--tw-bg-opacity));
    }

    @media (min-width: 769px) {
      .hamburger-button {
        height: 4rem;
        width: 4rem;
      }
    }

    @media (min-width: 1025px) {
      .hamburger-button {
        display: none;
      }
    }

    .hamburger-lines {
      position: relative;
      margin-left: auto;
      margin-right: auto;
      height: 50%;
      width: 66.666667%;
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms;
    }

    .hamburger-lines.active {
      height: 1px;
    }

    .hamburger-lines .line {
      position: absolute;
      left: 0px;
      right: 0px;
      margin: auto;
      display: block;
      height: 1px;
      width: 100%;
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity));
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms;
    }

    @media (min-width: 769px) {
      .hamburger-lines .line {
        height: 0.125rem;
      }
    }

    .hamburger-lines .line:nth-child(1) {
      top: 0px;
    }

    .hamburger-lines .line:nth-child(2) {
      top: 0px;
      bottom: 0px;
    }

    .hamburger-lines .line:nth-child(3) {
      bottom: 0px;
    }

    .hamburger-lines.rotate .line {
      top: 0px;
      bottom: 0px;
    }

    .hamburger-lines.rotate .line:nth-child(1),
    .hamburger-lines.rotate .line:nth-child(2) {
      --tw-rotate: 45deg;
      -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .hamburger-lines.rotate .line:nth-child(3) {
      --tw-rotate: -45deg;
      -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
  </style>
  <!-- /* ハンバーガーメニュー - 3本線から× ここまで */ -->

jQuery

コードを表示

  <script type="text/javascript">
    jQuery(function($) {

      // ハンバーガーメニューのクリック処理
      $('#openbtn').on('click', function() {
        $(this).toggleClass('active');
        $('#hb-menu').toggleClass('active', $(this).hasClass('active'));
        if ($(this).hasClass('active')) {
          $('#openbtn .hamburger-lines').addClass('active');
          setTimeout(function() {
            $('#openbtn .hamburger-lines').addClass('rotate');
          }, 300);
        } else {
          $('#openbtn .hamburger-lines').removeClass('rotate');
          setTimeout(function() {
            $('#openbtn .hamburger-lines').removeClass('active');
          }, 300);
        }
      });


    });
  </script>

「3本線から×」のデモページはこちら

ハンバーガーメニューサンプル2「2本線から×」

2本線のパターンも作ってみました！
2本目を短くして「ちょっとオシャレやん(｀・ω・´)ｷﾘｯ」ってなってるのは僕だけでしょうか？

HTML

コードを表示

      <!-- ハンバーガーメニュー ボタン 2本線から× -->
      <button id="openbtn" class="hamburger-button">
        <div class="hamburger-lines">
          <span class="line"></span>
          <span class="line"></span>
        </div>
      </button>
      <!-- ハンバーガーメニュー ボタン 2本線から× ここまで -->

CSS

コードを表示

  <!--  ハンバーガーメニュー - 2本線から×  -->
  <style media="screen">
    .hamburger-button {
      position: relative;
      z-index: 50;
      height: 3rem;
      width: 3rem;
      cursor: pointer;
      border-radius: 0.375rem;
      --tw-bg-opacity: 1;
      background-color: rgb(0 0 0 / var(--tw-bg-opacity));
    }

    @media (min-width: 769px) {
      .hamburger-button {
        height: 4rem;
        width: 4rem;
      }
    }

    @media (min-width: 1025px) {
      .hamburger-button {
        display: none;
      }
    }

    .hamburger-lines {
      position: relative;
      margin-left: auto;
      margin-right: auto;
      width: 66.666667%;
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms;
    }

    .hamburger-lines .line {
      display: block;
      height: 1px;
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity));
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms;
    }

    @media (min-width: 769px) {
      .hamburger-lines .line {
        height: 0.125rem;
      }
    }

    .hamburger-lines .line:nth-child(1) {
      width: 100%;
    }

    .hamburger-lines .line:nth-child(2) {
      margin-top: 0.625rem;
      width: 75%;
    }

    .hamburger-lines.active .line:nth-child(2) {
      margin-top: 0px;
      width: 100%;
    }

    .hamburger-lines.rotate .line {
      top: 0px;
      bottom: 0px;
      width: 100%;
    }

    .hamburger-lines.rotate .line:nth-child(1) {
      --tw-rotate: 45deg;
      -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .hamburger-lines.rotate .line:nth-child(2) {
      --tw-rotate: -45deg;
      -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
  </style>
  <!-- /* ハンバーガーメニュー - 2本線から× ここまで */ -->

jQuery

コードを表示

  <script type="text/javascript">
    jQuery(function($) {
      // ヘッダーの高さを代入する処理
      function setHeaderHeights() {
        var commonHeaderHeight = $("header").outerHeight();
        // ハンバーガーメニューの上部にheaderの高さ分の余白をつける
        $("#hb-menu").css("padding-top", commonHeaderHeight + "px");
      }

      $(window).on('resize', function() {
        setHeaderHeights();
      });

      setHeaderHeights();
      // ヘッダーの高さを代入する処理 ここまで

      // ハンバーガーメニューのクリック処理
      $('#openbtn').on('click', function() {
        $(this).toggleClass('active');
        $('#hb-menu').toggleClass('active', $(this).hasClass('active'));
        if ($(this).hasClass('active')) {
          $('#openbtn .hamburger-lines').addClass('active');
          setTimeout(function() {
            $('#openbtn .hamburger-lines').addClass('rotate');
          }, 300);
        } else {
          $('#openbtn .hamburger-lines').removeClass('rotate');
          setTimeout(function() {
            $('#openbtn .hamburger-lines').removeClass('active');
          }, 300);
        }
      });


    });
  </script>

「2本線から×」のデモページはこちら

ハンバーガーメニューサンプル3「3本線とMENU & CLOSE」

3本線にテキストが入れられるパターンです。
テキストは「MENU」の部分はHTMLで、「CLOSE」の部分はjQueryで変更可能です。

HTML

コードを表示

      <!-- ハンバーガーメニュー ボタン 3本線とMENU & CLOSE -->
      <button id="openbtn" class="hamburger-button">
        <div class="hamburger-lines">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </div>
        <p class="hamburger-text">MENU</p>
      </button>
      <!-- ハンバーガーメニュー ボタン ここまで -->

CSS

コードを表示

<!--  ハンバーガーメニュー - 3本線とMENU & CLOSE  -->
<style media="screen">
.hamburger-button {
  position: relative;
  z-index: 50;
  height: 3rem;
  width: 3rem;
  cursor: pointer;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

@media (min-width: 769px) {
  .hamburger-button {
    height: 4rem;
    width: 4rem;
  }
}

@media (min-width: 1025px) {
  .hamburger-button {
    display: none;
  }
}

.hamburger-lines {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: 33.333333%;
  width: 66.666667%;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

.hamburger-lines .line {
  position: absolute;
  left: 0px;
  right: 0px;
  margin: auto;
  display: block;
  height: 1px;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

@media (min-width: 769px) {
  .hamburger-lines .line {
    height: 0.125rem;
  }
}

.hamburger-lines .line:nth-child(1) {
  top: 0px;
}

.hamburger-lines .line:nth-child(2) {
  top: 0px;
  bottom: 0px;
}

.hamburger-lines .line:nth-child(3) {
  bottom: 0px;
}

.hamburger-lines.active .line {
  width: 66.666667%;
}

.hamburger-lines.active .line:nth-child(1) {
  top: 50%;
  height: 0px;
}

.hamburger-lines.active .line:nth-child(3) {
  bottom: 50%;
  height: 0px;
}

.hamburger-lines.inset .line {
  top: 0px !important;
  bottom: 0px !important;
}

.hamburger-lines.rotate .line {
  height: 1px !important;
}

@media (min-width: 769px) {
  .hamburger-lines.rotate .line {
    height: 0.125rem !important;
  }
}

.hamburger-lines.rotate .line:nth-child(1),.hamburger-lines.rotate .line:nth-child(2) {
  --tw-rotate: 45deg;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hamburger-lines.rotate .line:nth-child(3) {
  --tw-rotate: -45deg;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hamburger-text {
  position: relative;
  margin-top: 0.25rem;
  font-size: 10px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

@media (min-width: 1024px) {
  .hamburger-text {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

.hamburger-text.active{
  opacity: 0;
}
</style>

jQuery

コードを表示

  <script type="text/javascript">
    jQuery(function($) {

    // ハンバーガーメニューのクリック処理
    $('#openbtn').on('click', function() {
      $(this).toggleClass('active');
      $('#hb-menu').toggleClass('active', $(this).hasClass('active'));
      if ($(this).hasClass('active')) {
        $('#openbtn .hamburger-lines').addClass('active');
        $('#openbtn .hamburger-text').addClass('active');
        setTimeout(function() {
          $('#openbtn .hamburger-text').text('CLOSE');
        }, 200);
        setTimeout(function() {
          $('#openbtn .hamburger-lines').addClass('inset');
        }, 300);
        setTimeout(function() {
          $('#openbtn .hamburger-lines').addClass('rotate');
          $('#openbtn .hamburger-text').removeClass('active');
        }, 400);
      } else {
        $('#openbtn .hamburger-text').addClass('active');
        $('#openbtn .hamburger-lines').removeClass('rotate');
        setTimeout(function() {
          $('#openbtn .hamburger-text').text('MENU');
        }, 200);
        setTimeout(function() {
          $('#openbtn .hamburger-lines').removeClass('inset');
        }, 300);
        setTimeout(function() {
          $('#openbtn .hamburger-text').removeClass('active');
          $('#openbtn .hamburger-lines').removeClass('active');
        }, 400);
      }
    });


    });
  </script>

「3本線とMENU & CLOSE」のデモページはこちら

ハンバーガーメニューサンプル4「2本線とMENUから×」

2本線にもテキストを入れたパターンです。
ただ上下に配置するのではなくテキストを間に挟むように配置してみました。

HTML

コードを表示

      <!-- ハンバーガーメニュー ボタン 2本線とMENUから× -->
      <button id="openbtn" class="hamburger-button">
        <div class="hamburger-lines">
          <span class="line"></span>
          <p class="hamburger-text">MENU</p>
          <span class="line"></span>
        </div>
      </button>
      <!-- ハンバーガーメニュー ボタン ここまで -->

CSS

コードを表示

<!--  ハンバーガーメニュー - 2本線とMENUから×  -->
<style media="screen">
.hamburger-button {
  position: relative;
  z-index: 50;
  height: 3rem;
  width: 3rem;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

@media (min-width: 769px) {
  .hamburger-button {
    height: 4rem;
    width: 4rem;
  }
}

@media (min-width: 1025px) {
  .hamburger-button {
    display: none;
  }
}

.hamburger-lines {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 66.666667%;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

.hamburger-lines .line {
  display: block;
  height: 1px;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

@media (min-width: 769px) {
  .hamburger-lines .line {
    height: 0.125rem;
  }
}

.hamburger-lines.rotate .line:nth-of-type(1) {
  --tw-rotate: 45deg;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hamburger-lines.rotate .line:nth-of-type(2) {
  --tw-rotate: -45deg;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hamburger-text {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 10px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

@media (min-width: 1024px) {
  .hamburger-text {
    font-size: 0.75rem;
    line-height: 1;
  }
}

.hamburger-text.active{
  opacity: 0;
  font-size: 0;
  margin: 0;
}
</style>

<!-- /* ハンバーガーメニュー - 2本線とMENUから× ここまで */ -->

jQuery

コードを表示

  <script type="text/javascript">
    jQuery(function($) {

    // ハンバーガーメニューのクリック処理
    $('#openbtn').on('click', function() {
      $(this).toggleClass('active');
      $('#hb-menu').toggleClass('active', $(this).hasClass('active'));
      if ($(this).hasClass('active')) {
        $('#openbtn .hamburger-lines').addClass('active');
        $('#openbtn .hamburger-text').addClass('active');
        setTimeout(function() {
          $('#openbtn .hamburger-lines').addClass('rotate');
        }, 300);
      } else {
        $('#openbtn .hamburger-lines').removeClass('rotate');
        setTimeout(function() {
          $('#openbtn .hamburger-lines').removeClass('active');
          $('#openbtn .hamburger-text').removeClass('active');
        }, 300);
      }
    });


    });
  </script>

「3本線とMENU & CLOSE」のデモページはこちら

終わりに

いかがだったでしょうか？
今回はコピペで簡単に使えるハンバーガーメニューを4つご紹介しました！
ヘッダーやフッターは深く考えずサクッと片付けて、メインコンテンツのコーディングに集中したい方も多いのではないでしょうか？
今後もこんな形でコピペで使えるテンプレートを増やしていこうと考えているので、またぜひ見に来てくださいね！
それではまた！

共通の記述

基本のHTML

基本のCSS

ハンバーガーメニューサンプル1「3本線から×」

HTML

CSS

jQuery

ハンバーガーメニューサンプル2「2本線から×」

HTML

CSS

jQuery

ハンバーガーメニューサンプル3「3本線とMENU & CLOSE」

HTML

CSS

jQuery

ハンバーガーメニューサンプル4「2本線とMENUから×」

HTML

CSS

jQuery

終わりに

全カテゴリ一覧

全タグ一覧