Как делают такое меню?

Question

[Jedi]

В навигационном меню есть две ul. Первый ul с классом "a" должно отображаться для мобильных устройств. Второй ul должно отображаться для десктопнных дисплеев.

<nav>
     <ul className="a">
         <li><a href="/somewhere">Click me</a></li>
     </ul>
     <ul className="b">
         <li><a href="/somewhere">Click me</a></li>
         <li><a href="/somewhere">Contact us</a></li>
     </ul>
</nav>

Как это делают? Как скрывать одну из ul? Откуда брать размер экрана?

Ответьте, пожалуйста, по подробнее. Буду очень признателен).

Answer 1

[Demian Smith]

В CSS есть такая штука - media queries (https://developer.mozilla.org/ru/docs/Web/CSS/Medi...

Это про адаптивный дизайн.

В идеале, вашему приложению должно быть плевать на каком типе устройства оно отображается (комп, планшет, смартфон, часы и т.п.). Единственное что его должно интересовать - это как адаптировать дизайн под текущий размер экрана. Вот для этого и нужны медиазапросы. В вашем примере CSS код будет выглядеть как-то так:

/* прячем тег с классом .b  при ширине экрана меньше чем 479px */
@media (max-width: 479px) {
  .b {
    display: none;
  }
}

/* прячем тег с классом .a  при ширине экрана больше чем 480px */
@media (min-width: 480px) {
  .a {
    display: none;
  }
}

В общем приближении, почти все мобилы имеют разрешение < 480px в ширину.

Такие дела.

Вот тут подробнее https://habr.com/en/sandbox/89063/

Comments

[Jedi]

Большое Вам спасибо!

Answer 2

[Максим]

Из вашего примера же делается медиа запрос в котором говорится что первое меню flex block а как нужно показать другое т.ь при меньшем разрешение то скрываем первое и.е display: none и показываем второе т.е display:block,flex,grid etc
Но щас проще манипулировать одним это проще

Answer 3

[Андрей Охотников]

Вообще так не надо делать, ul должен быть один, и чтобы сделать его адаптивным под любые устройства нужно использовать ''@media'' в css.