ドロワーメニューをプラグイン無しで簡単に自作する方法

2022年9月27日

レスポンシブサイトやスマホサイトでは、ドロワーメニュー（スマホメニュー、ハンバーガーメニューとも呼ばれる）を必ずと言っていい程実装しますよね。jQueryのプラグインも豊富で、簡単に設定できますが、ブラウザの対応状況やバージョンによって不具合が発生したりと何かと面倒なこともあります。

そこで、今回はプラグイン無しで、CSSと簡単なjQueryでシンプルなドロワーメニューを自作していきたいと思います。

この記事の目次

今回作成するメニューの仕様とデモ

今回は、シンプルなドロワーメニューを作成していきます。仕様としては、レスポンシブでコンテンツ幅が720px以下の場合、表示させます。また、レイアウトにはflexboxを使用しています。動きとしては、jQueryとCSS3のtransformプロパティを使用しています。

デモはこちら

HTMLの作成

まずは、HTMLです。全体を<header>で囲み、ロゴ部分とトグル部分をdrawerクラスで囲んでいます。ナビゲーション部分はmenuクラスで囲んでいます。HTML構造としては他にも考えられるのですが、今回はBootstrap4の構造に近づけてみました。

<nav>
 <div class="drawer">
  <a class="navbar_brand" href="#">Navbar</a>
  <div class="navbar_toggle">
   <span class="navbar_toggle_icon"></span>
   <span class="navbar_toggle_icon"></span>
   <span class="navbar_toggle_icon"></span>
  </div>
 </div>
 <div class="menu">
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Service</a></li>
   <li><a href="#">access</a></li>
  </ul>
 </div>
</nav>

CSSの作成

次に、CSSです。今回は、トグルバーをwidthとheightで設定していますが疑似要素やborderで表現することもできますので適宜修正してください。また、ナビゲーションのOPENとCLOSE時はtransformプロパティで横移動させます。その際は滑らかに動いてほしいので、transitionプロパティも併せて使用します。つまり、「トグルボタンをタップすると、予めtransformで見えなくしていたナビゲーション部分を、元の位置に滑らかに戻す。」という動きにしています。

また、トグル部分もタップすると形を変化させています。こちらもtransformプロパティで角度を変えています。

全体レイアウト

nav{
 width: 100%;
 height: 70px;
 position: relative;
 background: #F6F6F6;
}

.drawer{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 position: relative;
 height: 70px;
 padding: 0 1em;
}

トグル部分

.navbar_toggle{
 z-index:9999;
}

.navbar_toggle_icon {
 position: relative;
 display: block;
 height: 2px;
 width: 30px;
 background: #5c6b80;
 -webkit-transition: ease .5s;
 transition: ease .5s;
}

.navbar_toggle_icon:nth-child(1) {
 top: 0;
}

.navbar_toggle_icon:nth-child(2) {
 margin: 8px 0;
}

.navbar_toggle_icon:nth-child(3) {
 top: 0;
}
/*OPEN時の動き*/
.navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
 top: 10px;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}

.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 opacity: 0;
}

.navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
 top: -10px;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
}

ナビゲーション部分

.menu{
 -webkit-transform: translateX(-100%);
 transform: translateX(-100%);
 -webkit-transition:ease .5s;
 transition:ease .5s;
 z-index:1000;
}

.menu ul li{
 padding: 2em;
 border-bottom: 1px solid #CCC;
}
/*OPEN時の動き*/
.menu.open {
 -webkit-transform:translateX(0);
 transform:translateX(0);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
}

jQueryの作成

最後に、jQueryを設定していきましょう。ここでは、トグルボタンをタップした際にトグルボタンとナビゲーションにそれぞれ「.open」クラスを付けます。下記をの直前に挿入します。

<script>
$(function() {
 $('.navbar_toggle').on('click', function () {
  $(this).toggleClass('open');
  $('.menu').toggleClass('open');
 });
});
</script>

レスポンシブにする場合

ここからはレスポンシブ対応させるための設定です。
ウィンドウ幅が720pxより大きい場合は、通常のナビゲーションメニューにします。

@media screen and (min-width: 720px) {
nav{
 display: flex;
 flex-direction: row;
}

.navbar_toggle{
 display: none;
}

.menu{
 width: 100%;
 -webkit-transform: translateX(0);
 transform: translateX(0);
}

.menu ul{
 height: 70px;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-items: center;
}

.menu ul li{
 padding: 0 1em;
 border-bottom: none;
}

}