パーツ番号 08-03-03 ・ JavaScript使用

SVGアイコンモーフ（メニュー⇔閉じる）

クリックで3本線が滑らかにXへ変形し、再クリックで戻ります。WordPressのモバイルハンバーガーメニューにそのまま流用できます。

mobileclickjs

プレビュー

ソースコード

HTML

<button class="d08-03-03-btn" type="button" aria-label="メニュー">
          <svg viewBox="0 0 44 44" width="44" height="44">
            <line class="d08-03-03-l d08-03-03-top" x1="10" y1="15" x2="34" y2="15"/>
            <line class="d08-03-03-l d08-03-03-mid" x1="10" y1="22" x2="34" y2="22"/>
            <line class="d08-03-03-l d08-03-03-bot" x1="10" y1="29" x2="34" y2="29"/>
          </svg>
        </button>

CSS

.d08-03-03-btn{background:#1f2233;border:none;border-radius:12px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;cursor:pointer}
        .d08-03-03-l{stroke:#fff;stroke-width:2.5;stroke-linecap:round;transition:transform .35s cubic-bezier(.6,0,.2,1),opacity .2s;transform-origin:22px 22px}
        .d08-03-03-btn.is-x .d08-03-03-top{transform:translateY(7px) rotate(45deg)}
        .d08-03-03-btn.is-x .d08-03-03-mid{opacity:0}
        .d08-03-03-btn.is-x .d08-03-03-bot{transform:translateY(-7px) rotate(-45deg)}

JavaScript

(function(){
        var btn=document.querySelector('#item-08-03-03 .d08-03-03-btn');if(!btn)return;
        btn.addEventListener('click',function(){btn.classList.toggle('is-x');});
      })();

クラス名 .d08-03-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。