<p>我对 React jsx 很陌生，我正在使用 Tailwind，它非常好。我也在边走边学。因此，在我的导航中，我能够显示汉堡菜单，但我不喜欢它们的显示方式。我试图确保整个页面都充满白色页面，请参见下面的第二张图片。</p>
<p>这就是我能够实现的目标，但我认为它看起来不太干净</p>
<p>我想要实现的目标，或类似的目标，白色填充整个网站并显示选项</p>
<p>我现在的问题是，用我的代码；我怎样才能做到这一点？这是我的导航 jsx，我将不胜感激任何帮助。我是唯一的团队成员，没有首席开发人员可以提供帮助。</p>
<pre class="brush:php;toolbar:false;">import logo from "./favicon.png";
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";
import MenuDropdown from "./MenuDropdown";
import { Link } from "react-router-dom";
import { useState } from "react";
export default function Navigation() {
const [ref, inView] = useInView({ triggerOnce: false });
const [isOpen, setIsOpen] = useState(false);
const [navVisible, setNaVisible] = useState(false);
const megaMenu = document.getElementById("mega-menu");
return (
<motion.nav
className="flex items-center justify-between flex-wrap px-6 lg:px-12 py-8 max-w-full mx-auto"
ref={ref}
initial={{ y: -10, opacity: 0 }}
animate={inView ? { y: 0, opacity: 1 } : {}}
exit={{ y: -10, opacity: 0 }}
transition={{ duration: 0.5 }}
>
<a
href="/"
className="flex flex-row items-center flex-shrink-0 text-white mr-6 lg:pr-16 space-x-2"
>
<img src={logo} className="w-8 h-8" alt="Logo"></img>
<h2 className="font-bold text-2xl tracking-tight">Jibu Labs</h2>
</a>
<div id="menu" className="block lg:hidden">
<button
className="flex items-center px-3 py-2 border rounded text-slate-200 border-slate-400 duration-100 hover:text-white hover:border-white"
onClick={() => setNaVisible(!navVisible)}
>
<svg
className="fill-current h-3 w-3"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div
className={`
${
navVisible
? "w-full block flex-grow g:flex lg:items-center lg:w-auto"
: "lg:flex flex-none w-6/12 hidden lg:content-right"
}`}
>
<div
className={`
${
navVisible
? "lg:flex-grow flex flex-col text-sm"
: "lg:flex-grow flex flex-rows space-x-12 text-sm "
}`}
>
<div
className={`${
!navVisible
? "flex flex-rows items-center space-x-2 text-white"
: "flex flex-rows items-center space-x-2 text-white justify-end pr-12"
}`}
>
<span className="ring-1 p-0.5 ring-white rounded-full"></span>
<Link
to="projects"
className={`${
!navVisible
? "block mt-4 lg:inline-block lg:mt-0 text-white mr-4"
: "block mt-4 lg:inline-block lg:mt-0 text-white mr-4 justify-end "
}`}
>
Work
</Link>
</div>
{!navVisible ? (
<div
id="mega-menu"
className={`flex items-center space-x-2 flex-rows text-white
`}
onClick={() => setIsOpen((prev) => !prev)}
>
<span className="ring-1 p-0.5 ring-white rounded-full"></span>
<div className="block mt-4 lg:inline-block lg:mt-0 mr-4 cursor-pointer">
Effeciencies
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</div>
) : (
<div
className={`${
!navVisible
? "flex flex-rows items-center space-x-2 text-white"
: "flex flex-rows items-center space-x-2 text-white justify-end"
}`}
>
<span className="ring-1 p-0.5 ring-white rounded-full"></span>
<Link
to="strategy"
className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4 justify-end pr-1"
>
Effeciencies
</Link>
</div>
)}
<div
className={`${
!navVisible
? "flex flex-rows items-center space-x-2 text-white"
: "flex flex-rows items-center space-x-2 text-white justify-end pr-10"
}`}
>
<span className="ring-1 p-0.5 ring-white rounded-full"></span>
<a
href="about"
className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4"
>
About
</a>
</div>
<div
className={`${
!navVisible
? "flex flex-rows items-center space-x-2 text-white"
: "flex flex-rows items-center space-x-2 text-white justify-end pr-7"
}`}
>
<span className="ring-1 p-0.5 ring-white rounded-full"></span>
<a
href="careers"
className="block mt-4 lg:inline-block lg:mt-0 text-white mr-7"
>
Careers
</a>
</div>
<div
className={`${
!navVisible
? "flex flex-rows items-center space-x-2 text-white"
: "flex flex-rows items-center space-x-2 text-white justify-end pr-7"
}`}
>
<span className="ring-1 p-0.5 ring-white rounded-full"></span>
<a
href="contact"
className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4"
>
Contact
</a>
</div>
</div>
</div>
<MenuDropdown isOpen={isOpen} setIsOpen={setIsOpen} />
</motion.nav>
);
}</pre></p>
1
871
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
要用白色或其他背景颜色填充整个页面，您需要一个外部 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。
希望这有帮助。