• 0k
  • 0
Веб-дизайн \ 1 Февраль 2016

Как оформить меню сайта: 6 актуальных вариантов

Меню навигации — критично важный элемент любого сайта, и мы нисколько не преувеличиваем, когда говорим, что к нему нужно отнестись со всей серьезностью. Визуально оно может быть любым: вертикальным, горизонтальным, составленным из иконок или «плавающим», но есть одно обязательное условие — помогать посетителю находить нужные разделы, служить ему путеводителем и опорой.

Согласны? Тогда давайте поговорим про самые актуальные варианты оформления меню. Статья особенно пригодится тем, кто еще не сделал сайт, но собирается заняться этим в самое ближайшее время. Итак, к делу!

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

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

Шаблон «Гостиница» с классическим горизонтальным меню:

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

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

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

Шаблон «Портфолио фотографа» с вертикальным меню:

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

Если у вас на сайте довольно много текста, а сам он — с длинной прокруткой, подумайте о том, чтобы разместить меню в фиксированной «шапке». Тогда оно будет перед глазами читателя вне зависимости от того, в каком разделе он сейчас находится. Логотип и контакты тоже лучше добавить в хедер, чтобы эта информация была всегда под рукой.

Шаблон «Юридическая фирма» с меню в фиксированном хедере:

Шаблон для сайта юридической фирмы

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

Как современный человек, пользующийся интернетом, вы наверняка видели его, и не один раз. Такое меню особенно хорошо подходит для «длинных» страниц и мобильных сайтов, потому что его видно всегда и везде, и оно помогает пользователю быстро переходить в нужные ему разделы.

Решите сделать такое меню — прочитайте инструкцию.

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

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

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

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

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

Подсказка: выделите блок с меню другим цветом, чтобы он не сливался с фоном.

Шаблон «Фолк-исполнитель» с меню в нижней части страницы:Шаблон для сайта музыканта

 

Выбрали свой вариант? Замечательно, теперь можно приступить к созданию сайта в редакторе Wix!

Автор Команда Wix

Оставайтесь в курсе
новинок блога

Подпишитесь на блог и не пропустите ни одной статьи!

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email

Давайте дружить \ 

Подпишитесь на нашу рассылку и получайте
новые статьи блога прямо себе на почту.

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email