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

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

   

LINEで送る
Pocket

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

この記事の目次

  1. 今回作成するメニューの仕様とデモ
  2. HTMLの作成
  3. CSSの作成
  4. jQueryの作成
  5. レスポンシブにする場合
  6. まとめ

レスポンシブサイトやスマホサイトでは、ドロワーメニュー(スマホメニュー、ハンバーガーメニューとも呼ばれる)を必ずと言っていい程実装しますよね。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;
}

}

まとめ

見ていただいたように、シンプルなドロワーメニューを作成するのはそこまで難しくありません。プラグインは確かに多機能ですが、不具合等も起こりやすいのも事実です。もし、シンプルなドロワーメニューで構わないときは、自作してしまった方が管理もしやすいかと思います。
ぜひ、参考にしてみてください。

LINEで送る
Pocket