navbar 相关问题

我正在尝试使用html，css和scss制作一个下拉菜单。如有帮助，将不胜感激。我正在尝试使用 html、css 和 scss 制作一个下拉菜单。如有帮助，我们将不胜感激。 <nav> <div class="nav-container"> <div class="nav-logo"><a href="index.html"><img class="logo" src="/img/logo.svg" alt="logo"></a> </div> <div class="search-container"> <div class="fa fa-search search-icon"></div> <div class="input-container"><input type="text" placeholder="search"></div> <div class="fa fa-times cross"> </div> </div> <div class="nav-boxes"> <ul> <div class="nav-link-boxes"> <li class="links"><a href="home.html">home</a></li> </div> <div class="nav-link-boxes"> <li class="links"><a href="catalog.html">catalog</a></li> </div> <div class="nav-link-boxes dropdown-menu"> <li> <div class="links"><a href="paintings.html">portfolio</a></div> </div> <ul class="dropdown"> <div class="nav-link-boxes dropdown-links"> <li>embroidery</li> </div> <div class="nav-link-boxes dropdown-links"> <li>vector</li> </div> </ul> </li> <div class="nav-link-boxes"> <li class="links"><a href="#">contact</a></li> </div> </ul> </div> <img class="login" src="./img/accounticon.svg" alt="login"> </div> </nav> sass 文件 @import "var"; .nav { &-container { z-index: 1; background: $navbar-gradient; margin-top: 2rem; width: 95%; display: flex; position: fixed; justify-content: space-between; align-items: center; border-radius: 4rem; height: 6rem; left: 1.1rem; .search-container { display: flex; align-items: center; justify-content: space-between; text-align: center; background: $search; padding: 1rem; border-radius: 2rem; /* box-shadow: 5px 5px 20px rgb(255, 249, 238); */ input { display: flex; margin: auto auto; margin-left: 1rem; // /* width:500px; */ border: none; outline: none; background: $search; align-items: center; justify-content: flex-start; ::placeholder { color: $placeholder; } } } .nav-boxes { ul .boxes { display: flex; margin-right: 2rem; margin-left: 2rem; align-items: center; list-style-type: none; a { font-family: "Exo 2", sans-serif; text-decoration: none; font-size: 1.4rem; color: $dark-primary; font-weight: 600; &:link, &:visited { border-radius: 2rem; transition: all 0.9s; } } } } .links { margin: 0 0.4rem; } .nav-link-boxes { padding: 0.5rem; margin-right: 0.7rem; background-color: $nav-buttons; border-radius: 3rem; padding-bottom: 0.8rem; &:hover { transform: translateY(-0.3rem); box-shadow: 0 1rem 2rem $white; } &:active { transform: translateY(-0.1rem); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); } } .login { height: 9rem; overflow: hidden; } } &-logo { padding: 1.5rem; margin-top: 0.5rem; .logo { height: 5.2rem; } } } 我正在尝试制作一个投资组合网站，并且正在创建一个导航栏，在导航栏中的投资组合选项卡中有一个下拉菜单。我在每个列表项周围包裹了一个 div，因此我可以应用样式，并且我无法在整个列表项周围包裹一个 div，否则嵌套列表中的所有列表项都会包含在其中。我正在使用 sass，似乎存在特异性问题，有些东西不起作用，我不知道如何嵌套它们，但最终我想创建下拉菜单。下拉菜单的正确 HTML 元素是 <select>。因此，不要写 <ul class="dropdown">，而是写： <select> <option value="embroidery">embroidery</option> <option value="vector">vector</option> </select> 然后您可以根据自己的喜好设置选择元素的样式。例如： select { font-size: 0.8rem; padding: 4px 8px; } 在这里您可以找到有关如何使用下拉控件的好示例。

html css sass drop-down-menu navbar

回答 1 投票 0

为什么 <a mat-tab-link > 中的 [active] 在 Angular 中不起作用？

<div class="d-flex d-column themed-tab-nav"> <nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start"> <a mat-tab-link *ngFor="let link of navLinks" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">{{ link.label | translate }}</a> </nav> <mat-tab-nav-panel #tabPanel> <router-outlet ></router-outlet> </mat-tab-nav-panel> </div> 我使用 Angular Material，但 [active] 不起作用。为什么？看起来您正在尝试使用 [active] 绑定来管理选项卡链接的活动状态。需要注意的一件事是 [active] 绑定不是 a 元素的标准 Angular 指令或属性。在 Angular 中，当使用 router 链接并管理活动状态时，routerLinkActive 指令是标准方法。当关联的路由处于活动状态时，它会自动添加或删除 CSS 类。 <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.path" routerLinkActive="active-link"> {{ link.label | translate }} </a>

angular angular-material navbar

回答 1 投票 0

我的导航栏图标在单击后不显示菜单

单击响应式下拉菜单后，它应该显示菜单列表项，但什么也没有发生，只是状态相同。单击响应式下拉菜单后，它应该显示菜单列表项，但什么也没有发生，只是状态相同。  <header class="header"> <a href="#" class="logo">Portfolio</a> <i class='bx bx-menu' id="menu-icon"></i> <nav class="navbar"> <a href="#home" class="active">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#portfolio">Portfolio</a> <a href="#contact">Contact</a> </nav> </header> CSS在这里 .logo{ font-size: 2.5rem; color: var(--text-color); font-weight: 600; cursor: default; } .navbar{ margin-left: 35%; } .navbar a{ font-size: 1.7rem; color: var(--text-color); margin-left: 4rem; transition: .3s; text-decoration: none; } .navbar a:hover, .navbar a.active{ color: var(--main-color); } #menu-icon{ font-size: 3.6rem; color: var(text); display: none; } media query @media (max-width:768px) { #menu-icon{ display: block; } .navbar{ position: absolute; top: 100%; left: 0; width: 100%; padding: 1rem 3%; background: var(--bg-color); border-top: .1rem solid rgba(0,0,0, .2); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); display: none; } .navbar.active{ display: block; } .navbar a { display: block; font-size: 2rem; margin: 3rem 0; } } 这里是Javascript // toggle icon navbar// Let menuIcon = document.querySelector('#menu-icon'); Let navbar = document.querySelector('.navbar'); menuIcon.onclick = () => { menuIcon.classList.toggle('bx-x'); navbar.classList.toggle('active'); }; /*scroll sections active links*/ let sections = document.querySelectorAll('section'); let navLinks = documents.querySelectorAll('header nav a'); window.onscroll = () => { sections.forEach(sec => { Let top = window.scrollY; Let offset = sec.offsetTop - 150; Let height = sec.offsetHeight; Let id = sec.getAttribute('id'); if(top => offset && top < offset + height){ navLinks.forEach(links => { links.classList.remove('active'); document.querySelector('header nav a[href*=' + id+ ']').classList.add('active'); }); }; }); /*sticky navbar*/ let }; 期望菜单图标显示下拉菜单，但什么也没发生。将你的js代码放入index.html的js元素中。问题解决了。我认为外部文件中的回调函数存在问题。 ` let menuIcon = document.querySelector('#menu-icon'); 让 navbar = document.querySelector('.navbar'); menuIcon.onclick = () =>{ menuIcon.classList.toggle('bx-x'); navbar.classList.toggle('active'); }; </script>`

javascript html css navbar

回答 1 投票 0

使用位置：固定显示：可弯曲

我给我的导航栏设置了display: flex; 的属性。我还希望修复导航栏。为什么位置：固定；不起作用，但位置：粘性；是为同样的工作吗？一旦我添加了属性...

html css css-position navbar

回答 1 投票 0

Justify-另一个 Flexbox 内的 Flexbox 内容样式不起作用

我在另一个 Flexbox 中有一个 Flexbox，其 justify-content 样式设置为 space- Between，但由于某种原因，该样式未应用，并且子元素仍然聚集在每个 o 旁边...

html css flexbox navbar

回答 1 投票 0

如何使元素在调整大小时与另一个元素保持一致

在我的 React JS 网站中，我有一个 div，它充当导航栏中的下划线，显示用户所在的路线。这里就是这里 div 下划线元素每当

reactjs react-hooks resize react-router-dom navbar

回答 1 投票 0

如何拥有固定的导航栏并且内容位于其下方

我有一个固定的导航栏： .导航栏 { 显示：内联块；背景颜色：#2327fc；列表样式类型：无；边距：0 像素；内边距：0px； z 索引：1；宽度：100%；位置...

html css position navbar fixed

回答 1 投票 0

响应式超级菜单位置CSS

我正在尝试创建一个响应式导航栏，它在桌面版本中有一个megamenu，在移动版本中有一个列表菜单。我的问题是，我不知道如何正确应用 html 类并且......

css navbar responsive megamenu

回答 1 投票 0

动画导航不可点击

有人可以帮助我理解为什么“关于”链接不可点击。另外 2 个（作品集、评论正在工作），但一旦我对它们进行样式设置（.about），它们都不可点击。很奇怪...

animation navbar href gsap

回答 1 投票 0

引导导航栏在滚动时不会向下移动

我一直在这里和其他几个网站上寻找答案。有一些，但我似乎无法让它继续工作。我有以下导航栏： &... 我一直在这里和其他几个网站上寻找答案。有一些，但我似乎无法让它继续工作。我有以下导航栏： <nav class="navbar"> <a href="#About">About me</a> <a href="#Education">Education</a> <a href="#Portfolio">Portfolio</a> <a href="#Contact">Contact</a> </nav> 我尝试过在导航标签内部使用或不使用 div 容器。这是相应的CSS： nav { text-align: center; position: fixed; top: 0; lef: 0; right: 0; height: 35px; padding-top: 15px; box-shadow: 0px 0px 8px 0px; -webkit-box-shadow: 0px 0px 8px 0px; -moz-box-shadow: 0px 0px 8px 0px; background-color: gray; width: 100%; z-index: 100; } 我也尝试过不使用 z-index: 100; 如果有人知道我缺少什么，或者如果我需要添加其他内容，我有兴趣看看它是什么以及我可以在哪里阅读它，以便我得到它。谢谢:) 你的位置：固定。还有一个错字“左” 这里的每个人都帮助了我，因为我确实有一个打字错误，而且我最终确实做了我想做的正确的事情。特别感谢 Johannes，我意识到，如果您像我一样尝试这样做，并使用 Bootstrap，请确保在位置后添加 !important：fixed;在你的 CSS 中，因为它会覆盖 Bootstraps 在这方面的默认属性，让你在向下滚动时无法将导航栏保留在屏幕上！不要忘记宽度应该是100% 导航 { text-align: center; position: fixed !important; width: 100%; } 您有一个针对 calss .navbar 的 CSS 规则，其中包含 position: relative。这会覆盖 nav 的固定设置将 !important 添加到您的位置：nav的固定设置： nav { text-align: center; position: fixed !important; 等等这应该可以解决它。 http://codepen.io/anon/pen/ZWBwEW

css navbar nav

回答 4 投票 0

如何在 Bootstrap5 导航栏中获取此元素？

这是我当前的导航栏，徽标位于中间居中，但现在我需要添加一个搜索栏和一些像这样的图标：理想的导航栏我当前的导航栏这是我当前的导航栏，徽标位于中间居中，但现在我需要添加一个搜索栏和一些图标，如下所示： <header> <nav class="navbar navbar-expand-md "> <div id="nav" class="container-fluid"> <a class="navbar-brand d-md-none" href="index.html"> <img src="relogo.png" alt=""> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="produkte.html">PRODUKTE</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ANBIETER</a> </li> <a class="navbar-brand d-none d-md-block" href="index.html"> <img src="relogo.png" alt=""> </a> <li class="nav-item"> <a class="nav-link" href="#">ÜBER UNS</a> </li> <li class="nav-item"> <a class="nav-link" href="kontakt.html">KONTAKT</a> </li> </ul> </div> </div> </nav> </header> 添加在导航栏的最后一行，但现在徽标不再居中，图标位于下方 <li> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> </form> </li> 您应该使搜索栏的位置与导航栏绝对相关。 #nav-header { position: relative; display: flex; justify-content: center; } #nav-searchbar { position: absolute; right: 20px; width: 100px; } @media (max-width: 768px) { #nav-searchbar { left: 20px; right: 20px; width: 80%; } } <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 5 Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <header> <nav id="nav-header" class="navbar navbar-expand-md d-flex items-center"> <div id="nav" class="container-fluid"> <a class="navbar-brand d-md-none" href="index.html"> <img src="relogo.png" alt=""> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="produkte.html">PRODUKTE</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ANBIETER</a> </li> <a class="navbar-brand d-none d-md-block" href="index.html"> <img src="relogo.png" alt=""> </a> <li class="nav-item"> <a class="nav-link" href="#">ÜBER UNS</a> </li> <li class="nav-item"> <a class="nav-link" href="kontakt.html">KONTAKT</a> </li> </ul> </div> </div> <div id="nav-searchbar"> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> </form> </div> </nav> </header> </body> </html>

html css navbar bootstrap-5

回答 1 投票 0

Bootstrap 5.1.3 导航栏点击后不会折叠

移动版本中的菜单打开并工作，但单击菜单项后导航栏不会折叠...我从引导站点获取了css，js和导航栏：哪里有问题？ <

javascript css navbar

回答 2 投票 0

导航栏切换器无法在 Bootstrap 5 中工作

我正在使用 Bootstrap 5 设计响应式页面，但我首先遇到了导航栏问题。切换按钮根本不起作用，单击时不显示任何项目。我搜索过...

css twitter-bootstrap navbar bootstrap-5

回答 2 投票 0

navbar 相关问题

最新问题