如何在react jsx中使汉堡菜单适合整个页面
P粉368878176
P粉368878176 2023-08-31 14:31:09
0
1
517
<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)} > className="填充当前 h-3 w-3" viewBox=“0 0 20 20” xmlns=“http://www.w3.org/2000/svg” > <标题>菜单 <路径d=“M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z” >> </svg> </按钮>
;
<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>
效率
xmlns=“http://www.w3.org/2000/svg” 填充=“无” viewBox=“0 0 24 24” 笔画宽度={1} 描边=“当前颜色” 类名=“w-4 h-4” > <路径 笔划线帽=“圆形” 笔划线连接=“圆形” d=“M19.5 8.25l-7.5 7.5-7.5-7.5” >> </svg>
; ) : (
<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" > 效率
)}
; > </motion.nav> ); }</pre></p>
P粉368878176
P粉368878176

全部回复(1)
P粉596161915

要用白色或其他背景颜色填充整个页面,您需要一个外部 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。

希望这有帮助。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板