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

Всем привет, на старом сайте стоит дико лагучее мобильное меню, хочу его переверстать(в крайнем случае подключить библиотеку и стилизовать уже под свои нужды).
Подскажите пожалуйста, в 2019 году - какая лучшая реализация меню, с помощью каких библиотек ее реализовать? Или лучше писать на чистом css+js и не использовать их вообще? Если можно использовать сторонние библиотеки, то какие лучше? Попробовала подключить Pushy - немного не понравилась как реализована стилизация.
  • Вопрос задан
  • 2324 просмотра
Решения вопроса 1
alex-1917
@alex-1917
Если ответ помог, отметь решением
1. Меню должно быть одно - финты с двумя меню для разных устройств - признак криворучки.
2. Отображение менять через и только и исключительно через CSS+media.

Хотя судя по тексту вопроса, знаний три процента, тогда в репозитории искать среди 624'498 плагинов мобильных меню, хуже не будет)))
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
daemonhk
@daemonhk
ПсиХоПат
<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;
}
Ответ написан
Комментировать
anatoly_kulikov
@anatoly_kulikov
Помог ответ? Отметь решением!
Лучше, конечно, использовать чистый css без js. Ещё можно подключить библиотеку на php, называется Mobile-Detect - она определяет тип устройства, с которого заходит посетитель. Получая тип устройства, можно выводить различное меню для мобильных устройств и десктопов.
Ответ написан
Комментировать
@FOcuswOwX
mmenu

Ставится по верх существующего. Настроек хватает за глаза
Ответ написан
@painmaker
я бы предпочел хендмейд. нравится реализация в бутстрете. но, если из-за одного меню весь бутстреп пихать в проект не охота - можно в екземплах на сайте посмотреть реализацию и написать свое (или просто взять от туда нужный кусок кода, всего-то разметить стили под разрешения, и прикрутить кнопку с ивентом открытия-скрытия меню). Так же нравится меню в Materializecss. Но, опять же фреймворк с кучей свистоперделок. Но там уже меню мобильное с тач-реализацией в материал-дизайне
Ответ написан
Комментировать
@Programmir
Как может быть мобильное меню лагучее, это же мелкий кусок кода. Что вы там наделали?)
Ответ написан
Ваш ответ на вопрос

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

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