html - 如何将导航栏向右移动并应用背景颜色?
问题描述
我正在使用一个简单的应用程序react + tailwind
,我目前正在研究导航栏部分。
导航栏.js:
import React from "react";
export default function Navbar({ fixed }) {
const [navbarOpen, setNavbarOpen] = React.useState(false);
return (
<>
<nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3">
<div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
<a
className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="#pablo"
>
Logo 1
</a>
<button
className="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
type="button"
onClick={() => setNavbarOpen(!navbarOpen)}
>
<i className="fas fa-bars"></i>
</button>
</div>
<div
className={
"lg:flex flex-grow items-center" +
(navbarOpen ? " flex" : " hidden")
}
id="example-navbar-danger"
style={{ flexDirection: "column" }}
>
<ul className="flex flex-col lg:flex-row list-none">
<li className="nav-item">
<a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
Row 1 - Menu 1
</a>
</li>
<li className="nav-item">
<a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
Row 1 - Menu 2
</a>
</li>
<li className="nav-item">
<a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
Row 1 - Menu 3
</a>
</li>
</ul>
</div>
</div>
</nav>
</>
);
}
并在此处完成工作示例:
https://codesandbox.io/s/tailwind-css-and-react-forked-1y10y
问题和尝试的事情:
在当前场景中,背景色粉红色应用于整个标题布局。
我可以理解这是因为我已将 css 类名
bg-pink-500
应用于整个导航栏。但是,如果我将此背景颜色移动到任何子 div,则它不会按预期工作。
要求:
要求是在响应式视图中,整个布局需要完全像这样,
| -- Logo -- This bar needs to have bg-pink -- Hamburger Icon -- |
| |
| -- Row 1 - Menu 1 -- |
| -- Row 1 - Menu 2 -- | --> Only this area have bg-pink
| -- Row 1 - Menu 3 -- |
| -- Row 2 - Menu 1 -- |
请帮助我实现bg-pink
仅顶部导航栏和右侧菜单项栏的颜色。
当前 UI 可以在这个链接中查看:https ://1y10y.csb.app/ (请切换到响应模式)
解决方案
您可以通过在将用作侧边栏的 div 上使用position
as来实现此目的。fixed
但是对于其他大屏幕,您需要删除位置属性,它将显示在导航栏的中间。
试试下面的东西: -
import React from "react";
export default function Navbar({ fixed }) {
const [navbarOpen, setNavbarOpen] = React.useState(false);
return (
<>
<nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3">
<div
className="container px-4 mx-auto flex flex-wrap items-center justify-between"
style={{ position: "relative" }}
>
<div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
<a
className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="#pablo"
>
Logo 1
</a>
<button
className="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
type="button"
onClick={() => setNavbarOpen(!navbarOpen)}
>
<i className="fas fa-bars"></i>
</button>
</div>
<div
className={
"lg:flex flex-grow items-center" +
(navbarOpen ? " flex" : " hidden")
}
id="example-navbar-danger"
style={{
flexDirection: "column",
position: "fixed",
right: 0,
top: "41px",
zIndex: 99999,
background: "#ed64a6",
height: "100%",
minWidth: "200px"
}} // added flex direction column because I will have another navbar below this.
>
<ul className="flex flex-col lg:flex-row list-none">
<li className="nav-item">
<a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
Row 1 - Menu 1
</a>
</li>
<li className="nav-item">
<a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
Row 1 - Menu 2
</a>
</li>
<li className="nav-item">
<a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
Row 1 - Menu 3
</a>
</li>
</ul>
</div>
</div>
</nav>
</>
);
}
推荐阅读
- python - 安装 pywebview Python windows 时出错
- c# - 如何在两个方法执行之间进行延迟?
- javascript - 如何使用 Jquery 将 div 内容导出到 Excel?
- java - JDBC - 是否可以从一个表中选择数据并将其存储在 javax.swing.JTable 或 String[][] 中?
- android - 在 xamarin android 中实现 admob 抛出 Java.Lang.RuntimeException
- ocaml - 如何同步执行 Lwt 线程
- swift - 有没有办法用英寸而不是点来定义视图的框架?
- android - Android Gradle 使用 DeprecationLogger.nagUserWith 更新到 6.2.2 NoSuchMethodError
- java - 爪哇。摇摆。使 setDefaultCloseOperation 关闭当前框架,但在单击右上角的 X 按钮时也打开另一个框架
- python - 如何根据 django 模板中的数据库值将单选按钮设置为选中?