Лучший вариант создания мобильного меню на сайте?

Question

[Анита Ковалева]

Всем привет, на старом сайте стоит дико лагучее мобильное меню, хочу его переверстать(в крайнем случае подключить библиотеку и стилизовать уже под свои нужды).
Подскажите пожалуйста, в 2019 году - какая лучшая реализация меню, с помощью каких библиотек ее реализовать? Или лучше писать на чистом css+js и не использовать их вообще? Если можно использовать сторонние библиотеки, то какие лучше? Попробовала подключить Pushy - немного не понравилась как реализована стилизация.

Answer 1

[alex-1917]

1. Меню должно быть одно - финты с двумя меню для разных устройств - признак криворучки.
2. Отображение менять через и только и исключительно через CSS+media.

Хотя судя по тексту вопроса, знаний три процента, тогда в репозитории искать среди 624'498 плагинов мобильных меню, хуже не будет)))

Comments

[Анита Ковалева]

Да нет)) просто сам сайт написан не мной, и сделано прошлым разработчиком, и там реализовано 2 меню, и если реализация меню десктопа - норм, то мобильное сделано плагином wp, и работает через одно место, и там просто достаточно сложно прикрутить мобильное меню в то место, которое мне нужно, сверстано не очень...поэтому и уточнила) Либо уже не заниматься двойной работой и переписать с нуля и десктоп и мобильное, что бы было 2в1

[Антон]

1. Меню должно быть одно - финты с двумя меню для разных устройств - признак криворучки.

Кто сказал, что должно быть одно? Предлагаете исходя из БЭМ переколбашивать основное меню (если не мобайл ферст) под мобилу? А если дизайн требует иного?

[alex-1917]

Антон, исходя не из БЭМ, а исходя из https://developers.google.com/speed/pagespeed/insights/
Мы же про типовое адекватное меню - 20 категорий, сотня подкатегорий, у каждой свои иконки или мини-эскизы. Вложенность DOM легко переваливает за 5-10 уровней...
Если вы про меню домашней странички Васи Пупкина (Главная, Обо мне, Мои проекты, Мои увлечения, Контакты, Карта сайта), то для такого мусора можно ничего не переколбашивать и навесить по пачке меню на каждый чих, ХУЖЕ НЕ БУДЕТ)))

Answer 2

[Одиночка Айс]

<noindex>
    <div class="mobile-menu">
        <div class="mobile-head"></div> <!-- бургер, логотип, etc -->
        <div class="mobile-body"></div> <!-- меню, поиск, телефоны, etc -->
    </div>
</noindex>

Суть: после определенной ширины браузера, например, 1024, показываем нашу менюшку, по клику на "бургер" - меняем класс у body, например, mobile-open, через который меняем бэкграунд бургера на крестик, а также показываем само мобильное меню:

.mobile-body {
    width: 100%;
    height: 100vh;
    padding-bottom: 70px; //"волшебное число", даем отступ снизу, чтобы можно было прокручивать полностью менюшку
    background: #fff;
    position: fixed;
    top: 50px; //50px - высота mobile-head, обычно хватает для телефонов
    left: -100%;
    transition: left 0.3s;
    overflow: auto;
    display: block;
}

body.menu-open .mobile-body {
    left: 0;
}

Answer 3

[Анатолий Куликов]

Лучше, конечно, использовать чистый css без js. Ещё можно подключить библиотеку на php, называется Mobile-Detect - она определяет тип устройства, с которого заходит посетитель. Получая тип устройства, можно выводить различное меню для мобильных устройств и десктопов.

Answer 4

[FOcuswOwX]

mmenu

Ставится по верх существующего. Настроек хватает за глаза

Comments

[Анита Ковалева]

Спасибо, сегодня потестирую

Answer 5

[painmaker]

я бы предпочел хендмейд. нравится реализация в бутстрете. но, если из-за одного меню весь бутстреп пихать в проект не охота - можно в екземплах на сайте посмотреть реализацию и написать свое (или просто взять от туда нужный кусок кода, всего-то разметить стили под разрешения, и прикрутить кнопку с ивентом открытия-скрытия меню). Так же нравится меню в Materializecss. Но, опять же фреймворк с кучей свистоперделок. Но там уже меню мобильное с тач-реализацией в материал-дизайне

Answer 6

[Programmir]

Как может быть мобильное меню лагучее, это же мелкий кусок кода. Что вы там наделали?)

Comments

[Анита Ковалева]

Делала не я, весь сайт построен предыдущим веб разработчиком в 90% случаев на плагинах wp, и меню не исключение.