无法理解导航栏下拉菜单

Question

我正在尝试制作我在 CodePen 上找到的导航栏，但问题是它没有下拉菜单。我知道如何制作下拉菜单，但不知道如何定位和设置样式。我还是 CSS.

的新手

非常感谢任何帮助，谢谢！

如果代码没有响应，请查看原文。 https://codepen.io/WebDevSimplified/pen/LqKQRK

<nav class="navbar">
  <a div class="brand-title" href="submissions.html">AESTHETIC PRESS</a></div> 
  
  <a href="#" class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </a>
  <div class="navbar-links">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#"> Books</a></li>
      <ul>
        <li><a href="#">Young Adult</a></li>
          <li><a href="#">Adult</a></li>
          <li><a href="#">Non-Fiction</a></li>
      </ul>
    </li>
      <li><a href="#">Author</a></li>
      <li><a href="#">About Us</a></li>
 <ul>
      <li><a href="">Our Team</a></li>
  </ul>
</li>
  
  <li><a href="#">News</a></li>
   
    <li><a href="#">Contact Us <i class="fa-solid fa-caret-down"></i></a>
    <ul>   
      <li><a href="submissions.html">Submissions</a></li>
      <li><a href="">Permissions</a></li>
      <li><a href="">Translation</a></li>
      <li><a href="">Press</a></li>
      <li><a href="">Hiring</a></li>
      <li><a href="">Contact</a></li>
  </ul>
  </li>
  </div>
</nav>

.navbar {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: white;
  height: 100px;
}

.brand-title {
  text-decoration: none;
  color: white;
  font-size: 2.0rem;
  margin: 1.5rem;
  cursor: pointer;
}

.brand-title:hover {
  color: white;
}
.navbar-links {
  
  padding: 0px;
  
  margin-right: 35%;
  border: red dotted 3px;
}

