← 動的パーツギャラリーへ戻る

パーツ番号 08-09-11 ・ JavaScript使用

ハンバーガー⇄クローズ モーフィングボタン

クリックするたびに3本線のアイコンがなめらかに×印へ変形します。WordPressのモバイルナビゲーションメニューの開閉ボタンに使えます。

mobileclickjs

プレビュー

ソースコード

HTML

<button class="d08-09-11-btn" type="button" aria-label="メニューを開閉する" aria-expanded="false">
          <span class="d08-09-11-bar"></span>
          <span class="d08-09-11-bar"></span>
          <span class="d08-09-11-bar"></span>
        </button>

CSS

.d08-09-11-btn{position:relative;width:52px;height:52px;border-radius:14px;background:#f3f4f8;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;-webkit-tap-highlight-color:transparent}
        .d08-09-11-btn:hover{background:#e9eafc}
        .d08-09-11-bar{display:block;width:24px;height:3px;border-radius:2px;background:#3a3d4a;transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .2s ease}
        .d08-09-11-btn.is-open .d08-09-11-bar:nth-child(1){transform:translateY(9px) rotate(45deg)}
        .d08-09-11-btn.is-open .d08-09-11-bar:nth-child(2){opacity:0}
        .d08-09-11-btn.is-open .d08-09-11-bar:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
        .d08-09-11-btn.is-open .d08-09-11-bar{background:#6a5cff}

JavaScript

(function(){
        var root=document.getElementById('item-08-09-11');if(!root)return;
        var btn=root.querySelector('.d08-09-11-btn');if(!btn)return;
        btn.addEventListener('click',function(){
          var open=btn.classList.toggle('is-open');
          btn.setAttribute('aria-expanded',open?'true':'false');
        });
      })();

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