【jQuery】超簡単（コピペだけ）実装ドロワーメニュー。『Pushy』レスポンシブ対応

jQuery

SHARE

昔から使用させてもらっているライブラリ『Pushy』。
筆者の備忘録として、雛形と利用方法をこの記事にて紹介します。jQueryで簡単実装できますのでドロワーメニューを実装したいという方はぜひご活用ください。

公式：https://chrisyee.ca/pushy/

デモ

まずは挙動イメージを確認。

メニューアイコンにクリック（タップ）イベントが起きると、メニューコンテンツが現れるようになっています。
隠れていたメニューコンテンツの表示と同時に、コンテンツ要素もメニューと同横幅分ズラすようにCSSで調整しています。

ワラ

結構かっこいい挙動なんです！

HTML

HTMLは以下。そのままコピーして利用いただけます。
※jqueryの読み込み部分はhead内で行った方がいいです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<nav class="pushy pushy-left">
  <div class="pushy-content">
    <ul>
      <li class="pushy-link"><a href="#">メインメニュー 1</a></li>
      <li class="pushy-link"><a href="#">メインメニュー 2</a></li>
      <li class="pushy-submenu">
        <button>ドロップダウンメニュー 1</button>
        <ul>
          <li class="pushy-link"><a href="#">ドロップダウンメニュー 1-1</a></li>
          <li class="pushy-link"><a href="#">ドロップダウンメニュー 1-2</a></li>
          <li class="pushy-link"><a href="#">ドロップダウンメニュー 1-3</a></li>
        </ul>
      </li>
      <li class="pushy-submenu">
        <button>ドロップダウンメニュー 2</button>
        <ul>
          <li class="pushy-link"><a href="#">ドロップダウンメニュー 2-1</a></li>
          <li class="pushy-link"><a href="#">ドロップダウンメニュー 2-2</a></li>
          <li class="pushy-link"><a href="#">ドロップダウンメニュー 2-3</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
  <button class="menu-btn">
   <span class="menu-btn__lines">
    <span class="menu-btn__line"></span>
    <span class="menu-btn__line"></span>
   </span>
  </button>
<div class="site-overlay"></div>
<section class="container">hoge</section>
<section class="container">hogehoge</section>
<section class="container">huga</section>
<section class="container">hugahuga</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pushy/1.1.2/js/pushy.min.js"></script>

メニューコンテンツ要素を編集したい場合は、<div class="pushy-content">の中を編集、追加したい要素を記述してください。

雛形では左からのメニュー出現としておりますが、右からの出現とすることもできます。2行目の<nav class="pushy pushy-left">のクラス『pushy-left』を『pushy-right』に置き換えてください。
メニューが右から出現するようになります。

CSS

CSSは以下。

body{margin: 0;padding: 0;border: 0;outline: 0;-webkit-text-size-adjust: 100%;}
*:not(.pushy):not(.menu-btn):not(.site-overlay){-webkit-transition: -webkit-transform .2s ease-out;transition: -webkit-transform .2s ease-out;transition: transform .2s ease-out;transition: transform .2s ease-out, -webkit-transform .2s ease-out;}
	 
/* ==================================

 menu
 
================================== */

/* menu-btn */
.menu-btn{text-align: center;border: 0;-webkit-appearance: button;cursor: pointer;border-radius: 50%;background-color: #fff;box-shadow: 0 0 36px 0 rgba(10,10,50,0.15);cursor: pointer;-webkit-transition: box-shadow 0.5s cubic-bezier(0.19, 1, 0.22, 1),opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);transition: box-shadow 0.5s cubic-bezier(0.19, 1, 0.22, 1),opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);width: 64px;height: 64px;position: fixed;z-index: 15;top: 40px;left: 40px;}
.menu-btn:hover{box-shadow:0 0 0 0 rgba(10,10,50,0.15)}
.menu-btn .menu-btn__lines {position: absolute;top: 50%;left: 50%;-webkit-transform-origin: center center;-ms-transform-origin: center center;transform-origin: center center;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-webkit-transition: -webkit-transform .2s ease-out;transition: -webkit-transform .2s ease-out;transition: transform .2s ease-out;transition: transform .2s ease-out, -webkit-transform .2s ease-out; width: 20px;height: 13px;}
.menu-btn .menu-btn__line {display: block;position: absolute;left: 0;background-color: #200706;-webkit-transition: all .3s ease-out;transition: all .3s ease-out;height: 3px;width: 20px;}
.menu-btn .menu-btn__line:first-of-type {top:0;}
.menu-btn .menu-btn__line:last-of-type {bottom:0;}
.pushy-open-left .menu-btn .menu-btn__line:first-of-type {-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);top: 5px;}
.pushy-open-left .menu-btn .menu-btn__line:last-of-type {bottom: 5px;-webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);transform: rotate(-45deg);}
@media screen and (max-width:640px){
.menu-btn{width: 50px;height: 50px;top: 20px;left: 20px;}
.menu-btn .menu-btn__lines {}
.pushy-open-left .menu-btn .menu-btn__line:first-of-type {top: 5px;}
.pushy-open-left .menu-btn .menu-btn__line:last-of-type {bottom: 5px;}
}

