navbar 相关问题

HTML和XML直接处理页面导航的部分

我只是在学习，所以不要轻视我的 HTML 和 CSS :) 我正在为我的顶部导航栏苦苦挣扎。它不断被我的造型卡超越。它位于顶部并迫使我的顶部导航栏位于下方。我是...

html css bootstrap-4 navbar styling

回答 2 投票 0

我有一个这样的导航栏：我有一个这样的导航栏： <nav className="bg-white shadow dark:bg-gray-800"> <div className="container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300"> <Link to="/home" className="text-gray-800 transition-colors duration-300 transform dark:text-gray-200 border-b-2 border-blue-500 mx-1.5 sm:mx-6" > home </Link> <Link to="/invoices" className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6" > features </Link> <Link to="/forms" className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6" > forms </Link> <Link to="/newForm" className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6" > form2 </Link> </nav> 我想在点击时更改导航项，但在 Stackoverflow 中我搜索过的所有地方都只找到了 NestJS、Next.js 等的解决方案，而不是 React。您应该在 tailwindCSS 中的 className 上使用 active 变体。例如： <Link to="/home" className="text-gray-300 active:text-blue-500" > home </Link> 您确实需要首先定义如何确定是否添加该类。在我看来，你想改为循环浏览你的项目： const isCurrentPage = (href: string) => { // return true if `href` is the current path, many ways you could do this } // loop through your items and conditionally add the class if active... ['/home', '/invoices', '/forms'].map(href => <Link key={href} href={href} className={isCurrentPage(href) ? 'active' : ''} /> 您的 isCurrentPage 功能取决于您的应用程序逻辑和设置；你可能可以依靠像window.location.pathname.indexOf(href) === 0这样的逻辑来开始。当 NavLink 组件被视为活动时，默认情况下会自动接收“活动”类，从而允许您应用 CSS 来设置样式。因此，在您的index.css文件中，添加： @tailwind base; @tailwind components; @tailwind utilities; .active{ /* Add whatever CSS style will make your link look active. The example below (in my case) */ @apply block py-2 pl-3 pr-4 text-white bg-orange-700 rounded md:bg-transparent md:text-orange-700 md:p-0 underline; } 就是这样。希望这有帮助！

javascript reactjs typescript navbar tailwind-css

回答 3 投票 0

让屏幕阅读器 (NDVA) 在登录后宣布菜单项

我根据此示例创建了一个可访问的优先级菜单：https://www.codementor.io/@marys/flexbox-priority-navigation-1bussno6uj。我还为三类用户添加了登录功能...

html jquery accessibility navbar uiaccessibility

回答 1 投票 0

Astro 组件中的不良行为

