Question

我希望导航栏在达到 768 像素时消失并成为右侧的按钮。该按钮将打开导航栏，我添加了代码使导航栏在 768 像素处消失，但它不起作用。由于按钮显示 768 像素，因此不太确定出了什么问题。但是导航栏并没有在 768px 处消失。

html
   
<nav id="Nav" class="navbar nav">
      <div class="container flex">
        <img src="Week5saasappassets-210323-142515 (1)/Week-5-saas-app-assets/project_logo/logo.svg"  alt="Company logo" class="company-logo">
        <button class="navbar-toggler" aria-expanded="false" aria-controls="navbarDropdown"><span>&#9776;</span></button>
      <div class="nav-parent">
        <ul class="navbar-nav">
          <li class="nav-link">
            <a href="#">Home</a>
          </li>
          <li class="nav-link">
            <a href="#">Features</a>
          </li>
          <li class="nav-link">
            <a href="#">Learn</a>
          </li>
          <li class="nav-link">
            <a href="#">Price</a>
          </li>
          <li class="nav-link">
            <a href="#" class="btn btn-green">Hire us</a>
          </li>
        </ul>
      </div>
      </div>
    </nav>

css
navbar-toggler{
  position: absolute;
  right: var(--size-20);

  outline: none;
  background-color: transparent;
  border: 1px solid transparent;
}

.navbar-toggler span{
  color: var(--pureblack);
  font-size: var(--size-20);
}

[aria-controls="navbarDropdown"]{
  display: none;
}


.navbar .container{
  top: 0;
  right: 0;
  left: 0;
  z-index: 500;
  transition: ease-in-out 0.3s;
  display:flex;
  align-items: center;
}

.navbar-brand{
  cursor: pointer;

}
.nav-parent{
  margin-left: auto;
}

.navbar-nav{
  display: flex;
  align-items: center;
}


.navbar-nav li{
  align-items: center;
}

.nav-link a{
  margin-right: 2.5rem;
}


responsive
@media screen and (max-width: 768px) {
[aria-controls="navbarDropdown"] {
  display: block;
 }

 [aria-expanded="false"] ~ ul{
   display: none;
 }

 [aria-expanded="true"] ~ ul{
   display: block;
 }
}

javascript
<script>
    const navButton = document.querySelector('button[aria-expanded]');
  
  function toggleNav({ target }){
    const expanded = target.getAttribute('aria-expanded') === 'true' ||  false;
    navButton.setAttribute('aria-expanded', !expanded);
  }
  
  navButton.addEventListener('click', toggleNav);
  </script>

Answer 1

你的css通过按钮选择ul，

[aria-expanded="false"] ~ ul{
   display: none;
 }

 [aria-expanded="true"] ~ ul{
   display: block;
 }

不起作用，原因如下。波浪号 (~) 是 sibling selector。为了让这个选择器按照你指定的方式工作，你的 ul 必须出现在按钮之后，在同一个容器中，像这样：

<button ariaexpanded="true"></button>
<ul class="navbar-nav">
          <li class="nav-link">
            <a href="#">Home</a>
          </li>
</ul>

因此，如果您的 .nav-parent div 没有被使用，您可以尝试删除它，它可能会起作用。

这是我做移动菜单时的方法。让您的媒体查询针对某个容器，该容器在您的移动断点处达到 100% 视口宽度和高度。它也应该垂直或水平偏移到用户的视野之外。然后你只需要一些 JS 来切换一个“显示”类，它将菜单定位在用户屏幕上：您的切换导航功能：

function toggleNav({ target }){
    const expanded = target.getAttribute('aria-expanded') === 'true' ||  false;
    navButton.setAttribute('aria-expanded', !expanded);
    // Toggle nav 'showing' class
    if (nav.classList.contains('showing')) {
        nav.classList.remove('showing')
    } else {
        nav.classList.add('showing')
    }
  }

// Close menu button
closeNavButton.addEventListener('click', () => {
    nav.classList.remove('showing')
})

CSS：

/* Don't show the 'close' button on desktop */
.nav-parent button {
  display: none;
}

/* Mobile breakpoint */
@media screen and (max-width: 768px) {
[aria-controls="navbarDropdown"] {
  display: block;
 }

 [aria-expanded="false"] ~ ul{
   display: none;
 }
 
 /* Your menu now takes up 100% of screen, and is offset to the left */
 .nav-parent {
   opacity: 0;
   position: absolute;
   height: 100vh;
   width: 100vw;
   top: 0;
   left: -100vw;
   transition: all 0.25s ease;
   background: white;
 }
 /* When the showing class is added, it will position itself on the screen */
 .nav-parent.showing {
   opacity: 1;
   left: 0;
 }
}

HTML（添加关闭菜单按钮）

<div class="nav-parent">
        <button>
          Close
        </button>
        <ul class="navbar-nav">
          ...
</div>

JSfiddle demo

创意空间很大。

移动导航栏不折叠

1 个答案: