Ссылки Поиск Написать В избранное NO

Варианты адаптивного меню для мобильных устройств

Сегодня обновил портфолио по адаптивной верстке. Теперь там 238 работ. и я все еще принимаю заказы!


(04.10.2018 blogger) Варианты адаптивного меню - для мобильных устройств

(Меню на сайте keromag.ru. Просто уменьшите ширину окна браузера).


Сегодня хотелось бы немного поговорить про разные адаптивные меню и скрипты к ним. На фото выше - очень популярный сейчас вариант (похож на меню m.vk.com) c фиксированной плашкой. Тут меню всегда остается сверху. В нем всегда есть логотип и кнопка «бутерброда» (гамбургера) для открытия меню. Если телефон один, достаточно прописать ссылку с tel: для удобного звонка по клику. Но если контактов много, я делаю разворачивающуюся панель под основным меню. Например, как на alteprint.ru.

Само разворачивающееся меню тоже не всегда открывается поверх всего сайта. Иногда это не уместно или технически невозможно. Тогда можно открывать его прямо под шапкой: plasmacentre.ru или вообще сдвинуть контент ниже.


Здесь везде использован мой же скрипт мобильного меню. Просто немного меняются стили. А вообще, вполне можно использовать этот скрипт и отдельно (ekogrunty.ru). Тогда отпадают проблемы с левой колонкой в мобильной версии сайта. Она просто сворачивается под плавающую кнопку в левом верхнем углу. А правая колонка - уже идет после контента.


Кстати, меню в шапке я люблю оставлять развернутыми - для наглядности. Но иногда бывает, что нужно свернуть что-то небольшое. Например, как на avtobot.by. Тогда проще использовать стили и .slideToggle( в jQuery, раз уж эта библиотека подключена практически к любому сайту.


С меню бывает и более экзотический вариант верхней плашки (например, edinorog.com.ua). Но чаще всего просят максимально уменьшить шапку, чтобы сразу было видно контент: ab-glushkov.ru.