我有一个 Astro 静态网页。其中一个组成部分是：我有一个 Astro 静态网页。其中一个组成部分是： <nav class="p-5 shadow md:flex md:items-center md:justify-between fixed w-full top-0" > <div class="flex justify-between items-center"> <a href="/" class="text-2xl cursor-pointer"> <img class="h-10 inline" src="/img/logo.png" alt="Logo Image" /> Bookingfy</a > <span class="text-3xl cursor-pointer mx-2 md:hidden block" ><ion-icon name="menu"></ion-icon></span > </div> <ul class="md:flex md:items-center md:z-auto md:static absolute w-full left-0 md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-500" > <li class="mx-4 my-6 md:my-0"> <a href="/generals" class="text-xl hover:text-orange-300 duration-500" >Características</a > </li> <li class="mx-4 my-6 md:my-0"> <a href="/pricing" class="text-xl hover:text-orange-300 duration-500">Precios</a > </li> <li class="mx-4 my-6 md:my-0"> <a href="/about" class="text-xl hover:text-orange-300 duration-500" >Sobre Nosotros</a > </li> <li class="mx-4 my-6 md:my-0"> <a href="/contact" class="text-xl hover:text-orange-300 duration-500">Contacto</a > </li> </ul> </nav> <style> nav { background-color: #13151a; z-index: 999; } ul { background-color: #13151a; } </style> <script> document.addEventListener("DOMContentLoaded", function () { let icon = document.querySelector("ion-icon")!; icon.addEventListener("click", function () { if (icon.getAttribute("name") === "menu") { icon.setAttribute("name", "close"); document.querySelector("ul")!.classList.add("top-[80px]"); document.querySelector("ul")!.classList.add("opacity-100"); document.querySelector("ul")!.classList.add("z-10"); } else { icon.setAttribute("name", "menu"); document.querySelector("ul")!.classList.remove("top-[80px]"); document.querySelector("ul")!.classList.remove("opacity-100"); } }); }); </script> 这个组件位于名为 Layout.astro 的布局内部： --- import Footer from "../components/Footer.astro"; import Header from "../components/Header.astro"; import "../styles/Layout.scss"; import { ViewTransitions } from "astro:transitions"; interface Props { title: string; } const { title } = Astro.props; --- <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="description" content="Astro description" /> <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/svg+xml" href="/img/logo.png" /> <meta name="generator" content={Astro.generator} /> <title>{"Bookingfy | "+title}</title> <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js" ></script> <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js" ></script> <ViewTransitions /> </head> <body> <Header /> <main> <slot /> </main> <Footer /> </body> </html> 问题在于当我们处于小屏幕时导航栏的行为。当以前我不导航其他应用程序页面时，导航栏可以工作。然而，例如，当我输入一个导航栏选项（例如“Características”）并尝试重新打开导航栏时，这不起作用。导航栏不显示选项。我不明白这种行为。您可以将代码复制到一个 Astro 项目中并执行该代码以便更好地理解。有人可以给我一些帮助吗？预先感谢您。基本上，Astro 会在 Header 组件中编译你的 JS 代码一旦你移动到另一个页面，它就会失去它的位置因此将指令传递给脚本以确保它是：全局将使您的代码全局可用，这将解决问题这是一个有点肮脏的解决方案，但是是的，你可以做其他事情，比如将此脚本附加到主布局，我们的但所有脚本都在一个文件中，但它在标题中 <script is:global> document.addEventListener("DOMContentLoaded", function () { let icon = document.querySelector("ion-icon")!; icon.addEventListener("click", function () { if (icon.getAttribute("name") === "menu") { icon.setAttribute("name", "close"); document.querySelector("ul")!.classList.add("top-[80px]"); document.querySelector("ul")!.classList.add("opacity-100"); document.querySelector("ul")!.classList.add("z-10"); } else { icon.setAttribute("name", "menu"); document.querySelector("ul")!.classList.remove("top-[80px]"); document.querySelector("ul")!.classList.remove("opacity-100"); } }); }); </script>

html components navbar astrojs

回答 1 投票 0

如何将props传递给react-bootstrap的Nav.Link

我正在使用以下导航栏。我想传递一些道具给 Nav.Link。我不知道如何将属性传递给 Nav.Link。或者就像 HTML href="a.html?param=test" 一样？常量导航...

reactjs navbar react-bootstrap react-props

回答 3 投票 0

Bootstrap 5 中的自定义导航栏

我想要一个自定义导航栏，如下所示：居中标志左侧有 3 个菜单按钮（可折叠）右侧有 2 个图标（帐户和 Instagram）（始终展开）当倒塌时，我希望看到

html css bootstrap-5 navbar

回答 1 投票 0

Blazor .NET 8 中的水平导航栏未对齐

我正在尝试在 ASP.NET Core 8 Blazor 网站中使用 Bootstrap NavBar。我正在使用 Bootstrap 5.x。这样做时，菜单项不会按预期水平排列，下拉菜单也不起作用。

asp.net-core bootstrap-5 navbar

回答 1 投票 0

屏幕尺寸更改且浏览器中导航栏切换时出现滚动对齐问题

我在网络项目中遇到了滚动捕捉问题。每当屏幕尺寸发生变化时，例如当移动浏览器导航栏打开或关闭时，滚动捕捉行为就会变得混乱......

javascript html css navbar scroll-snap

回答 1 投票 0

我在移动设备中仅在索引页上遇到导航栏问题

HTML 文件 HTML 文件 <div class="header_section header_bg"> <div class="container-fluid"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a><img src="images/logo.png"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link active" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link" href="machines.html">Machines</a> </li> <li class="nav-item"> <a class="nav-link" href="work.html">Work</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact</a> </li> </ul> </div> </nav> </div> </div> 我的网站在桌面上运行良好，但我在移动设备上遇到问题，我的主菜单导航栏不起作用！仅索引页其他页面工作正常。我检查了我的索引 html 代码与其他页面并进行了比较，但似乎没有什么是显而易见的。我该如何解决这个问题？我正在检查 css 文件和 js 文件，但看起来一切都很好。从您提供的代码中我无法确定，但我过去遇到过一些问题以及我如何解决它们...... 首先确保使用 head 中的元标记来使缩放响应于设备： <meta name="viewport" content="width=device-width, initial-scale=1"> 检查由于样式而导致的重叠元素，某些元素可能会与菜单按钮重叠，导致它们不可单击，因此您单击其他元素会导致意外行为。确保 JavaScript 和 jQuery 库在您的 index.html 中正确链接，假设您正在使用 jQuery，因为您使用的是 data-toggle="collapse" 由于该问题是特定于移动设备的，因此请检查 CSS 是否存在可能影响移动设备上导航栏的显示或功能的任何媒体查询。您可以使用开发人员工具来模拟移动设备，并查看索引上是否应用了不同的样式

css jquery-mobile navbar responsive jquery-mobile-navbar

回答 1 投票 0

引导导航栏折叠在单击时未关闭

我正在使用 Bootstrap，它在单页网站上折叠了导航栏以及简单的滚动脚本，因此如果我单击单个链接，页面会向下滚动到锚点 - 效果很好。然而

javascript html twitter-bootstrap navbar

回答 13 投票 0

选项卡切换时屏幕无法重建

持久导航栏不会刷新不同选项卡切换的屏幕，它应该在每个开关上重建小部件树，但它没有这样做请帮我.... 脚手架（键：_键，...

flutter navbar persistent rebuild

回答 1 投票 0

反应映射“TypeError：无法读取未定义的属性‘map’”

下面是 Navbar.js 和 MenuItems.js 错误是 https://1drv.ms/u/s!ArTg3PgWw2jtgQ77RY23uF1tkSoA?e=YDsLlK 我从数组 MenuItems.js 中提取数据并在 Navbar.js 中与地图一起显示，错误是 &...