Редактор Wix Harmony: добавление и управление меню
Меню помогают посетителям легко переходить по сайту и находить то, что вы предлагаете. Выберите страницы и ссылки, которые для вас важнее всего. Вы сами решаете, как выглядит и работает меню, поэтому навигация всегда остается удобной — независимо от устройства, которое используют посетители.
Добавление меню
Меню помогают посетителям переходить между страницами на сайте. В категории «Меню» панели «Добавить элементы» параметры «Горизонтальное», «Вертикальное» и «Гамбургер» добавляют
меню сайта, которое связано со страницами сайта (то есть новые страницы автоматически появляются в этом меню).
Также можно добавить
отдельное специальное меню для определенных зон и выбрать, будет ли оно горизонтальным, вертикальным или гамбургер-меню. Например, создайте специальное меню для футера сайта или для отдельной страницы, которой нужна собственная навигация.
Чтобы добавить меню:
- Перейдите в редактор.
- Нажмите + Добавить в левом верхнем углу редактора.
- Выберите категорию Меню.
Совет: Нажмите на значок стрелки
рядом с категориями, чтобы просмотреть список. - В зависимости от типа меню, которое вы хотите добавить, выполните следующие действия:
Меню сайта
рядом с пунктом меню, чтобы переименовать его или удалить. Специальное меню
Знаете ли вы?
Если вы добавляете панель меню в заголовок сайта, на
смартфоне она автоматически становится гамбургер-меню. Это помогает сделать навигацию на сайте аккуратной и удобной на небольших экранах.
Добавление и управление пунктами меню
После того как вы добавите меню, выберите пункты, которые хотите показать. Можно выбрать обычные страницы сайта, коллекции страниц приложений и CMS или отдельные страницы внутри коллекции. Также можно добавить контейнеры выпадающих списков и ссылки, чтобы адаптировать меню под задачи вашего клиента.
Вы всегда можете изменить существующее меню и пункты, которые в нем отображаются. Добавьте новые пункты, удалите ненужные или измените порядок, чтобы обновлять содержимое.
Чтобы управлять меню:
- Перейдите в редактор.
- Нажмите на меню.
- Нажмите Управлять меню.
- Выберите следующее действие:
Добавление новых пунктов меню
Изменение ссылки пункта меню
Переименование пункта меню
Удаление пункта из меню
Переупорядочивание пунктов меню
рядом с пунктом и перетащите его в нужное место.
Добавление выпадающих меню в меню
Используйте выпадающие меню, чтобы сгруппировать связанные страницы под одним пунктом меню и упростить навигацию. Выберите родительский пункт — страницу или ссылку — и вложите под него другие страницы, чтобы создать выпадающее меню.
Чтобы добавить и настроить выпадающее меню:
- Перейдите в редактор.
- Нажмите меню.
- Нажмите Управление меню.
- Определите, какой пункт меню будет заголовком выпадающего меню.
- Переместите первый пункт меню в выпадающее меню:
- Перетащите нужный пункт меню под заголовок выпадающего меню.
- Наведите курсор на перетащенный вами пункт и нажмите значок «Дополнительные действия»
. - Выберите Переместить под «Название страницы».
- Повторите шаг 5 для всех остальных пунктов, которые хотите переместить в выпадающее меню.
Вместо этого перетащите с помощью курсора:
Хотите быстрее превратить страницы в пункты выпадающего меню? Перетащите страницу вверх или вниз, а затем немного вправо, пока она не «спрячется» под другой страницей. На GIF ниже показано, как это должно выглядеть.
Изменение макета меню
Четкий макет меню помогает посетителям быстро понять, куда перейти дальше. Выберите панель меню, если хотите, чтобы все пункты были видны в ряд или в столбец, а также если вам нужен дополнительный контроль над тем, что происходит, когда в горизонтальном меню заканчивается место. Если вам нужен компактный значок для открытия навигации, выберите гамбургер-меню — это идеальный вариант для аккуратных минималистичных макетов или при ограниченном пространстве.
Чтобы изменить макет меню:
- Перейдите в редактор.
- Нажмите меню.
- Нажмите Изменить формат на панели действий.
- Выберите нужный параметр в разделе Меню:
- Панель меню: Пункты меню отображаются в панели навигации. В разделе Ориентация выберите, будет ли панель горизонтальной или вертикальной.
Совет: Для горизонтальных меню вы также можете выбрать Поведение элемента, если на экране посетителя не хватает места для пунктов меню — либо меню будет растягиваться (Подогнать под текст), либо можно добавить кнопку для прокрутки дополнительных пунктов (Подогнать под прокрутку). - Гамбургер-меню: Посетители видят значок, который нужно нажать, чтобы открыть меню. Это отличный вариант для аккуратных минималистичных макетов.
- Панель меню: Пункты меню отображаются в панели навигации. В разделе Ориентация выберите, будет ли панель горизонтальной или вертикальной.
Создание вертикальных и горизонтальных меню
Сделайте меню заметнее, настроив каждую деталь: от цветов и рамок до текста, углов и макета. Независимо от того, горизонтальное у вас меню или вертикальное, вы можете управлять внешним видом панели меню и ее пунктов, оформлять выпадающие меню и настраивать интервалы, чтобы все выглядело именно так, как нужно вашим посетителям.
Оформляете гамбургер-меню?
Подробнее о
гамбургер-меню. Здесь вы можете настроить каждый элемент — от кнопки до контейнера.
Чтобы изменить дизайн вертикального или горизонтального меню:
- Перейдите в редактор.
- Нажмите меню.
- Нажмите значок Все параметры дизайна
на панели действий. - Выберите нужную часть меню в разделе Выберите часть панели меню.
Панель меню и пункты меню
: Измените цвет меню, выбрав один из фирменных цветов или свой собственный цвет.
: Задайте рамки меню, чтобы оно выделялось, выбрав цвет, ширину и стиль. Нажмите значок Редактировать отдельные рамки 
, чтобы настроить каждую сторону рамки отдельно.
: Настройте пункты меню, изменив шрифт, цвет, форматирование, выравнивание, межбуквенный интервал и многое другое.
: Сделайте углы меню более квадратными или более округлыми, перемещая ползунок под Радиус. Нажмите значок Редактировать отдельные углы 
: Добавьте внутреннюю и внешнюю тень, чтобы придать меню интересный 3D-эффект, настраивая положение, размытие, цвет и другие параметры.
: Добавьте пространство для контента — задайте отступы и настройте расстояние между пунктами.
: Определите, нужно ли применять к этому меню направление сайта слева направо или справа налево. Для вертикальных меню вы также можете выбрать ширину пунктов меню и то, будут ли выпадающие меню открытыми или закрытыми.Выпадающие меню и пункты выпадающего меню
Работа с меню на мобильном устройстве
При просмотре
сайта на телефоне шапка изменяется, чтобы создать плавный и удобный для восприятия интерфейс без лишних элементов. Элементы в шапке полной версии, например ссылки навигации и значки соцсетей, перемещаются в компактное гамбургер-меню, а вверху остаются только самые важные элементы. Вы можете перемещать элементы внутри мобильного меню или удалять их по мере необходимости.
Чтобы настроить меню шапки на мобильном устройстве:
- Перейдите в редактор.
- Нажмите значок Смартфон
в правом верхнем углу страницы. - Нажмите значок гамбургер-меню.
- Нажмите раскрывающийся список Обычный режим и выберите Гамбургер-меню.
- Выберите, что делать дальше:
- Изменение положения элементов внутри контейнера: Перетащите элементы, чтобы переместить их внутри контейнера гамбургер-меню.
- Добавление элементов в контейнер: Используйте панель «Добавить элементы», чтобы добавить в контейнер гамбургер-меню еще элементы. Эти элементы отображаются только в смартфоне, то есть не появляются в полной версии сайта.
- Перемещение элемента обратно в заголовок: Щелкните элемент правой кнопкой мыши и выберите «Переместить в заголовок».
Часто задаваемые вопросы
Нажмите на вопрос ниже, чтобы узнать подробнее.
Можно ли изменить размер панели меню?
Можно ли добавить несколько меню в заголовок?
Удаляет ли удаление страницы из меню ее с сайта?
Нужно ли показывать в меню все страницы сайта?
Как изменить подчеркивание, которое появляется у пунктов меню при наведении на них курсора?