如何在react jsx中使漢堡選單適合整個頁面

Question

<p>我對 React jsx 很陌生，我正在使用 Tailwind，它非常好。我也在邊走邊學。因此，在我的導航中，我能夠顯示漢堡選單，但我不喜歡它們的顯示方式。我試圖確保整個頁面都充滿白色頁面，請參見下面的第二張圖片。 </p> <p>這就是我能夠實現的目標，但我認為它看起來不太乾淨</p> <p>我想要實現的目標，或類似的目標，白色填充整個網站並顯示選項</p> <p>我現在的問題是，用我的程式碼；我怎麼能做到這一點？這是我的導航 jsx，我將不勝感激任何幫助。我是唯一的團隊成員，沒有首席開發人員可以提供協助。</p>

從「./favicon.png」匯入標誌；
從“framer-motion”導入{motion}；
從“react-intersection-observer”導入{useInView}；
從“./MenuDropdown”導入MenuDropdown；
從“react-router-dom”導入{連結}；
從“react”導入{useState}；

匯出預設函數 Navigation() {
  const [ref, inView] = useInView({ triggerOnce: false });
  const [isOpen, setIsOpen] = useState(false);

  const [navVisible, setNaVisible] = useState(false);

  const megaMenu = document.getElementById(“mega-menu”);

  返回 （
    <運動導航
      className =“flex items-center justify- Between flex-wrap px-6 lg:px-12 py-8 max-w-full mx-auto”
      參考={參考}
      初始={{ y: -10, 不透明度: 0 }}
      動畫={在視圖中？ { y: 0, 不透明度: 1 } : {}}
      退出={{ y: -10, 不透明度: 0 }}
      過渡={{持續時間:0.5}}
    >
      
        <img src={logo} className=“w-8 h-8” alt="標誌"></img>
        
Jibu Labs
      </a>

      

        <按鈕
          className =“flex items-center px-3 py-2 border rounded text-slate-200 border-slate-400uration-100 懸停：文字白色懸停：邊框白色”
          onClick={() =>; setNaVisible(!navVisible)}
        >
          
;
      

        

          

            <span className=“ring-1 p-0.5 環-白色圓形-全”</span>
            <連結
              to=“項目”
              類別名稱={`${
                !nav可見
                  ？ “區塊 mt-4 lg:內嵌區塊 lg:mt-0 文字白色 mr-4”
                  ：“塊 mt-4 lg:inline-block lg:mt-0 text-white mr-4 justify-end”
              }`}
            >
              工作
            
          

          {!nav可見？ （
            
; setIsOpen((上一個) => !上一個)}
            >
              <span className=“ring-1 p-0.5 環-白色圓形-全”</span>
              

                效率
              
              
;
          ) : (
            

              <span className=“ring-1 p-0.5 環-白色圓形-全”</span>
              <連結
                to＝“策略”
                className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4 justify-end pr-1"
              >
                效率
              
            
          )}

          

            <span className=“ring-1 p-0.5 環-白色圓形-全”</span>
            
              關於
            </a>
          

          

            <span className=“ring-1 p-0.5 環-白色圓形-全”</span>
            
              職業機會
            </a>
          

          

            <span className=“ring-1 p-0.5 環-白色圓形-全”</span>
            
              接觸
            </a>
          

        

      
;

      >
      
    </motion.nav>
  ）；
}</pre></p>

Answer 1

要用白色或其他背景顏色填滿整個頁面，您需要一個外部 div，將高度設定為 100vh，寬度設定為 100vw。 100vh 表示將高度設定為 Web 瀏覽器螢幕視窗高度的 100%，100vw 表示將高度設定為視窗寬度的 100%。

return (
   <div style={{height: "100vh", width: "100vw", maxWidth: "100%", background: "white"}}>
    <motion.nav
      className="flex items-center justify-between flex-wrap px-6 lg:px-12 
   ...
    </motion.nav>
  </div>

將 maxWidth 設為 100% 是為了防止在 body 標籤有 padding 或有其他外部元件佔用空間時顯示捲軸。

以上使得motion.nav元件佔據整個頁面。您可能希望將整個頁面 div 向上移動到使用該元件的 JSX。

希望這有幫助。