代码之家 › 专栏 › 技术社区 › Adrew

使用flex的响应式导航栏不会崩溃

navigationbar flexbox responsive-design css html

Adrew · 技术社区 · 6 年前

我还包括了一个toggle btn,由Font Awesome提供,并将其集成到我的项目中的html头部。

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>

这是导航栏的代码。

<div class="Navbar3">
       <div class="Navbar__Link Navbar__Link-brand">
       </div>
        <div class="Navbar__Link Navbar__Link-toggle">
          <i class="fas fa-bars"></i>
        </div>

      <nav class="Navbar__Items">
        <div class="Navbar__Link active">
          All
        </div>
        <div class="Navbar__Link">
          <a href="graphic.html">Design</a>
        </div>
        <div class="Navbar__Link">
          <a href="animation.html">Animation</a>
        </div>
      </nav>  
    </div>

  .Navbar3 {
  background-color: #2262AD;
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
  justify-content: center;
}

.Navbar__Link {
  padding-right: 25px;
  font-weight: bold;
  align-self: center;
  justify-content: center;
  cursor: pointer;
}

.Navbar__Items {
  display: flex;

}
.Navbar__Link-toggle {
  display: none;
}
@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar3 {
    flex-direction: column;
  }
.Navbar__Items {
    display: none;
  }
.Navbar__Items--right {
    margin-left: 0;
  }
.Navbar__ToggleShow {
    display: flex;
  }
.Navbar__Link-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
   } 
}

.Navbar__Link:hover{
  color: black;
}

.active {
color: black;
text-decoration: underline;
}

这里有一些js用于切换

function classToggle() {
          const navs = document.querySelectorAll('.Navbar__Items')

          navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
        }
        document.querySelector('.Navbar__Link-toggle')
          .addEventListener('click', classToggle);

2 回复 | 直到 6 年前

Steven Kuipers 6 年前

当我在浏览器中测试你的代码时,它似乎工作得很好。如果是移动视图无法正常工作,请尝试添加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 你的头。更多 MDN . 希望这能解决你的问题。

Adrew 6 年前

发现此问题。这是因为我的js中最后两行代码造成的。评论他们和导航工作正常!

function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("demo");
      var captionText = document.getElementById("caption");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";
      //dots[slideIndex-1].className += " active";
      //captionText.innerHTML = dots[slideIndex-1].alt;
    }