Cacher is the code snippet organizer for pro developers

jqueryでやってください

左から出したいときは
head__nav クラスに　head__nav--left
右から出したいときは
head__nav クラスに　head__nav--right
を付けてください

例　）　左から出すサンプル
  <nav class="head__nav">
    <ul class="head__navlist">
　　　～省略
    </ul>
  </nav>

これを
  <nav class="head__nav head__nav--right">
    <ul class="head__navlist">
　　　～省略
    </ul>
  </nav>

@charset "UTF-8";
/*drawerMenu.css 

drawmenu.スクリプ
drawmenu header html
と一緒に使ってくだしゃい
あと、jqueryもね！

*/
body.fixed{
    position: fixed;
}



/* Toggle(Button) */
.head{
    &__hmmenuwrap {
        display: none;
        position:fixed;/*to body*/
        right:13px;
        top:13px;
        z-index:1001;
        width:30px;
        height:50px;
        cursor:pointer;
    }
    &__hmmenu {position:relative}
    &__hmmenuwrap span {
        display:block;
        position:absolute;/*to div*/
        width:100%;
        border-bottom:solid 3px #999;
        @include css3(transition, .35s ease-in-out);
    }
    &__hmmenuwrap span:nth-child(1) {top:0}
    &__hmmenuwrap span:nth-child(2) {top:11px}
    &__hmmenuwrap span:nth-child(3) {top:22px}
}
/*Media-queries_____________________________________*/
@media screen and (max-height: 640px) {
}

@media screen and (max-width: 768px) {

    .head{
        &__nav {
            overflow-y:hidden;
            height:100%;
            z-index: 1000;
            position:fixed;
            top:-100%; /*通常時はビュー外*/
            background:rgba(255,255,255,.7);
            width:100%;
            padding:0 10px;
            @include css3(transition, .5s ease-in-out);
            text-align:left;
            &--left{
                top:0;
                left:-100%;
            }
            &--right{
                top:0;
                right:-100%;
            }
        }



        &__navlist {
            margin:0
        }
         &__navlist > li {
            display:block;
            line-height:3;
        }
         &__navlist > li a {
            display:block
        }
         &__navlist > li::after {content:''}
        /* Toggle(Button) */
        &__hmmenuwrap {display: block}
    }
    .head__submenu{
        display:none;
    }
    /* Click Toggle(Button) */
    .head__nav--stateOpen{
        .head__hmmenuwrap  span{
            top:11px;
            &:nth-child(1){
                 @include css3(transform, rotate(-45deg));
            }
            &:nth-child(2),
            &:nth-child(3){
                 @include css3(transform, rotate(45deg));
            }
        }
        /*header menu*/
        .head__nav {
                overflow-y:scroll;
                @include css3(transform, translateY(100%));
                &--left{
                    @include css3(transform, translate(100%,0));
                    
                }
                &--right{
                    @include css3(transform, translate(-100%,0));
                    
                }
        }
    }
} 

  var state = false;
  var scrollpos;
  $('.head__navToggle').click(function(){
    $('.head').toggleClass('head__nav--stateOpen');
      if(state === false) {
        scrollpos = $(window).scrollTop();
        $('body').addClass('fixed').css({'top': -scrollpos});
        state = true;
      } else {
        $('body').removeClass('fixed').css({'top': 0});
        window.scrollTo( 0 , scrollpos );
        state = false;
      }

  });

  // トグル表示メニュー
  $('.head__sub').click(function(){
      $(this).next().slideToggle();
      $(this).toggleClass('head__sub--stateActive');    
  });

<header class="head">
  <div class="head__hmmenuwrap head__navToggle">
    <div class="head__hmmenu">
     <span></span> <span></span> <span></span>
    </div>
  </div>
  <nav class="head__nav">
    <ul class="head__navlist">
     <li><a href="#">HOME</a></li>
     <li>
     <a class="head__sub" >MENU1</a>
     <ul class="head__submenu">
       <li><a href="">subMENU1</a></li>
     </ul>
     </li>
     <li><a href="#">MENU2</a></li>
     <li><a href="#">MENU3</a></li>
     <li><a href="#">MENU4</a></li>
     <li><a href="#">MENU2</a></li>
     <li><a href="#">MENU3</a></li>
     <li class="head__navToggle">閉じる</li>
    </ul>
  </nav>
</header>

body.fixed {
  position: fixed;
}

/* Toggle(Button) */
.head__hmmenuwrap {
  display: none;
  position: fixed;
  /*to body*/
  right: 13px;
  top: 13px;
  z-index: 1001;
  width: 30px;
  height: 50px;
  cursor: pointer;
}
.head__hmmenu {
  position: relative;
}
.head__hmmenuwrap span {
  display: block;
  position: absolute;
  /*to div*/
  width: 100%;
  border-bottom: solid 3px #999;
  -webkit-transition: 0.35s ease-in-out;
  -moz-transition: 0.35s ease-in-out;
  -ms-transition: 0.35s ease-in-out;
  -o-transition: 0.35s ease-in-out;
  transition: 0.35s ease-in-out;
}
.head__hmmenuwrap span:nth-child(1) {
  top: 0;
}
.head__hmmenuwrap span:nth-child(2) {
  top: 11px;
}
.head__hmmenuwrap span:nth-child(3) {
  top: 22px;
}

/*Media-queries_____________________________________*/
@media screen and (max-width: 768px) {
  .head {
    /* Toggle(Button) */
  }
  .head__nav {
    overflow-y: hidden;
    height: 100%;
    z-index: 1000;
    position: fixed;
    top: -100%;
    /*通常時はビュー外*/
    background: rgba(255, 255, 255, 0.7);
    width: 100%;
    padding: 0 10px;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    text-align: left;
  }
  .head__nav--left {
    top: 0;
    left: -100%;
  }
  .head__nav--right {
    top: 0;
    right: -100%;
  }
  .head__navlist {
    margin: 0;
  }
  .head__navlist > li {
    display: block;
    line-height: 3;
  }
  .head__navlist > li a {
    display: block;
  }
  .head__navlist > li::after {
    content: '';
  }
  .head__hmmenuwrap {
    display: block;
  }

  .head__submenu {
    display: none;
  }

  /* Click Toggle(Button) */
  .head__nav--stateOpen {
    /*header menu*/
  }
  .head__nav--stateOpen .head__hmmenuwrap span {
    top: 11px;
  }
  .head__nav--stateOpen .head__hmmenuwrap span:nth-child(1) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .head__nav--stateOpen .head__hmmenuwrap span:nth-child(2), .head__nav--stateOpen .head__hmmenuwrap span:nth-child(3) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .head__nav--stateOpen .head__nav {
    overflow-y: scroll;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
  .head__nav--stateOpen .head__nav--left {
    -webkit-transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  .head__nav--stateOpen .head__nav--right {
    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
}