Блог

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

меню горизонтальной прокрутки css с выпадающими списками

#html #css #flexbox #overflow

#HTML #css #flexbox #переполнение

Вопрос:

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

Как вы можете видеть в примере, настольная версия способна отображать выпадающие списки при наведении курсора мыши на меню, однако при использовании мобильной версии, которая использует overflow-y: hidden выпадающий список скрыт.

Я попытался изменить overflow-y на все доступные параметры, я бы подумал, что установка его на visible позволит увидеть выпадающий список, однако это не так.

На данный момент я открыт для всего, я собираюсь использовать фиксированную позицию и установить ее с помощью javascript, но я бы предпочел этого не делать, если есть лучшее решение в css.

Мне нужно оставить горизонтальную прокрутку пунктов меню верхнего уровня.

Спасибо за любую помощь.

 body {
  background: #eee;
  font-family: sans-serif;
}

.main.mobile {
  max-width: 250px;
}

.main {
  max-width: 700px;
  margin: 0 auto;
  background: white;
}

.mobile .nav {
  overflow-x: scroll;
  overflow-y: hidden;
}

.list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.list__item {
  padding: 1em;
  white-space: nowrap; 
  position: relative;
  transition: .2s all;
}

.list__item:hover {
  background: #dc205c; 
}

.list__item:hover .dropdown {
  visibility: visible;
  opacity: 1;
}

.dropdown {
  visibility: hidden;
  opacity: 0;
  transition: .4s all;
  position: absolute;
  list-style-type: none;
  top: 100%;
  padding: 0;
  left: 0;
  background: white;
}

.dropdown__item {
  padding: 1em;
  transition: .2s all;
}

.dropdown__item:hover {
  background: #dc205c;
}  
 <main class="main mobile">
  <header class="header">
    <nav class="nav">
      <ul class="list">
        <li class="list__item">
          <span>item 1</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
        <li class="list__item">
          <span>longer item 2</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
        <li class="list__item">
          <span>item 3</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
        <li class="list__item">
          <span>item 4</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
      </ul>
    </nav>
  </header>
</main>

<main class="main">
  <header class="header">
    <nav class="nav">
      <ul class="list">
        <li class="list__item">
          <span>item 1</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
        <li class="list__item">
          <span>longer item 2</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
        <li class="list__item">
          <span>item 3</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
        <li class="list__item">
          <span>item 4</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
      </ul>
    </nav>
  </header>
</main>

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

1.При использовании overflow-x: scroll ваш overflow-y: visible будет автоматически установлен на auto . поэтому вам придется решить это с помощью javascript. попробуйте посмотреть на эти страницы:css-tricks.com/popping-hidden-overflow jsfiddle.net/68fBE/2