![working]( "working")
本文介绍了如何将导航栏向右移动并应用背景颜色?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
限时删除！！
我正在使用 react + tailwind 制作一个简单的应用程序，我目前正在处理导航栏部分.
Navbar.js:
从反应"导入反应；导出默认功能 Navbar({ 固定 }) {const [navbarOpen, setNavbarOpen] = React.useState(false);返回 (<><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-wrap items-center justify-between"><div className="w-full 相对 flex justify-between lg:w-auto lg:static lg:block lg:justify-start>setNavbarOpen(!navbarOpen)}><i className="fas fa-bars"></i>
<li className="nav-item"><a className="px-3 py-2 flex items-center text-xs大写字体-粗体前导-snug text-white hover:opacity-75">第 1 行 - 菜单 2</a>
<a className="px-3 py-2 flex items-center text-xs大写字体-粗体前导-snug text-white hover:opacity-75">第 1 行 - 菜单 3</a></nav></>);}
完整的工作示例:
https://codesandbox.io/s/tailwind-css-and-react-forked-1y10y
问题和尝试的方法:
要求:
要求是在响应式视图中，整个布局需要完全像这样，
|-- Logo -- 这个酒吧需要有 bg-pink -- 汉堡包图标 -- ||||-- 第 1 行 - 菜单 1 -- ||-- 第 1 行 - 菜单 2 -- |-->只有这个区域有bg-pink|-- 第 1 行 - 菜单 3 -- ||-- 第 2 行 - 菜单 1 -- |
请点击此图片查看类似预期一个>
请帮我实现 bg-pink 颜色仅用于顶部导航栏和右侧的菜单项栏.
可以在此链接中查看当前 UI:https://1y10y.csb.app/ (请切换到响应模式)
解决方案
您可以通过在将用作侧边栏的 div 上使用 position 作为 fixed 来实现此目的.但是对于其他大屏幕，您需要删除 position 属性，它会显示在导航栏的中间.
尝试以下操作:-
从反应"导入反应；导出默认功能 Navbar({ 固定 }) {const [navbarOpen, setNavbarOpen] = React.useState(false);返回 (<><nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3">
<li className="nav-item"><a className="px-3 py-2 flex items-center text-xs大写字体-粗体前导-snug text-white hover:opacity-75">第 1 行 - 菜单 2</a><li className="nav-item"><a className="px-3 py-2 flex items-center text-xs大写字体-粗体前导-snug text-white hover:opacity-75">第 1 行 - 菜单 3</a>
</nav></>);}
I am making a simple app using react + tailwind and I am currently working on navbar part.
Navbar.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>
</>
);
}
And complete working example here:
Issue and things tried:
In current scenario, the background-color pink is applied to the entire header layout.
I can understand that this happens because I have applied the css classname bg-pink-500 to the whole navbar.
But if I move this background-color to any of the child div then it is not working as expected.
Requirement:
The requirement is that in responsive view, the whole layout needs to be exactly like this,
| -- 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 -- |
Please click on this image to see the similar expectation
Kindly please help me to achieve the bg-pink color only to the top navbar and the menu items bar to the right.
Current UI can be viewed in this link: https://1y10y.csb.app/ (Please switch to responsive mode)
解决方案
You can achieve this by using position as fixed on your div which will be used as sidebar. But for other big screens you need to remove position property and it will show at middle of your nav bar.
Try something like below:-
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>
</>
);
}
这篇关于如何将导航栏向右移动并应用背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
1403页，肝出来的..
09-06 20:49