@PHPjedi

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

В навигационном меню есть две 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? Откуда брать размер экрана?

Ответьте, пожалуйста, по подробнее. Буду очень признателен).
  • Вопрос задан
  • 174 просмотра
Решения вопроса 2
search
@search
мама говорит что я особенный
В 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/
Ответ написан
LenovoId
@LenovoId
I want, women not to get sick
Из вашего примера же делается медиа запрос в котором говорится что первое меню flex block а как нужно показать другое т.ь при меньшем разрешение то скрываем первое и.е display: none и показываем второе т.е display:block,flex,grid etc
Но щас проще манипулировать одним это проще
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
tsepen
@tsepen
Frontend developer
Вообще так не надо делать, ul должен быть один, и чтобы сделать его адаптивным под любые устройства нужно использовать ''@media'' в css.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы