Блог

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

Как правильно настроить выпадающее меню, созданное тегами ul-li?

#html #css #frontend #scss-mixins

Вопрос:

выпадающее меню ul li

после

Я создал раскрывающееся меню с помощью тегов ul и li . Это работает, но я хочу, чтобы при открытии меню оно не сдвигало блоки ниже, как на экране. Итак, это мой css:

 #select-ul {
  display: block;
  cursor: pointer;
  border: 0.1px solid rgba(0, 0, 0, .1);
  border-top: 0;
  background-color: white;
  padding: 12px;
  height: 300px;
  overflow: auto;
  float: none;
  overflow-y:scroll;
}

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

1. youtube.com/watch?v=Fc-oyl31mRI Посмотрите это видео с некоторым javascript, оно будет отлично смотреться, но будет довольно сложным.

2. На самом деле я использую VueJS, так что JS не будет проблемой, но это чистый html scss

3. Просто попробуй z-index: 1; position: absolute; , и это сработало для меня, конечно, и с тобой тоже.

4. Кстати, position: absolute; работает, но выпадающее меню не масштабируется по размеру окна. Я имею в виду, что размер окна Preferences меняется в зависимости от размера окна браузера, но меню статично. Как я могу это исправить?

Ответ №1:

Измените свой css немного так

СТАРЫЙ CSS

 #select-ul {
  display: block;
  cursor: pointer;
  border: 0.1px solid rgba(0, 0, 0, .1);
  border-top: 0;
  background-color: white;
  padding: 12px;
  height: 300px;
  overflow: auto;
  float: none;
  overflow-y:scroll;
}

НОВЫЙ CSS

 #select-ul {
  z-index: 1;
  display: none;
  position: absolute;
  width: 100%; /* you can change but must give width */
  max-height: 300px;
  cursor: pointer;
  border: 1px solid #e5e5e5; /* 0.1px doesn't work */
  border-top: 0;
  padding: 12px;
  background-color: white;
  overflow: hidden scroll;
}

#select-ul.active {
  display: flex;
  flex-direction: column;
}

И немного JavaScript преобразуйте его vue так, как вы его используете.

 const dropdown = document.querySelector('#select-ul');

dropdown.addEventListener('click', () => {
  dropdown.classList.add('active'); // you can also use toggle
});

// additionally 
dropdown.addEventListener('blur', () => {
  dropdown.classList.remove('active');
});

Дайте мне знать, сработает ли это! TBH Я не понимаю, о какой проблеме масштабирования вы говорите. *уточните это еще немного.

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

1. Извините, может быть, я не могу его получить, но где я должен добавить этот код JS? Я имею в виду, что у меня есть scss файл со стилями и vue ( <template> , <script> , <style> ) файл. И это все.

2. На самом деле, неважно, я добавил v-if к блокам ниже. Так что, когда я открою ul-li , вы этого не увидите Currency и нажмете Save preferences 😀

Метки: ,