簡単にかっこいいメニューを実装したい！jQueryプラグイン OffCanvasMenuEffects(sideslide)実装方法

はじめに

いざ、プラグイン実装しようとしたときに調べて、はいできたー！と
なかなか上手くはいかないものです。（いつもどこかしら修正してる笑）

なので、今回修正した部分をログとして残し、同じ失敗をしないようにと思い書こうと思った所存です。

ソースコード

OffCanvasMenuEffectsからソースコードをダウンロード。

使用するファイル

ダウンロードしたファイルを使うフォルダへ移動

CSS
　OffCanvasMenuEffects/css/menu_sideslide.css

JavaScript
　OffCanvasMenuEffects/js/classie.js
　OffCanvasMenuEffects/js/main.js

HTML
　OffCanvasMenuEffects/sideslide.htmlファイルの一部

sideslide.html　使用する部分

<div class="container">
  <div class="menu-wrap">
    <nav class="menu">
      <div class="icon-list">
        <a href="#"><i class="fa fa-fw fa-star-o"></i><span>Favorites</span></a>
        <a href="#"><i class="fa fa-fw fa-bell-o"></i><span>Alerts</span></a>
        <a href="#"><i class="fa fa-fw fa-envelope-o"></i><span>Messages</span></a>
        <a href="#"><i class="fa fa-fw fa-comment-o"></i><span>Comments</span></a>
        <a href="#"><i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span></a>
        <a href="#"><i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span></a>
      </div>
    </nav>
    <button class="close-button" id="close-button">Close Menu</button>
  </div><!-- /menu-wrap-->
  <button class="menu-button" id="open-button">Open Menu</button>
  ...
  ...
</div><!-- /container -->

ファイル修正

HTML

sideslide.htmlにある<div class="container">のクラス名はよく使われていて競合する可能性がある。
自分で定義したものがあったり、bootstrapを使っていてmargin: 15pxってなに？
と時間をロスしてしまうかもしれないのでクラス名を変えておこう。

※例

sideslide.html　変更箇所

<div class="container"> // 下のクラス名に変更
<div class="menu_container">

CSS

sideslide.htmlの変更を終えたら、対応するmenu_sideslide.cssの中にあるコードから、
最初に使われていた.containerを探して.menu_containerに修正する。

menu_sideslide.css　修正部分

html,
body,
.container, ←この部分
.content-wrap {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.container { ←この部分
    background: #373a47;
}

←この部分のコードをmenu_containerに変更する。

JavaScript

一番やっかいだったのがこれ。

main.js

(function() {
    ...
    ...
}

組み込む際にはDOM要素読み込みんでから動作して欲しいので、
$ を追加してあげる。
$(function() {に変更してあげて終わり。

最後に

実装して使ってみると気持ちいいですね！