.pushy {position: fixed;width: 240px;height: 100%;top: 0;z-index: 9999;background: #191918;overflow: auto;-webkit-overflow-scrolling: touch;/* enables momentum scrolling in iOS overflow elements */}
.pushy a{display:block; color:#b3b3b1; padding:15px 30px; text-decoration:none}
.pushy a:hover{color:#fff}
.pushy.pushy-left {left: 0;}
.pushy.pushy-right {right: 0;}
.pushy-content {visibility: hidden;}
@media screen and (max-width:640px){
.pushy {width: 200px;}
}


/* menu Movement */
.pushy-left {-webkit-transform: translate3d(-240px, 0, 0);-ms-transform: translate3d(-240px, 0, 0);transform: translate3d(-240px, 0, 0);}
.pushy-open-left .menu-btn,
.pushy-open-left > *:not(.pushy):not(.menu-btn):not(.site-overlay){-webkit-transform: translate3d(240px, 0, 0) ;-ms-transform: translate3d(240px, 0, 0) ;transform: translate3d(240px, 0, 0) ;}
.pushy-right {-webkit-transform: translate3d(240px, 0, 0);-ms-transform: translate3d(240px, 0, 0);transform: translate3d(240px, 0, 0);}
.pushy-open-right > *:not(.pushy):not(.menu-btn):not(.site-overlay),
.pushy-open-right .push {-webkit-transform: translate3d(-240px, 0, 0);-ms-transform: translate3d(-240px, 0, 0);transform: translate3d(-240px, 0, 0);}
.pushy-open-left .pushy,
.pushy-open-right .pushy {-webkit-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.pushy-open-left .pushy-content,
.pushy-open-right .pushy-content {visibility: visible;}
@media screen and (max-width:640px){
.pushy-left {-webkit-transform: translate3d(-200px, 0, 0);-ms-transform: translate3d(-200px, 0, 0);transform: translate3d(-200px, 0, 0);}
.pushy-open-left .menu-btn,
.pushy-open-left > *:not(.pushy):not(.menu-btn):not(.site-overlay) {-webkit-transform: translate3d(200px, 0, 0) ;-ms-transform: translate3d(200px, 0, 0);transform: translate3d(200px, 0, 0) ;}
.pushy-right {-webkit-transform: translate3d(200px, 0, 0);-ms-transform: translate3d(200px, 0, 0);transform: translate3d(200px, 0, 0);}
.pushy-open-right .push {-webkit-transform: translate3d(-200px, 0, 0);-ms-transform: translate3d(-200px, 0, 0);transform: translate3d(-200px, 0, 0);}
}

/* menu Transitions */
.pushy,
.push {transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);}
.pushy-content {transition: visibility 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);}

/* Site Overlay */
.site-overlay {display: none;}
.pushy-open-left .site-overlay,
.pushy-open-right .site-overlay {display: block;position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 14;background-color: rgba(0, 0, 0, 0.5);-webkit-animation: fade 500ms;animation: fade 500ms;}
@keyframes fade {0% {opacity: 0;}100% {opacity: 1;}}
@-webkit-keyframes fade { 0% {opacity: 0;} 100% {opacity: 1;}}

/* menu */
.pushy-content ul{ padding:0; margin:0; list-style:none}
.pushy-submenu ul{padding-left:15px; transition:max-height .2s ease-in-out,visibility .2s ease-in-out; font-size: 13px}
.pushy-submenu ul .pushy-link{transition:opacity .2s ease-in-out}
.pushy-submenu button{width:100%; color:#b3b3b1; padding:15px 30px; text-align:left; background:0 0; border:0;font-size: 13px}
.pushy-submenu button:hover{color:#fff}
.pushy-submenu>a, .pushy-submenu>button{position:relative}
.pushy-submenu>a::after, .pushy-submenu>button::after{content:''; display:block; height:11px; width:8px; position:absolute; top:50%; right:15px; background:url(../img/arrow.svg) no-repeat; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); transition:transform .2s}
.pushy-submenu-closed ul{max-height:0; overflow:hidden; visibility:hidden}
.pushy-submenu-closed .pushy-link{opacity:0}
.pushy-submenu-open ul{max-height:1000px; visibility:visible}
.pushy-submenu-open .pushy-link{opacity:1}
.pushy-submenu-open a::after, .pushy-submenu-open button::after{-webkit-transform:translateY(-50%) rotate(90deg); -ms-transform:translateY(-50%) rotate(90deg); transform:translateY(-50%) rotate(90deg)} 

	  
/* ==================================

 contents
 
================================== */
.container{width: 100%; height: 500px; background: #00A676; color: #fff; display: flex;align-items: center;justify-content: center;}
.container:nth-of-type(2){background: #09634A}
.container:nth-of-type(3){background: #36F9C2}
.container:nth-of-type(4){background: #2C473F}

基本的には編集の必要はありません。
メニューの出現を右からとした場合、メニューボタンの位置を変更したくなるかもしれません。その場合、11行目〜のメニューボタンに関するCSSを調整してください。

対応ブラウザ

一通り以下ブラウザでの挙動確認は取れております。
※古いバージョンでの確認はおこなっておりませんので、使用前に一度ご確認いただくことをお勧めします。

Safari / Google Chrome / InternetExplorer / Microsoft Edge / Mozilla Firefox

そのほかのおすすめフレーム

あらかじめ深い階層を想定したフレーム。カテゴリ階層の深いサイトではこちらがおすすめです。
http://mmenu.frebsite.nl/

以上、簡単なページを作成する際によく使うことがあるので書き残しました。

前の記事

JavaScript
JavaScript徹底ガイド｜関数の基礎について学ぶ

次の記事

ファッションサイトやインテリアサイトで使える！ランディンク…
フレームワーク