ハンバーガーメニューのあれこれ2

2016.10.26

hamburger-menu

ページ内遷移で閉じるやつです。

head内に以下を読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

html

<div class="gnav-btn">
  <div class="icon-animation">
    <span class="top"></span>
    <span class="middle"></span>
    <span class="bottom"></span>
  </div>
</div>

<nav class="global">
  <ul class="gnav scrollable-menu">
    <li><a href="#sec1">ページ内遷移先</a></li>
    <li><a href="#sec2">ページ内遷移先</a></li>
    <li><a href="#sec3">ページ内遷移先</a></li>
    <li><a href="#sec4">ページ内遷移先</a></li>
    <li><a href="#sec5">ページ内遷移先</a></li>
    <li><a href="#sec6">ページ内遷移先</a></li>
    <li><a href="#sec7">ページ内遷移先</a></li>
  </ul>
</nav>

css

  body,
  ul,
  li {
    margin: 0;
    padding: 0;
  }

  .wrapper {
    box-sizing: border-box;
    padding: 0 15px;
    margin: 55px 0;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  header {
    box-sizing: border-box;
    background: #333;
    color: #ccc;
    padding: 1rem;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 98;
  }

  footer {
    background: #ccc;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 98;
  }
    /*nabi開閉部分*/

    .gnav li {
      border-bottom: 1px solid #333;
    }

    .gnav li a {
      display: block;
      text-decoration: none;
      /* (44-16)/2=14px */
      padding: .875rem 1rem;
    }

    .gnav {
      list-style-type: none;
      background: #eee;
      display: block;
      width: 70%;
      overflow-x: hidden;
      overflow-y: auto;
      position: fixed;
      left: 0;
      top: 55px;
      z-index: 99;
      visibility: hidden;
      -webkit-transform: translateX(-100%);
      -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      -o-transform: translateX(-100%);
      transform: translateX(-100%);
      webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }

    .gnav.on {
      visibility: visible;
      -webkit-transform: translateX(0px);
      -moz-transform: translateX(0px);
      -ms-transform: translateX(0px);
      -o-transform: translateX(0px);
      transform: translateX(0px);
    }

    .modal {
      background-color: rgba(255, 255, 255, .5);
      width: 100%;
      height: 100%;
      left: 0;
      opacity: .1;
      position: fixed;
      top: 0;
      z-index: 97;
      visibility: hidden;
      webkit-transition: visibility 0 linear .4s, opacity .4s;
      -moz-transition: visibility 0 linear .4s, opacity .4s;
      transition: visibility 0 linear .4s, opacity .4s;
      webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
    }

    .modal.on {
      opacity: 1;
      webkit-transition-delay: 0;
      -moz-transition-delay: 0;
      transition-delay: 0;
      visibility: visible;
    }
    /*ハンバーガーボタン*/

    .icon-animation {
      width: 44px;
      height: 44px;
      display: block;
      cursor: pointer;
      position: fixed;
      right: .5rem;
      top: .5rem;
      text-align: center;
      z-index: 99;
    }

    .icon-animation span {
      width: 44px;
      height: 1px;
      display: block;
      background: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -22px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    .icon-animation .top {
      -webkit-transform: translateY(-13px);
      -ms-transform: translateY(-13px);
      transform: translateY(-13px);
    }

    .icon-animation .bottom {
      -webkit-transform: translateY(13px);
      -ms-transform: translateY(13px);
      transform: translateY(13px);
    }

    .is-open .middle {
      background: rgba(51, 51, 51, 0)!important;
    }

    .is-open .top {
      -webkit-transform: rotate(-45deg) translateY(0px);
      -ms-transform: rotate(-45deg) translateY(0px);
      transform: rotate(-45deg) translateY(0px);
    }

    .is-open .bottom {
      -webkit-transform: rotate(45deg) translateY(0px);
      -ms-transform: rotate(45deg) translateY(0px);
      transform: rotate(45deg) translateY(0px);
    }

    @media (min-width:736px) {
      header {
        display: block;
      }
      .global {
        width: 100%;
        position: relative;
        /*ナビ中央そろえ*/
        overflow: hidden;
        /*ナビ中央そろえ*/
      }
      .gnav-btn {
        display: none;
      }
      .gnav {
        list-style-type: none;
        background-color: inherit;
        display: block;
        overflow: visible;
        /*ナビ表示*/
        position: fixed;
        /*ナビ中央そろえ*/
        width: auto;
        left: 50%;
        /*ナビ中央そろえ*/
        top: 0;
        z-index: 99;
        visibility: visible;
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
      }
      .gnav li {
        border-bottom: none;
        width: auto;
        position: relative;
        /*ナビ中央そろえ*/
        left: -50%;
        /*ナビ中央そろえ*/
        float: left;
        /*ナビ中央そろえ*/
      }
      .gnav li a {
        display: block;
        text-decoration: none;
        padding: .875rem 0.5rem;
        color: #fff;
      }
    }

Jquery

 $(function() {
      $('body').append('<div class="modal"></div>');
      var gnav = $('.gnav');
      var modal = $('.modal');
      var gnavbtn = $('.gnav-btn');
      $(window).resize(function() {
        gnav.css('transition', 'none');
        modal.removeClass("on");
        gnav.removeClass("on");
        gnavbtn.removeClass('is-open');
      });
      gnavbtn.on('click', function() {
        $(this).toggleClass('is-open');
        gnav.css('transition', '.5s .1s cubic-bezier(0, 0, .2, 0)').toggleClass('on');
        modal.toggleClass('on');
      });
      $('.gnav li,.modal').on('click', function() {
        modal.removeClass("on");
        gnav.removeClass("on");
        gnavbtn.removeClass('is-open');
      });
      $(window).on('load resize',function() {
        var timer = false;
        if (timer !== false) {
          clearTimeout(timer);
        }
        timer = setTimeout(function() {
          if (window.matchMedia("(max-width:737px)").matches) {
            //737px以下の場合
            $(window).on('scroll', function() {
              if ($(this).scrollTop() < 100) {
                $('header').fadeIn();
                $('.icon-animation span').css('background-color', '#fff');
              } else {
                $('header').fadeOut();
                $('.icon-animation span').css('background-color', '#000');
              }
            });
          } else if (window.matchMedia("(min-width:736px)").matches){
            $(window).off('scroll');
            $('header').show(); $('.icon-animation span').css('background-color', '#fff');
          }
        }, 200);
      })
        /*リンクの動きをゆっくり移動にするスクリプト*/
     $("a[href*=#]").click(function() {
        $('html,body').animate({
          scrollTop: $($(this).attr("href")).offset().top - 0
        }, 'slow', 'swing');
        /*クリックしたらナビを閉じる動作*/
        modal.removeClass("on");
        gnav.removeClass("on");
        gnavbtn.removeClass('is-open');
        //リンクを無効
        return false;
      })
    });

先駆者様感謝です。
http://itstudio.co/2015/10/28/4876/

ねこのひたい

ねこのひたい

ハンバーガーメニューのあれこれ2

slotmastermark2

jp_around_cub