React JSXでハンバーガーメニューをページ全体に合わせる方法

Question

<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)} >

Answer 1

ページ全体を白または別の背景色で埋めるには、高さを 100vh に設定し、幅を 100vw に設定した外側の div が必要です。 100vh は高さを Web ブラウザ画面のビューポートの高さの 100% に設定し、100vw は高さをビューポートの幅の 100% に設定します。

リーリー

maxWidth を 100% に設定するのは、body タグにパディングがある場合や他の外部コンポーネントがスペースを占有している場合に、スクロール バーが表示されないようにするためです。

上記により、motion.nav コンポーネントがページ全体を占めるようになります。コンポーネントの JSX を使用するために、ページ div 全体を上に移動することができます。

＃＃＃お役に立てれば。