2

Хочу сделать выпадающее меню на всю высоту экрана. Сделал через Height: 100vh. В принципе у меня почти получилось, но меню до верха не достаёт 65px. Как сделать так чтобы фон меню был на всю высоту экрана, а пункты второстепенного меню остались напротив родительского меню?

сейчас меню выглядит так

сейчас меню выглядит так

должно быть так

должно быть так

1

1 ответ 1

2

Самый простой вариант (при котором не надо менять остальной код) - это сделать тень наверх.

Другой вариант - разместить фон в псевдоэлементе, который и расположить на всю высоту.

PS: 100vh уходит вниз за экран - это может быть нехорошо.

Вот реализация с псевдоэлементом:

html, body, nav {
  height: 100%;
  margin: 0;
}

nav {
  position: relative;
  overflow: hidden;
  line-height: 1.5em;
  color: white;
}

ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 8em;
}

ul::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -100vh;
  width: 100%;
  height: 200vh;
  background: linear-gradient(to right, black, #555);
}

li ul {
  margin: -1.5em 0 0 8em;
  display: none;
}

li:hover > ul {
  display: block;
}

a {
  display: block;
  padding: 0 .5em;
  cursor: pointer;
}

li:hover > a {
  background: silver;
}

a:not(:last-child)::before {
  content: "►";
  float: right;
}
<nav>
  <ul>
    <li><a>First</a>
    <li><a>Second</a>
    <li><a>Nested</a>
      <ul>
        <li><a>Nested 1</a>
        <li><a>Nested 2</a>
        <li><a>Nested again</a>
          <ul>
            <li><a>Inermost 1</a>
            <li><a>Inermost 2</a>
            <li><a>Inermost 3</a>
            <li><a>Inermost 4</a>
          </ul>
        <li><a>Nested 4</a>
      </ul>
    <li><a>Fourth</a>
  </ul>
</nav>

9
  • Да, с тенью всё получилось, спасибо. Но я так понимаю, что тень задаётся в конкретных пикселях и сейчас я смогу это значение прописать исходя из положения первого основного пункта меню. Но если будут еще пункты ниже, то и второстепенное меню вместе с короткой тенью будет перемещаться вниз. Можно в параметрах меню выставить какое-то очень большое значение, чтобы тень уходила вверх за экран? Или это тоже может быть нехорошо? Commented 1 мар. 2019 в 21:04
  • @ИгорьЛешок, вместо пикселей можно указать те же 100vh. Вниз может быть нехорошо по двум причинам - меню в экран не влезет, либо где-то вылезет скролл даже если меню в экран влезет. С тенью такой проблемы не будет. Но я бы всё же воспользовался вариантом с псевдоэлементом.
    – Qwertiy
    Commented 1 мар. 2019 в 21:06
  • Мне тоже идея с псевдоэлементом больше понравилась. Тень - это всё-таки костыль. Как это сделать? Commented 1 мар. 2019 в 21:13
  • Про тень (правда, ты коммент уже удалил) - на элемент с высотой 100vh повесить box-shadow: 0 -100vh #2e2f33;. Про псевдоэлемент - сейчас сделаю.
    – Qwertiy
    Commented 1 мар. 2019 в 21:18
  • Да, я про минус забыл Commented 1 мар. 2019 в 21:20

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.