Reactでハンバーガーメニューを実装するとき、動きや見た目を完全分離させて実装したいと思った。その場合は一番上のDOM階層のhtml要素にclass属性を付与して、ボタンの表示非表示やボタンの形状などを変更するのがロジック的には最もシンプルだろう。メリットとしては…

• html要素にclassを付与することで全体のスタイル実装が容易になる
• style属性による表示の制御は、レスポンシブの観点からバッドノウハウである
• ハンバーガーメニュー表示中は全体スクロールを抑制したい
• ロジック・見た目とギミックは分離したい

ReactのuseStateでハンバーガーメニューのボタンのオンオフを制御だけして、html要素へは単純にtoggleClassするだけにした。もっといい方法があるかもしれないが、今回のアプリケーションはこれが最適だったが、別にここはReactでなくてもいいじゃんね…とは思ったけど。

JavaScript部分

〜略〜
 const [isMenu, setisMenu] = useState(false);
 const onClickToggle = () => {
  setisMenu(!isMenu);
  //htmlタグにclass属性をtoggleする
  if(isMenu){
   document.documentElement.classList.remove('menuActive');
  }else{
   document.documentElement.classList.add('menuActive');
  }
 }
 return (
  <div>
   <button onClick={onClickToggle} className="btn_menu">[ハンバーガーメニューボタン]</button>
  </div>
 );
〜略〜

CSS部分

.menuActive{
 /*メニューが出現したらページ全体のスクロール制御*/
 overflow: hidden;
}
.nav_menu{
 /*メニュー部分　詳細は中略*/
 /*メニューが出現するアニメーション制御*/
 transform: translateX(-100%);
 transition: .25s transform;
}
.menuActive .nav_menu{
 /*アニメーションでメニューが出現*/
 transform: translateX(0%);
}
.btn_menu{
 /*ハンバーガーメニュー部分　詳細は中略*/
}
.menuActive .btn_menu{
 /*ハンバーガーメニュー押下した状態　ボタンの形状を「×」に切り替えるなど*/
}

おしまい♥

タグ：React