• 0k
  • 0
Веб-дизайн \ 21 Ноябрь 2013

«Сделай сам» c Wix: вертикальное навигационное меню

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

Однако при выборе структуры меню необходимо учитывать особенности дизайна сайта – в некоторых случаях будет удобней использовать вертикальное меню, располагающееся в боковой части сайта (слева для языков, которые читаются слева направо и наоборот). Вертикальное меню хорошо тем, что его можно использовать с классическим дизайном сайта, так что ваши посетители не будут чувствовать себя потерянными. Расположенное сбоку меню так же просто в использовании и интуитивно понятно для пользователей любого уровня.

Хотя все шаблоны конструктора сайтов Wix имеют встроенное горизонтальное меню, вы можете легко создать и использовать вертикальное меню за несколько шагов:

  • В редакторе HTML5 удалите горизонтальное меню из шаблона
  • Нажмите «Добавить» и выберите «Кнопки и Меню»
  • Выберите подходящую кнопку и добавьте на сайт

Во вкладке «Добавить» нажимаем «Кнопки и Меню» и добавляем кнопку на сайт

  • Чтобы настроить дизайн кнопки, кликните на нее и выберите «Изменить стиль»
  • Выберите «Настроить стиль» в понравившейся категории кнопок

Нажимаем на кнопку и выбираем «Изменить стиль»

  • Измените цветовую гамму, тени и шрифт по вашему вкусу
  • Когда дизайн будет готов, нажмите на созданную кнопку и выберите «Копировать»

Кликните по кнопке и выберите «Копировать»

  • Сделайте так несколько раз, пока у вас не будет достаточно кнопок для всех страниц
  • Скопируйте и перетащите кнопки, а затем выстроите их по вертикальной линии

Копируйте и перетаскивайте кнопки, а затем расположите их по вертикальной линии

  • Теперь нужно добавить ссылки к каждой кнопке: нажмите по одной из них и выберите «Настройки»
  • Теперь вы можете изменить текст кнопки в зависимости от страницы, на которую она будет вести
  • Выберите «Ссылка на» и «Страница»

Нажмите «Ссылка на» и «Страница», чтобы добавить ссылку к каждой кнопке

  • Из списка страниц выберите соответствующую

Выберите страницу и нажмите «ОК»

  • Не забудьте поставить галочку «Показывать на всех страницах» в настройках кнопки

Нажмите «Показывать на всех страницах»

  • Повторите это действие для всех кнопок меню
  • Сохраните работу и перейдите в режим «Предпросмотр», чтобы убедиться, что все кнопки работают правильно.

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


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

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

Неправильный электронный адрес

Электронный адрес уже зарегистрирован

Неправильный электронный адрес

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

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

Неправильный электронный адрес

Электронный адрес уже зарегистрирован

Неправильный электронный адрес