.navbar-links ul {
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-links li {
  list-style: none;
}


.navbar-links li a {
  display: block;
  text-decoration: none;
  color: white;
  padding: 1rem;
}

.navbar-links li:hover {
  background-color: #555;
}

.toggle-button {
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}

@media (max-width: 800px) {
  .navbar {
      flex-direction: column;
      align-items: flex-start;
  }

  .toggle-button {
      display: flex;
  }

  .navbar-links {
      display: none;
      width: 100%;
  }

  .navbar-links ul {
      width: 100%;
      flex-direction: column;
  }

  .navbar-links ul li {
      text-align: center;
  }

  .navbar-links ul li a {
      padding: .5rem 1rem;
  }

  .navbar-links.active {
      display: flex;
  }
}

Answer 1

我猜你想在导航中嵌套下拉菜单 link。您也可以使用 bootstrap navbar or w3school navbar.

(function($) { // Begin jQuery
  $(function() { // DOM ready
    // If a link has a dropdown, add sub menu toggle.
    $('nav ul li a:not(:only-child)').click(function(e) {
      $(this).siblings('.nav-dropdown').toggle();
      // Close one dropdown when selecting another
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    // Clicking away from dropdown will remove the dropdown class
    $('html').click(function() {
      $('.nav-dropdown').hide();
    });
    // Toggle open and close nav styles on click
    $('#nav-toggle').click(function() {
      $('nav ul').slideToggle();
    });
    // Hamburger to X toggle
    $('#nav-toggle').on('click', function() {
      this.classList.toggle('active');
    });
  }); // end DOM ready
})(jQuery); // end jQuery

.navigation {
     height: 70px;
     background: #262626;
}
 .brand {
     position: absolute;
     padding-left: 20px;
     float: left;
     line-height: 70px;
     text-transform: uppercase;
     font-size: 1.4em;
}
 .brand a, .brand a:visited {
     color: #fff;
     text-decoration: none;
}
 .nav-container {
     max-width: 1000px;
     margin: 0 auto;
}
 nav {
     float: right;
}
 nav ul {
     list-style: none;
     margin: 0;
     padding: 0;
}
 nav ul li {
     float: left;
     position: relative;
}
 nav ul li a, nav ul li a:visited {
     display: block;
     padding: 0 20px;
     line-height: 70px;
     background: #262626;
     color: #fff;
     text-decoration: none;
}
 nav ul li a:hover, nav ul li a:visited:hover {
     background: #2581dc;
     color: #fff;
}
 nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
     padding-left: 4px;
     content: ' ▾';
}
 nav ul li ul li {
     min-width: 190px;
}
 nav ul li ul li a {
     padding: 15px;
     line-height: 20px;
}
 .nav-dropdown {
     position: absolute;
     display: none;
     z-index: 1;
     box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
 .nav-mobile {
     display: none;
     position: absolute;
     top: 0;
     right: 0;
     background: #262626;
     height: 70px;
     width: 70px;
}
 @media only screen and (max-width: 798px) {
     .nav-mobile {
         display: block;
    }
     nav {
         width: 100%;
         padding: 70px 0 15px;
    }
     nav ul {
         display: none;
    }
     nav ul li {
         float: none;
    }
     nav ul li a {
         padding: 15px;
         line-height: 20px;
    }
     nav ul li ul li a {
         padding-left: 30px;
    }
     .nav-dropdown {
         position: static;
    }
}
 @media screen and (min-width: 799px) {
     .nav-list {
         display: block !important;
    }
}
 #nav-toggle {
     position: absolute;
     left: 18px;
     top: 22px;
     cursor: pointer;
     padding: 10px 35px 16px 0px;
}
 #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
     cursor: pointer;
     border-radius: 1px;
     height: 5px;
     width: 35px;
     background: #fff;
     position: absolute;
     display: block;
     content: '';
     transition: all 300ms ease-in-out;
}
 #nav-toggle span:before {
     top: -10px;
}
 #nav-toggle span:after {
     bottom: -10px;
}
 #nav-toggle.active span {
     background-color: transparent;
}
 #nav-toggle.active span:before, #nav-toggle.active span:after {
     top: 0;
}
 #nav-toggle.active span:before {
     transform: rotate(45deg);
}
 #nav-toggle.active span:after {
     transform: rotate(-45deg);
}
 article {
     max-width: 1000px;
     margin: 0 auto;
     padding: 10px;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<section class="navigation">
  <div class="nav-container">
    <div class="brand">
      <a href="#!">Logo</a>
    </div>
    <nav>
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
      <ul class="nav-list">
        <li>
          <a href="#!">Home</a>
        </li>
        <li>
          <a href="#!">About</a>
        </li>
        <li>
          <a href="#!">Services</a>
          <ul class="nav-dropdown">
            <li>
              <a href="#!">Web Design</a>
            </li>
            <li>
              <a href="#!">Web Development</a>
            </li>
            <li>
              <a href="#!">Graphic Design</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#!">Pricing</a>
        </li>
        <li>
          <a href="#!">Portfolio</a>
          <ul class="nav-dropdown">
            <li>
              <a href="#!">Web Design</a>
            </li>
            <li>
              <a href="#!">Web Development</a>
            </li>
            <li>
              <a href="#!">Graphic Design</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#!">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</section>

<article>
  <h2>Navigation</h2>
  <p>Responsive Dropdown Navigation Bar.</p>
</article>

Answer 2

根据您对我的评论的回复，我已将一些代码添加到您的评论中。所以请检查 https://codepen.io/13rpsingh/pen/poajyXK

中的代码

window.addEventListener("load", ()=>{
  
  let toggleButton = document.querySelector(".toggle-button");
  let navbarLinks = document.querySelector(".navbar-links");
  toggleButton.addEventListener('click', (e)=>{
    if(navbarLinks.classList.contains("active")){
      navbarLinks.classList.remove("active")
      toggleButton.classList.remove("active")
    }else{
      navbarLinks.classList.add("active")
      toggleButton.classList.add("active")
    }
  })
  
  
  let menuDropDown = document.querySelector(".navbar-links ul li ul");
  let dropDownTrigger = document.querySelector("#dropdown-trigger");
  
  if(dropDownTrigger){
    dropDownTrigger.addEventListener('click', (e) =>{
      if(menuDropDown.style.display == "flex"){
        
      menuDropDown.style.display = "none";
      }else{
       
      menuDropDown.style.display = "flex"; 
      }
    })
  }
})

.navbar {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: white;
  height: max-content;
  max-width:100%;
}

.brand-title {
  text-decoration: none;
  color: white;
  font-size: 2.0rem;
  margin: 1.5rem;
  cursor: pointer;
}

.brand-title:hover {
  color: white;
}
.navbar-links {
  
  padding: 0px;
  
  margin-right: 35%;
  border: red dotted 3px;
}

.navbar-links ul {
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-links li {
  list-style: none;
}


.navbar-links li a {
  display: block;
  text-decoration: none;
  color: white;
  padding: 1rem;
}

.navbar-links li:hover {
  background-color: #555;
}

.toggle-button {
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}

@media (max-width: 800px) {
  .navbar {
      flex-direction: column;
      align-items: flex-start;
  }

  .toggle-button {
      display: flex;
  }
  
  .toggle-button .bar{
      position: absolute;
    transition: all .3s ease-in-out;
  }
  .toggle-button .bar:nth-of-type(1){
      top: 0;
  }
  .toggle-button .bar:nth-of-type(2){
      top: 50%;
      transform : translateY(-50%);
  }
  .toggle-button .bar:nth-of-type(3){
      bottom: 0;
  }
  .toggle-button.active .bar:nth-of-type(1){
      top: 50%;
    transform: rotate(-45deg) translateY(-50%);
  }
  .toggle-button.active .bar:nth-of-type(2){
      display:none;
  }
  .toggle-button.active .bar:nth-of-type(3){
      bottom: 50%;
    transform: rotate(45deg) translateY(50%);
  }

  .navbar-links {
      display: none;
      width: 100%;
  }

  .navbar-links ul {
      width: 100%;
      flex-direction: column;
  }

  .navbar-links ul li {
      text-align: center;
    position:relative;
  }

  .navbar-links ul li a {
      padding: .5rem 1rem;
  }

  .navbar-links.active {
      display: flex;
  }
}

.navbar-links ul li ul{
  display:none;
  flex-direction: column;
  position:absolute;
  background:#d0d0d0;
  max-width: 100%;
}


.navbar-links ul li ul li a{
  color : black; 
}


.navbar-links ul li ul li a:hover{
  color : white; 
}

<nav class="navbar">
  <a div class="brand-title" href="submissions.html">AESTHETIC PRESS</a></div> 
  
  <a href="#" class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </a>
  <div class="navbar-links">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#"> Books</a></li>
      <ul>
        <li><a href="#">Young Adult</a></li>
          <li><a href="#">Adult</a></li>
          <li><a href="#">Non-Fiction</a></li>
      </ul>
    </li>
      <li><a href="#">Author</a></li>
      <li><a href="#">About Us</a></li>
 <ul>
      <li><a href="">Our Team</a></li>
  </ul>
</li>
  
  <li><a href="#">News</a></li>
   
    <li id="dropdown-trigger"><a href="#">Contact Us <i class="fa-solid fa-caret-down"></i></a>
    <ul>   
      <li><a href="submissions.html">Submissions</a></li>
      <li><a href="">Permissions</a></li>
      <li><a href="">Translation</a></li>
      <li><a href="">Press</a></li>
      <li><a href="">Hiring</a></li>
      <li><a href="">Contact</a></li>
  </ul>
  </li>
  </div>
</nav>

也许，你可以很容易地理解我添加的代码。

希望对你有帮助

无法理解导航栏下拉菜单

Trouble understanding navbar dropdown menu

html

javascript

css

jquery

navbar