Как сделать меню на сайте TOBIZ: обычное и выпадающее

Инструкции для первых шагов: от создания страниц до настройки меню, кнопок и оформления сайта
Дата публикации: 03-05-2018       13855

Как сделать горизонтальное меню на сайте — TOBIZ

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

Здесь уже всё автоматизировано, и никаких кодов вам не придётся писать.

Как сделать горизонтальное обычное меню

Перед тем как добавить меню, рекомендуем сначала создать все необходимые страницы сайта, например Главная, О компании, Доставка, Оплата, Контакты и другие. 

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

Инструкция:

  1. Зайдите в редактор Главной страницы.


     
  2. Нажмите кнопку "Добавить блок" в панели слева. 
    *При разработке сайта на шаблоне вам следует перейти сразу к 5 пункту, так как в шаблоне обычно уже есть меню!


     
  3. Нажмите на раздел Шапка и меню. Выберите подходящий для вас блок меню. На примере блок 102. 


     
  4. Теперь ваш блок добавился внизу страницы. Наведите на блок и увидите справа кнопку Сортировка (зеленого цвета). Переместите блок вверх с помощью зажатия данной кнопки. 


     
  5. Нажмите на разделы меню. Перед вами слева появится список разделов, прописанных в меню. 


     
  6. Поменяйте названия пунктов меню в соответствии со страницами, которые вы хотите добавить в многостраничный сайт. Для этого нажмите на пункт меню и пропишите название. Мы назвали пункты как: Главная, О компании, Услуги, Контакты. 


     
  7. Чтобы добавить новый пункт меню, если их в шаблоне недостаточно, нажмите "Добавить пункт меню". Если их достаточно, переходим к следующему шагу. 


     
  8. Добавьте корректные ссылки на ваши разделы меню, чтобы при нажатии на кнопку в меню, вы могли перейти на соответствующую страницу. Ссылку нужно добавить в поле "Ссылка или якорь". Нажмите на скрепку и выберите страницу, на которую должен ссылаться пункт меню. Например, если кнопка меню называется "О компании", то выбираем страницу О компании.
     

  9.  
  10. Проделайте данную процедуру со всеми кнопками меню. Меню готово. Не забудьте Сохранить!

Чтобы добавить меню в статьи или товары читайте статью: Как добавить меню в Товары и Статьи. 


Как сделать горизонтальное выпадающее меню

Если вы хотите добавить выпадающие пункты меню, например, в разделе Услуги, то:

  1. Нажмите снова на ваше готовое меню. Разделы для редактирования появятся слева.
  2. Нажмите на кнопку Добавить пункт меню. Появится Новый пункт меню. Отредактируйте его, как на инструкции выше вы редактировали разделы (переименовать, поставить ссылку на страницу). 
  3. Для примера мы делаем список выпадающих услуг. Мы добавим кнопки Монтаж из камня, Монтаж из кирпича. 

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

  1. Теперь нужно подвинуть данные пункты меню, чтобы они стали дополнительными и не были в основном меню. Для этого нажмите на стрелочку вправо.


     
  2. Вот так будет выглядеть теперь ваше меню.


     
  3. Эти разделы теперь нужно переместить под основной раздел. Зажмите дополнительный раздел и двигая, переместите под основной. Пример: мы переместили два раздела под раздел Услуги.


     
  4. Меню готово! Сохраните, нажав на кнопку Сохранить в левой панели. Снаружи теперь меню будет выглядеть так:

Чтобы вы могли передвигаться по сайту свободно на каждую страницу, меню необходимо добавить на другие страницы сайта. Это можно сделать с помощью функции блок-ссылки. 

Почему пункт меню открывает ошибку 404 или не переходит к якорю

Чаще всего причина в неверном значении поля «Ссылка или якорь». Сначала определите, куда должен вести пункт меню, а затем проверьте формат ссылки.

ЗадачаЧто указатьЧто проверить
Открыть другую страницу сайтаВыберите опубликованную страницу через значок скрепкиСтраница сохранена, опубликована и не удалена
Прокрутить текущую страницу к блоку#anchor2, где anchor2 — якорь нужного блокаПеред именем есть знак #, а имя совпадает с настройками блока
Перейти к блоку на главной с другой страницы/#anchor2Указан якорь блока именно на главной странице
  1. Откройте настройки меню и заново выберите целевую страницу либо вставьте правильный якорь.
  2. Сохраните изменения и опубликуйте страницу.
  3. Проверьте пункт меню в опубликованной версии, в том числе с другой страницы и на мобильном устройстве.

Подробная настройка якорей разобрана в инструкции «Как ставить якорь на сайте для меню».

FAQ

Сколько уровней меню лучше использовать?

Для большинства сайтов достаточно основного уровня и одного выпадающего подменю. Более глубокая структура сложнее на телефоне и затрудняет поиск разделов.

Почему подменю не появляется?

Проверьте, что дочерний пункт сдвинут вправо и расположен сразу под нужным родительским пунктом, а изменения сохранены и опубликованы.

Можно ли вести пункт меню на блок той же страницы?

Да. Укажите якорь блока в формате #anchor2. Для перехода к якорю главной страницы с другого URL используйте /#anchor2.

Как проверить меню перед публикацией?

Откройте каждую ссылку на компьютере и телефоне, проверьте выпадающие пункты, якоря и страницы. Отдельно убедитесь, что ни одна ссылка не ведёт на 404.

Выберите основу для своего сайта
Посмотрите готовые варианты оформления. После регистрации в TOBIZ можно выбрать шаблон и заменить содержание на своё.

Рассказать друзьям:

Cделайте первый шаг

Выберите готовый шаблон из более 1600+ бесплатных и премиум вариантов.

ШАБЛОНЫ САЙТОВ