IoT-Arduino
9/27/2019 - 2:15 AM

【JS】スマホ用のハンバーガーメニューをjQueryとCSSで作成する方法

  [【JS】スマホ用のハンバーガーメニューをjQueryとCSSで作成する方法](https://nodoame.net/archives/8771)
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="./style.css">
      </head>
      
      
      <body>
      
          <header>
              <nav class="globalMenuSp">
                  <ul>
                      <li><a href="#">Menu1</a></li>
                      <li><a href="#">Menu2</a></li>
                      <li><a href="#">Menu3</a></li>
                      <li><a href="#">Menu4</a></li>
                      <li><a href="#">Menu5</a></li>
                  </ul>
              </nav>
          </header>
          
          <div class="navToggle">
              <span></span><span></span><span></span><span>menu</span>
          </div>
      
          <script
          src="https://code.jquery.com/jquery-3.4.1.min.js"
          integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
          crossorigin="anonymous"></script>
      <script src="./js/main.js"></script>
      
      
      </body>
      </html>
      
      /// ****************** CSS ***************
      
      
      nav.globalMenuSp {
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
        background: #fff;
        color: #000;
        text-align: center;
        transform: translateY(-100%);
        transition: all 0.6s;
        width: 100%;
      }
      
      nav.globalMenuSp ul {
        background: #fff;
        margin: 0 auto;
        padding: 50px 0;
        width: 100%;
      }
      
      nav.globalMenuSp ul li {
        font-size: 1.1em;
        list-style-type: none;
        padding: 0;
        width: 100%;
        /* border-bottom: 1px dotted #333; */
      }
      
      /* 最後はラインを描かない */
      nav.globalMenuSp ul li:last-child {
        padding-bottom: 0;
        border-bottom: none;
      }
      
      nav.globalMenuSp ul li a {
        display: block;
        color: #d446c1;
        padding: 1em 0;
      }
      
      /* このクラスを、jQueryで付与・削除する */
      nav.globalMenuSp.active {
        transform: translateY(0%);
      }
      
      
      /* ハンバーガー用CSS */
      
      .navToggle {
        display: block;
        position: fixed;    /* bodyに対しての絶対位置指定 */
        right: 13px;
        top: 12px;
        width: 42px;
        height: 51px;
        cursor: pointer;
        z-index: 3;
        background: #fff;
        text-align: center;
      }
      
      .navToggle span {
        display: block;
        position: absolute;    /* .navToggleに対して */
        width: 30px;
        border-bottom: solid 3px #d446c1;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
        left: 6px;
      }
      
      .navToggle span:nth-child(1) {
        top: 9px;
      }
      
      .navToggle span:nth-child(2) {
        top: 18px;
      }
      
      .navToggle span:nth-child(3) {
        top: 27px;
      }
      
      .navToggle span:nth-child(4) {
        border: none;
        color:  #d446c1;
        font-size: 9px;
        font-weight: bold;
        top: 34px;
      }
      
      
      /* タップしたあとCSS */
      
      /* 最初のspanをマイナス45度に */
      .navToggle.active span:nth-child(1) {
          top: 18px;
          left: 6px;
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          transform: rotate(-45deg);
      }
       
      /* 2番目と3番目のspanを45度に */
      .navToggle.active span:nth-child(2),
      .navToggle.active span:nth-child(3) {
          top: 18px;
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          transform: rotate(45deg);
      }
      
      
      /// ****************** jquery ***************
      
      
      $(function() {
          $('.navToggle').click(function() {
              $(this).toggleClass('active');
       
              if ($(this).hasClass('active')) {
                  $('.globalMenuSp').addClass('active');
              } else {
                  $('.globalMenuSp').removeClass('active');
              }
          });
      });