向導航欄添加下拉菜單

Question

晚上，

在工作中學習，目前正在為我的家族企業做一個新網站。

如何使此下拉導航菜單在桌面/移動設備上工作？ 我不希望它太花哨，與主導航本身的設計相同，我一直在試圖讓它像實際的切換一樣工作，所以當用戶點擊“服務”時，它會向下切換，但它沒有按預期工作。

理想情況下，懸停時它應該顯示桌面的下拉鏈接，而移動它應該需要觸摸才能顯示。

HTML

<div class="navigation-bar">
  <div class="navigation-item">
    <div class="logo">
      <a href="index.html">
        <img src="/assets/img/logo.jpg" alt="Company Logo">
      </a>
    </div>
    <ul class="navigation-bar-menu">
      <li class="active"><a href="index.html" class="active">Home</a></li>
      <li><a href="#">Services <i class="fa-thin fa-chevron-down"></i></a>

        <ul class="navigation-bar-dropdown">
          <li><a href="#">Managed Print Service</a></li>
          <li><a href="#">Document Management</a></li>
          <li><a href="#">Machine Finance Options</a></li>
          <li><a href="#">Machine Repair & Support</a></li>
        </ul>

      </li>
      <li><a href="#">Products <i class="fa-thin fa-chevron-down"></i></a>
        <ul class="navigation-bar-dropdown">
          <li><a href="#">Machines</a></li>
          <li><a href="#">Ricoh</a></li>
          <li><a href="#">Lexmark</a></li>
          <li><a href="#">Konica Minolta</a></li>
          <li><a href="#">Software</a></li>
          <li><a href="#">Kofax</a></li>
          <li><a href="#">Papercut</a></li>
          <li><a href="#">Filestar</a></li>
        </ul>
      </li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>
    <button class="navigation-bar-toggle">
      <i class="fa-light fa-bars"></i>
      Menu
    </button>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #242424;
  font-family: 'proxima-nova', sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 16px;
  line-height: 1.5rem;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.navigation-bar {
  background-color: #ffffff;
  padding: 2rem 1rem;
  position: relative;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.navigation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  width: 10rem;
  display: block;
}

.navigation-bar-toggle {
  padding: 1rem;
  background-color: #ecf0f1;
  color: inherit;
  cursor: pointer;
  text-transform: uppercase;
  border: none;
  font: inherit;
  border-radius: 0.25rem;
}

.navigation-bar-dropdown {
  display: flex;
  flex-direction: column;
}

.navigation-bar-menu {
  flex-direction: column;
  right: 0;
  overflow: hidden;
  top: 100%;
  background: #ecf0f1;
  display: none;
  position: absolute;
  width: 100%;
}

.navigation-bar-menu .active {
  background-color: #242424;
  color: #ffffff;
  font-weight: 300;
}

.navigation-bar-menu li {
  display: flex;
  justify-content: center;
  padding: 1rem;
}

.navigation-bar-menu a {
  text-transform: uppercase;
}

.navigation-bar a:hover {
  opacity: 1 !important;
}

.navigation-bar-menu :not(.active):hover {
  background-color: #242424;
  color: #ffffff;
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 500ms;
}


.navigation-bar-menu.open {
  display: flex;
}

@media only screen and (min-width: 700px) {
 /* NAVIGATION BAR */
 .navigation-bar-toggle {
   display: none;
  }
  
  .navigation-bar-menu {
    display: flex;
    flex-direction: row;
    position: relative;
    background: none;
    justify-content: end;
    width: auto;
    gap: 1rem;
  }

  .navigation-bar-menu li {
    background-color: #ecf0f1;
    border-radius: 0.25rem;
    padding: 1rem;
  }
}

JS

  window.addEventListener('DOMContentLoaded', () => {
  const menuToggler = document.querySelector('.navigation-bar-toggle')
  const menu = document.querySelector('.navigation-bar-menu')

  menuToggler.addEventListener('click', () => {
    menu.classList.toggle('open')
  })
})

任何幫助將不勝感激。 https://jsfiddle.net/fc471p3e/4/

Answer 1

