Блог

Главная - Вопросы по программированию - Как создать пользовательский выбор с помощью VanillaJS?

Как создать пользовательский выбор с помощью VanillaJS?

#javascript #html #css

Вопрос:

Я должен сделать такую навигационную панель с помощью VanillaJS.

Стиль и проект заданы, но я не могу заставить раскрывающийся список оставаться открытым при наведении мыши на внутренние элементы. После перемещения за пределы кнопки она закрывается.

Вот желаемый результат: gif

 const categoriesLink = document.querySelector('.categories__link');
const categoriesList = document.querySelector('.categories__wrapper');

function categoriesVisible() {
    categoriesList.style.display = 'block';
}

function categoriesHidden() {
    categoriesList.style.display = 'none';
}

categoriesLink.addEventListener('mouseover', categoriesVisible);
categoriesLink.addEventListener('mouseout', categoriesHidden); 
 .header__nav {
    display: flex;
    justify-content: center;
    align-items: center;
  height: 100vh;
}

.nav {
    position: relative;
}

.categories__link {
    color: #000000;
    cursor: pointer;
}

.categories__link:hover {
    color: #2F80ED;
}

.categories__wrapper {
    display: none;
    position: absolute;
    top: 30px;
    left: -100px;
}

.categories__content {
    position: relative;
    box-shadow: 0px 0px 4px #BDBDBD;
    border-radius: 5px;
    background: #FFFFFF;
}

.categories__content::after {
    z-index: -10;
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -5px;
    left: 50%;
    border: 5px solid transparent;
    transform-origin: 0 0;
    transform: rotate(45deg);
    box-shadow: 0px 0px 4px #BDBDBD;
}

.categories__content::before {
    z-index: 10;
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -5px;
    left: 50%;
    border: 5px solid #fff;
    transform-origin: 0 0;
    transform: rotate(45deg);
}

.categories__list {
    display: flex;
    padding: 14px 30px;
}

.list__link {
    line-height: 150%;
    color: #000000;
}

.list__link:hover {
    color: #2F80ED;
} 
 <div class="header__nav">
  <nav class="nav">
    <span class="categories__link">Categories</span>
    <div class="categories__wrapper">
      <div class="categories__content">
        <div class="categories__list">
          <ul class="left__list">
            <li><a class="list__link" href="" #>Sport</a></li>
            <li><a class="list__link" href="" #>World</a></li>
            <li><a class="list__link" href="" #>Covid</a></li>
            <li><a class="list__link" href="" #>Business</a></li>
          </ul>
          <ul class="right__list">
            <li><a class="list__link" href="" #>Politics</a></li>
            <li><a class="list__link" href="" #>Sciense</a></li>
            <li><a class="list__link" href="" #>Religion</a></li>
            <li><a class="list__link" href="" #>Health</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  <div class="header__burger">
    <span></span>
  </div>
</div>

Мой код на Codepen https://codepen.io/sennarion/pen/dyRKBxK

Комментарии:

1. Пожалуйста, пишите на английском языке

2. Пожалуйста, напишите свой вопрос на английском языке Для получения дополнительной информации

3. Что это за язык такой? Персонажи в нем выглядят красиво 🙂

4. когда вы говорите: «Стиль и проект заданы», вы имеете в виду, что не можете изменить css и html? Является ли использование javascript вашим единственным вариантом?

Ответ №1:

Если вы можете изменить css и html, вы могли бы сделать это так:

сначала потеряйте javascript. добавьте в css следующее:

 .nav__item {
    position: relative;
}

.nav__item:hover > .categories__wrapper {
  display: block;
}

затем переместите свойство top из .categories__обертка в .categories__содержимое и установите значение top на .categories__обертка в 0

 .categories__wrapper {
    display: none;
    position: absolute;
    top: 0;
    left: -100px;
}

.categories__content {
    position: relative;
    top: 30px;
    box-shadow: 0px 0px 4px #BDBDBD;
    border-radius: 5px;
    background: #FFFFFF;
}

и, наконец, оберните категории в элемент навигации с классом=»nav__item», как это:

   <nav class="nav">
    <div class="nav__item">
      <span class="categories__link">Categories</span>
      <div class="categories__wrapper">
        ...
      </div>
    </div>
  </nav>
 
 .header__nav {
    display: flex;
    justify-content: center;
    align-items: center;
  height: 100vh;
}

.nav {
    position: relative;
}

.nav__item {
    position: relative;
}

.nav__item:hover > .categories__wrapper {
    display: block;
}

.categories__link {
    color: #000000;
    cursor: pointer;
}

.categories__link:hover {
    color: #2F80ED;
}

.categories__wrapper {
    display: none;
    position: absolute;
    top: 0;
    left: -100px;
}

.categories__content {
    position: relative;
    top: 30px;
    box-shadow: 0px 0px 4px #BDBDBD;
    border-radius: 5px;
    background: #FFFFFF;
}

.categories__content::after {
    z-index: -10;
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -5px;
    left: 50%;
    border: 5px solid transparent;
    transform-origin: 0 0;
    transform: rotate(45deg);
    box-shadow: 0px 0px 4px #BDBDBD;
}

.categories__content::before {
    z-index: 10;
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -5px;
    left: 50%;
    border: 5px solid #fff;
    transform-origin: 0 0;
    transform: rotate(45deg);
}

.categories__list {
    display: flex;
    padding: 14px 30px;
}

.list__link {
    line-height: 150%;
    color: #000000;
}

.list__link:hover {
    color: #2F80ED;
} 
 <div class="header__nav">
  <nav class="nav">
    <div class="nav__item">
      <span class="categories__link">Categories</span>
      <div class="categories__wrapper">
        <div class="categories__content">
          <div class="categories__list">
            <ul class="left__list">
              <li><a class="list__link" href="" #>Sport</a></li>
              <li><a class="list__link" href="" #>World</a></li>
              <li><a class="list__link" href="" #>Covid</a></li>
              <li><a class="list__link" href="" #>Business</a></li>
            </ul>
            <ul class="right__list">
              <li><a class="list__link" href="" #>Politics</a></li>
              <li><a class="list__link" href="" #>Sciense</a></li>
              <li><a class="list__link" href="" #>Religion</a></li>
              <li><a class="list__link" href="" #>Health</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="header__burger">
    <span></span>
  </div>
</div>
Метки: