slimMenuで3本線とバツの切り替え

slimMenuをそのまま使った場合、スマホ表示でメニューの3本線をタップしてメニューが開いても3本線のままです。

×マークに変わってほしいなと思い改造したのですが、検索しても情報がなかったのでこれを書くことにしました。 

slimMenu自体の設置の仕方はいろいろな方が説明記事を公開してくださっているので省略します。

ミソはactiveクラス付与

jquery.slimmenu.jsなら59行目

            $menuCollapser.on('click', '.collapse-button', function (e) {

                e.preventDefault();

                $menu.slideToggle(options.animSpeed, options.easingEffect);

            });

これを

            $menuCollapser.on('click', '.collapse-button', function (e) {

                e.preventDefault();

                $menu.slideToggle(options.animSpeed, options.easingEffect),

                $(this).toggleClass('active'); return false;

            });

こうします。

3行目の後ろを;→,に変更で「$(this).toggleClass('active'); return false;」を追加。

jquery.slimmenu.min.jsを使う場合もやることは同じ。

これで、メニューを開いた時に

<div class="collapse-button">

にactiveというクラスが付与され

<div class="collapse-button active">

となります。

あとはCSSで3本線を動かすだけですね。

CSSで3本線をバツ印に

これは検索すればいろんなアニメーションが出てきますが、一例として…

.collapse-button .icon-barに
transition: all .4s;とposition: relative;を書き足しておく。

cssファイル内に新たに下記を追加

↓

.collapse-button span:nth-of-type(1) {
bottom: 0px;
}
.collapse-button span:nth-of-type(3) {
top: 0px;
}
.menu-collapser .active span:nth-of-type(1) {
transform: translateY(20px) rotate(-45deg);
bottom: 12px;
}
.menu-collapser .active span:nth-of-type(2) {
display: none;
}
.menu-collapser .active span:nth-of-type(3) {
transform: translateY(-20px) rotate(45deg);
top: 20px;
}

これで完了です。