在這里，我盡我所能通過最少的更改來實現您想要的，並在必要時添加了評論。 檢查一次。 對 HTML 標記、CSS 和 JS 進行了更改。 如果您希望我解釋一些更改或者是否有需要解釋的事情，請在評論中告訴我。 一件事，如果您要添加具有下拉列表的鏈接，請不要忘記像我在您的標記中那樣添加類名。 我還評論了要添加的類名。 如果有不清楚的地方，您可以瀏覽它並隨時發表評論。

 window.addEventListener('DOMContentLoaded', () => { const menuToggler = document.querySelector('.navigation-bar-toggle'); const menu = document.querySelector('.navigation-bar-menu'); menuToggler.addEventListener('click', () => { menu.classList.toggle('open') }) const linksWithChild = document.getElementsByClassName('dropdown-btn'); for (let i = 0; i < linksWithChild.length; i++) { linksWithChild[i].addEventListener('click', function() { /* Upon clicking, check if any "dropdown-btn" other than the current one contains .active class. If so remove .active class from the button and the dropdown will be hidden due to our style definition */ for (let j = 0; j < linksWithChild.length; j++) { // 'this' refers to current dropdown-btn if (linksWithChild[j].classList.contains('active') && linksWithChild[j] !== this) { linksWithChild[j].classList.remove('active'); } } this.classList.toggle('active'); }); } })

 * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #242424; font-family: 'proxima-nova', sans-serif; font-weight: 100; font-style: normal; font-size: 16px; line-height: 1.5rem; } li { list-style-type: none; } a { text-decoration: none; color: inherit; } .navigation-bar { background-color: #ffffff; padding: 2rem 1rem; position: relative; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; } .navigation-item { display: flex; justify-content: space-between; align-items: center; } .logo img { width: 10rem; display: block; } .navigation-bar-toggle { padding: 1rem; background-color: #ecf0f1; color: inherit; cursor: pointer; text-transform: uppercase; border: none; font: inherit; border-radius: 0.25rem; } .navigation-bar-menu { flex-direction: column; right: 0; top: 100%; background: #ecf0f1; display: none; position: absolute; width: 100%; } .navigation-bar-menu li.active a { background-color: #242424; color: #ffffff; font-weight: 300; } .navigation-bar-menu li { justify-content: center; position: relative; } .navigation-bar-menu a { text-transform: uppercase; padding: 1rem; background: #ecf0f1; display: inline-block; width: 100%; } .navigation-bar-dropdown { position: absolute; width: max-content; padding-top: 10px; } .has-child .navigation-bar-dropdown { display: none; } .navigation-bar-menu.open { display: flex; } @media only screen and (min-width: 700px) { /* navigation bar */ .navigation-bar-toggle { display: none; } .has-child:hover .navigation-bar-dropdown { display: flex; flex-direction: column; } .navigation-bar-menu { display: flex; flex-direction: row; position: relative; background: none; justify-content: end; width: auto; gap: 1rem; } .navigation-bar-menu li a { border-radius: 0.25rem; } } @media screen and (max-width: 699px) { .has-child .navigation-bar-dropdown { position: relative; border-left: 2px solid #a5a7a8; margin-left: 30px; } /* show dropdown if the dropdown button has .active class */ .has-child>a.active+.navigation-bar-dropdown { display: block; } } /* disable click evetns on devices that support hover */ @media screen and (hover: hover) and (pointer: fine) { .has-child>a { pointer-events: none; } }

 <div class="navigation-bar"> <div class="navigation-item"> <div class="logo"> <a href="index.html"> <img src="/assets/img/logo.jpg" alt="Company Logo"> </a> </div> <!-- add .navlink class to every top level <li> tag --> <!-- add .has-child class to every .navlink <li> tag that has dropdown --> <!-- add .dropdown-btn class to direct <a> tag of .has-child <li> tag --> <ul class="navigation-bar-menu"> <li class="navlink active"><a href="index.html" class="active">Home</a></li> <li class="navlink has-child"> <a href="#" class="dropdown-btn">Services <i class="fa-thin fa-chevron-down"></i></a> <ul class="navigation-bar-dropdown"> <li><a href="#">Managed Print Service</a></li> <li><a href="#">Document Management</a></li> <li><a href="#">Machine Finance Options</a></li> <li><a href="#">Machine Repair & Support</a></li> </ul> </li> <li class="navlink has-child"> <a href="#" class="dropdown-btn">Products <i class="fa-thin fa-chevron-down"></i></a> <ul class="navigation-bar-dropdown"> <li><a href="#">Machines</a></li> <li><a href="#">Ricoh</a></li> <li><a href="#">Lexmark</a></li> <li><a href="#">Konica Minolta</a></li> <li><a href="#">Software</a></li> <li><a href="#">Kofax</a></li> <li><a href="#">Papercut</a></li> <li><a href="#">Filestar</a></li> </ul> </li> <li class="navlink"><a href="contact.html">Contact Us</a></li> </ul> <button class="navigation-bar-toggle"> <i class="fa-light fa-bars"></i> Menu </button> </div> </div>