投稿

2月, 2021の投稿を表示しています

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="c