Примеры всплывающего меню с навигацией по сайту

Достаточно долгое время навигация по сайту (меню), как правило, находилась в левой или верхней части экрана. Анимация тоже была простой — подчеркивание, изменение цвета или толщины букв самих пунктов меню.

По мере распространения и совершенствования Javascript и CSS анимация становилась более плавной, интересной и разнообразной.

С появлением адаптивных версия сайтов под мобильные устройства пришла и пиктограмма "гамбургера" — нового стандарта, который позволял дизайнерам скрывать часть или даже большинство ссылок меню до тех пор пока они не понадобятся посетителю сайта для перехода в тот или иной раздел.

В этом посте продемонстрируем различные примеры всплывающих навигационных меню на российских и зарубежных сайтах.

Газпром

Меню плавно появляется и занимает весь экран. Есть строка поиска и все основные разделы по сайту.

Лента

Мгновенное появление меню без анимации с основными разделами каталога и частично с подразделами.

Рольф

Плавное появление меню с второстепенными подразделами сайта. Открывается во всю ширину в верхней части экрана.

Связной

Анимации нет. Меню из бургера делает акцент на основных разделах каталога, мгновенно их подсвечивая. При наведении на основные пункты меню показываются и подразделы + графический баннер товара или акции.