TCDテーマSwitch：スマホのハンバーガーメニューを開いたときにボタンのアイコンを「×」にする方法

Q.質問内容

スマホのハンバーガーメニューを開いたときに、三本線のボタンのアイコンを、バツ印などに変えられますか？

▼変更箇所イメージ

A.カスタムスクリプト・カスタムCSSでアレンジ可能です

Switchテーマでは、スマホのハンバーガーメニューのアイコンデザインは、メニューが開いてもそのままのデザインとなっていますが、TCDテーマに含まれるアイコンフォントを使用して、「×」印に変更する方法をご紹介します。

手順

カスタムスクリプトを使用して、ボタンを押したときに開閉中を示すクラス属性を付加します。
そのクラスが付いている場合のスタイルをカスタムCSSでアレンジします。

▼カスタムスクリプト

<script>
jQuery(document).ready(function($) {
    $('#js-menu-btn').click(function() {
        $(this).toggleClass('is-hamburger-open');
    });
});
</script>

▼カスタムCSS

.c-menu-btn.is-hamburger-open::before{
  content: "\e91a"; /*バツ印のアイコンフォントの文字コード*/
  font-size: 1.5em;
}

▼変更後イメージ

備考

• そのままのサイズでは少し小さいため、フォントの大きさを調節しています。
• フェードのアニメーションはありません。