ヘッダーメニューの改善

カテゴリー:技術

目次

    レスポンシブ対応のためにスマホの時はハンバーガーメニューにしました。

    useStateで状態管理してgsapでメニューにアニメーションしています。ぜひこのサイトをスマホで開いてみていただけると幸いです。

    メニュー更新部分のコード

    const container = useRef<HTMLDivElement>(null);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const toggleFunction = () => {
    setIsMenuOpen(!isMenuOpen);
    console.log(isMenuOpen);

    if (!isMenuOpen) {
      const menuElement = document.querySelector(".ham-menu");
      const menuLink = document.querySelectorAll(".menu-link");
      gsap.to(menuElement, {
        duration: 1,
        opacity: 1,
        height: "60vh",
        display: "flex",
        ease: "expo.inOut",
      });
      menuLink.forEach((e) => {
        gsap.to(e, {
          duration: 1,
          delay: 0.5,
          opacity: 1,
          y: 20,
          stagger: 0.1,
          ease: "expo.inOut",
        });
      });
    } else {
      const menuElement = document.querySelector(".ham-menu");
      const menuLink = document.querySelectorAll(".menu-link");
      gsap.to(menuElement, {
        duration: 1,
        height: 0,
        display: "none",
        delay: 0.5,
        ease: "expo.inOut",
      });
      menuLink.forEach((e) => {
        gsap.to(e, {
          duration: 1,
          opacity: 0,
          y: 0,
          stagger: 0.1,
          ease: "expo.inOut",
        });
      });
    }
  };