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

2021年02月25日 11:18
カテゴリ: ホームページ制作系

INDEX - 目次 -

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;
}

これで完了です。

slimMenuスマホ

この記事が少しでも役立ったらハートを押してね！

執筆者

大岩智将

大岩 智将 OHIWA Tomoyuki

兵庫県加古川市を拠点に活動するWebディレクター / デザイナー。「縁グラフィクション」代表。 お客様との「縁」を大切に、心に響くクリエイティブを提案しています。 日々の制作の裏側や、役立つTipsをブログで発信中。→詳しい紹介

【レンタルサーバーご検討中の方へ】
このブログはエックスサーバーを使用しています。
さくらインターネットも使いやすいですよ。

同じカテゴリの記事