Строим меню сайта — 6 рабочих вариантов

2 августа 2017 г. Время чтения: меньше минуты Опубликовано в разделах: Блог, Как сделать?

Меню сайта (навигация) — самый значительный элемент вашего сайта, который является важной частью любого сайта. К созданию и оформлению меню, стоит отнестись очень серьёзно. Оно может выглядеть совершенно по-разному: вертикальным, горизонтальным, составленным из иконок или «плавающим», но нужно соблюдать главную цель — помочь посетителю найти нужные разделы, свободно передвигаться по просторам вашего сайта.

Согласны? Обсудим самые популярные варианты оформления навигации. Это будет полезно тем читателям, которые только создали свой сайт, либо тем, кто только собирается этим заняться. Приступим к делу!

Горизонтальное меню

Довольно актуальный вариант. Он популярен потому, что это более привычный для нас дизайн. Горизонтальное меню — выглядит довольно просто в лучшем смысле этого слова. Оно не вызывает удивления и не вызывает недоумение, все знают, где его искать и как им пользоваться. Хотите, создать комфорт для посетителей сайта, чтобы они не метались по сайту в поиске нужного раздела сайта — этот вариант для вас. Так же это подойдет для владельцев сайта с большим количеством информации и страниц.

Пример классического горизонтального меню:

Вертикальное меню

Альтернативный вариант тем, кто ищет что-то неординарное, вас подойдёт вертикальное меню, обычно его располагают в боковой части сайта. Действительно, это интересная идея для блога: меню — слева, текст и фотографии — в центре, все скромно и со вкусом.

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

Шаблон с вертикальным меню:

Меню в фиксированном хедере

Если на вашем сайте много текста, и сам сайт довольно длинный, для вас будет хорошим вариантом меню в фиксированной «шапке». Оно будет перед посетителем не смотря на то, в какой раздел он пошёл. Данные компании (логотип и контакты) лучше разместить в хэдере, таким образом, они всегда будут перед глазами.

«Плавающее» меню

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

Меню из иконок

Пожалуй самое простое и интересное разнообразие оформления меню, сайт выглядит очень выразительно и оригинально. Вот пару советов как это сделать: У вас есть иконка «Контакты» — не пишите слово, а ставьте иконку с домиком, или то, что у вас ассоциируется с контактами. Сайт с разделом покупок? Вставьте иконку с корзинкой. Выглядит такой сайт довольно интересно. Так же есть и недостатки этого дизайна, не все смогут понять ваши иконки и попросту не разберутся в сайте.

Для примера—сайт дизайн-студии, где меню составлено из иконок:

Меню внизу страницы

Хотите пойти против системы? Ваш вариант-меню в нижней части гглавной страницы. Больше подойдет для сайта с портфолио: меню не мешает, не загораживает изображение.

Понравился пост?

Подпишитесь на ежедневное обновление нашего блога прямо сейчас! Будьте в курсе новостей интернет-маркетинга!

Интернет-магазин и развитие
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Интернет-магазин и развитие на 100%
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Корпоративный сайт и развитие
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Корпоративный сайт и развитие на 100%
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Сайт-визитка и развитие
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Сайт-визитка, тексты и развитие
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Сайт-визитка и развитие на 100%
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Сайт, тексты и развитие (36 262 р)
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Лэндинг пейдж и Яндекс.Директ
Получать новости компании


×
Лэндинг пейдж и Google.Adwords
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Лэндинг пейдж и Яндекс.Директ и Adwords
Получать новости компании


×
Лэндинг пейдж и Яндекс.Директ 35 300 руб.
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Пакетное предложение
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Курс «Продвижение сайта без бюджета»
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Курс «Продвижение сайтов. Модуль 2»
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Курс «Профессиональная работа с контекстной рекламой»
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Курс «Создание Landing page + Яндекс.Директ»
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Курс «Создание сайта на Joomla 3! Модуль 2. Разработка»
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Курс «Создание интернет-магазина на VirtueMart»
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Курс «Создание интернет-магазина на VirtueMart»
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Курс «WordPress. Модуль 1. Управление сайтом»
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Курс«WordPress. Модуль 2. Разработка»
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Курс «Создание интернет-магазина»
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Курс «Создание сайта на основе CMS/HTML»
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Курс «Профессиональная веб-аналитика Google и Яндекс»
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Курс «Непоисковое продвижение сайтов в Интернет»
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Лэндинг пейдж на готовом дизайне и Google Adowrds
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ и Google Adowrds
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ и Google Adowrds 2 месяца
Получать новости компании

Я согласен с обработкой моих персональных данных в соответствии с с Федеральным законом РФ № 152-ФЗ «О персональных данных» от 27.07.2006 г.

×