Адаптивное горизонтальное меню для сайта

Адаптивное горизонтальное меню для сайта

адаптивное меню для сайта

В данной заметке рассматривается процесс создания адаптивного горизонтального меню для сайта. Для того, чтобы интегрировать его на сайт, предварительно следует подключить библиотеку jquery и «иконочный» шрифт font awesome на сайт.

Заметка разбита на 3 части: HTML, CSS и JS. Пример полностью рабочий и апробирован в нескольких проектах, в т.ч. есть успешный опыт интеграции данного меню в шаблон opencart (в связке с php), где пункты меню добавляются автоматом при появлении их в БД сайта.

1. HTML-разметка

Для начала создается базовая html-разметка (по количеству нужных пунктов, уровней вложенности etc):

На данном этапе сложностей возникнуть не должно. Простые html-списки и иконки там, где это необходимо. Верхняя ссылка с id=»touch-menu» понадобится нам позднее для мобильной версии меню.

2. CSS стили

Тут все тоже должно быть понятно. Адаптивность достигается за счет верстки на @media-запросах. Управление выпадающими блоками меню происходит на основе псевдокласса :hover (т.е. по наведению мыши/нажатием на блок на тачскрине). Остальные атрибуты отвечают за графическое представление меню и их, естественно, можно менять по своему желанию.

 

3. Немного JS

Приведенный ниже js-код активируется только в мобильной «версии» сайта, т.е. когда ширина экрана < 767 пикселей. Кнопка типа «гамбургер» и надпись «меню» становятся активными и при клике на эти элементы меню раскрывается выпадающим списком. До этого момента, соответственно, меню убрано под кат.

Наверное, на этом моменте стоит завершать данную заметку. Да, конечно, в ней мало внимания уделено тому, какой элемент за что отвечает, но, с другой стороны, это довольно простой вариант меню для сайта. По крайней мере, человеку, более-менее знакомому с основами веб-разработки, не составит труда разобраться, что к чему.