<p>私は React jsx を初めて使用します。Tailwind を使用していますが、これは非常に優れています。私もやりながら勉強中です。それで、私のナビゲーションではハンバーガーメニューを表示することができますが、その表示方法が好きではありません。ページ全体が白で塗りつぶされていることを確認しようとしています。下の 2 番目の画像を参照してください。 </p> <p>これは私が達成できたものですが、見た目があまりきれいではないと思います</p> <p>私が達成したいこと、またはそのようなことは、サイト全体を白で塗りつぶし、オプションを表示することです</p> <p>今の質問は、私のコードについてですが、どうすればこれを実行できるでしょうか?これは私のナビゲーション jsx です。何か助けていただければ幸いです。チームメンバーは私だけで、サポートしてくれる主任開発者はいません。</p> <pre class="brush:php;toolbar:false;">「./favicon.png」からロゴをインポートします; import { motion } from "framer-motion"; import { useInView } from "react-intersection-observer"; 「./MenuDropdown」から MenuDropdown をインポートします。 import { Link } from "react-router-dom"; import { useState } from "react"; デフォルト関数 Navigation() をエクスポート { const [ref, inView] = useInView({triggerOnce:false}); const [isOpen, setIsOpen] = useState(false); const [navVisible, setNaVisible] = useState(false); const megaMenu = document.getElementById("メガメニュー"); 戻る （ <モーション.ナビ className="flex items-center justify-between flex-wrap px-6 lg:px-12 py-8 max-w-full mx-auto" ref={ref} 初期値={{ y: -10、不透明度: 0 }} animate={inView ? { y: 0、不透明度: 1 } : {}} exit={{ y: -10、不透明度: 0 }} 遷移={{ 期間: 0.5 }} > <img src={logo} className="w-8 h-8" alt="ロゴ"></img> <h2 className="font-bold text-2xl tracking-tight">Jibu Labs</h2> </a> <div id="メニュー" className="ブロック lg:hidden"> <ボタン className="flex items-center px-3 py-2 borderrounded text-slate-200 border-slate-400duration-100 hover:text-white hover:border-white" onClick={() => setNaVisible(!navVisible)} >