CSS раскрывающийся список элементов навигации - PullRequest
Новая
       4

CSS раскрывающийся список элементов навигации

1 голос
/ 08 февраля 2020

У меня есть панель навигации, которую я построил с несколькими ссылками в ней (используя ul с li и якорями), и я пытаюсь выяснить, как сделать выпадающие определенные ссылки с большим количеством ссылок внутри них. Я попытался следовать примеру выпадающих меню w3schools, но кажется, что мои ссылки просто "скручиваются" вместе. Вот код: 

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
<nav class="main-nav-container">
  <ul>
    <div class="dropdown">
      <li>
        <a href="#">Climb</a>
          <div class="dropdown-content">
            <a href="">Link 1</a>
            <a href="">Link 2</a>
            <a href="">Link 3</a>
          </div>
        </li>
    </div>
    <li><a href="#">News</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Donate</a></li>
    <li><a href="#">Merchandise</a></li>
  </ul>
</nav>

С моей стороны выглядит так, что все ссылки сжаты вместе. Я хочу, чтобы раскрывающийся список появлялся при наведении курсора (то есть отображение изменяется с «нет» на «блокирование»), но фактическое содержимое раскрывающегося списка отображается в виде ссылки навигации, а не внизу, как должно быть. Что я пропускаю / делаю неправильно?

Ответы [ 2 ]

1 голос
/ 08 февраля 2020

Я создал stackblitz для вас. Это то, что вы ищете? Вы можете сделать свой контент display: flex;, используя flex-direction: column; вместо display: block;.

0 голосов
/ 08 февраля 2020

Если вы хотите, чтобы выпадающие списки в конечном итоге анимировались, вам нужно будет использовать javascript, если вы не настоящий css волшебник. По сути, вы добавите класс visible в mouseenter, который изменит раскрывающийся список с display: none на display: block и установит начальное состояние вашей анимации, например opacity: 0. Затем, после requestAnimationFrame, вы добавляете класс in, который устанавливает конечное состояние вашей анимации, например opacity: 1. RequestAnimationFrame необходим, потому что переход от none к block заставляет браузер отменять любые css анимации.

Анимация закрытия по тому же принципу: вы удаляете класс in при наведении мыши, затем по истечении времени ожидания анимации вы удаляете класс visible.

...