В Wix можно создавать интерактивные выпадающие списки без подключения сторонних скриптов. Для этого достаточно встроенных инструментов редактора или возможностей Wix Velo. Такой элемент часто применяют в меню навигации, формах регистрации, фильтрах каталога и настройках личного кабинета.
Если нужен простой вариант, достаточно воспользоваться настройками меню в редакторе. К каждому пункту можно добавить подменю и настроить структуру уровней. Такой способ подходит для навигации по сайту и не требует программирования.
Для динамических списков, например выбора категории или фильтрации товаров, используется элемент «Dropdown» из панели «Добавить». В нем можно вручную задать варианты значений или связать список с коллекцией базы данных. Это позволяет автоматически обновлять пункты меню при изменении данных.
Более гибкие сценарии реализуются через Wix Velo. Здесь можно программно управлять содержимым выпадающего списка: загружать данные с сервера, менять набор значений в зависимости от действий пользователя и создавать каскадные списки.
Выбор подходящего элемента для выпадающего списка
В Wix доступно несколько вариантов создания выпадающих списков: Dropdown из панели «Добавить», элементы из Wix Forms, а также выпадающее меню через «Меню & Header». Каждый из них решает разные задачи.
Если требуется простой список значений для выбора внутри формы (например, «Город», «Возрастная категория»), используйте элемент Dropdown. Он поддерживает настройку значений и подключение к базе данных через Dataset.
Для сбора заявок и обратной связи лучше подойдёт выпадающий список внутри Wix Forms. В этом случае выбранное значение автоматически сохраняется вместе с формой и может быть отправлено на почту или в CRM.
Если необходимо создать навигацию по сайту, используйте выпадающее меню в разделе «Меню & Header». Здесь важно, что список подстраивается под структуру страниц, а изменения в навигации синхронизируются автоматически.
При выборе элемента ориентируйтесь на задачу: данные для формы, структурированная база или навигация. Это избавит от дублирования и ускорит настройку сайта.
Добавление стандартного выпадающего списка через меню «Добавить»
В редакторе Wix встроен элемент «Выпадающий список», который можно быстро разместить на странице без кода.
- Откройте редактор Wix и выберите страницу, где нужен список.
- Нажмите кнопку «Добавить» в левой панели.
- Перейдите в раздел «Интерактивные элементы» или «Меню и кнопки» (в зависимости от версии редактора).
- Выберите «Выпадающий список» и перетащите его в рабочую область.
После добавления элемент можно настроить:
- Изменить текст пунктов через двойной клик.
- Добавить новые варианты в настройках элемента.
- Задать действие при выборе пункта – переход на страницу, открытие ссылки или запуск функции.
- Настроить ширину и расположение списка для адаптации под дизайн сайта.
Чтобы список выглядел аккуратно, используйте не более 5–7 пунктов. Для больших наборов данных лучше подключать динамический список или фильтрацию.
Настройка пунктов списка вручную
Откройте редактор Wix и выберите элемент Dropdown на странице. В панели справа перейдите в раздел Manage Choices.
Удалите все ненужные пункты, нажав на значок корзины рядом с каждым названием. Для добавления нового пункта используйте кнопку Add Choice и введите текст, который будет отображаться пользователю.
Чтобы изменить порядок элементов, перетащите их мышью в списке. Это позволит разместить наиболее важные варианты сверху.
Для каждого пункта можно назначить уникальное действие: переход на страницу сайта, ссылка на внешний ресурс или якорь внутри текущей страницы. Настройка выполняется через поле Link напротив названия.
Если список длинный, группируйте элементы по смысловым категориям и используйте разделители для удобной навигации.
Подключение выпадающего списка к базе данных
Чтобы связать выпадающий список с коллекцией Wix Data, необходимо использовать элементы Dropdown и подключение к источнику данных через Dataset. Это позволяет автоматически подгружать значения из базы и сохранять выбор пользователя.
- Добавьте элемент Dropdown на страницу через панель «Добавить» → «Элементы ввода».
- Создайте или выберите коллекцию в «Content Manager», где будет храниться список значений.
- Перетащите на страницу Dataset и укажите:
- Collection: нужная база данных;
- Mode: «Read» для отображения данных или «Write» для записи выбранного значения.
- Выделите Dropdown и в меню «Connect to Data» настройте:
- Connect options: выберите поле коллекции, которое должно отображаться как текст списка;
- Value connects to: укажите поле, которое будет хранить выбранное значение.
Если необходимо показывать только уникальные значения, добавьте скрытый Dataset с фильтром и подключите к нему Dropdown. Для динамического управления параметрами используйте код в редакторе Velo:
wixData.query("CollectionName")
.distinct("fieldName")
.then(results => {
$w("#dropdown1").options = results.items.map(item => {
return { label: item, value: item };
});
});
Таким образом, список всегда будет синхронизирован с актуальными данными коллекции, а выбранное значение можно использовать в формах, фильтрах и поисковых запросах.
Использование динамических значений в выпадающем списке
В Wix можно подгружать значения для выпадающего списка не вручную, а из базы данных (Collections). Такой подход позволяет менять содержимое списка автоматически при обновлении данных.
Для реализации используется Wix Data и редактор Velo. Сначала создаётся коллекция, например «Категории», где каждый элемент имеет уникальное название. Далее элемент выпадающего списка подключается к этой коллекции через панель «Connect to Data».
Алгоритм:
| Шаг | Действие |
|---|---|
| 1 | Создать коллекцию в Content Manager с нужными полями (например, Name, ID). |
| 2 | Добавить элемент Dropdown на страницу. |
| 3 | Через «Connect to Data» привязать список к коллекции, указав поле, которое будет отображаться пользователю. |
| 4 | Для передачи выбранного значения в фильтры или формы задать связанное поле «Value». |
| 5 | Опубликовать сайт, чтобы проверить обновление списка при изменении данных в коллекции. |
При необходимости можно использовать код Velo для более гибкой настройки, например загрузки значений с фильтрацией:
import wixData from 'wix-data';
$w.onReady(() => {
wixData.query("Категории")
.ascending("Name")
.find()
.then(res => {
const options = res.items.map(item => {
return { label: item.Name, value: item._id };
});
$w("#dropdown1").options = options;
});
});
Таким образом, изменения в базе сразу отражаются в выпадающем списке без ручного редактирования элементов.
Настройка внешнего вида выпадающего списка
В Wix откройте редактор сайта и выберите элемент «Выпадающий список». В панели свойств задайте фиксированную ширину в пикселях или процентное значение для адаптивного отображения. Для высоты строки используйте настройку «Высота элемента», оптимально 40–50 px для удобного клика.
Цвет фона списка задается отдельно для закрытого состояния и при наведении. Рекомендуется использовать контрастные оттенки текста и фона, чтобы обеспечить читаемость. Например, светлый фон (#FFFFFF) с темным текстом (#333333) для стандартного состояния и слегка затемненный фон (#F0F0F0) при наведении.
Шрифты настраиваются через панель «Текст»: выберите стиль, размер 14–16 px и насыщенность, соответствующую общему дизайну сайта. Для акцентов можно применить жирный шрифт к выбранному элементу списка.
Добавьте рамку для выделения списка. Рекомендуется тонкая граница 1–2 px с цветом #CCCCCC и скруглением углов 4–6 px. При наведении рамку можно затемнять до #999999 для визуальной обратной связи.
Иконка раскрытия списка (стрелка) настраивается через «Иконки элементов»: используйте стандартную или загрузите SVG с прозрачным фоном. Размер стрелки 12–16 px, цвет совпадает с текстом или контуром рамки.
Для дополнительного контроля используйте опцию «Состояния»: можно отдельно задать фон, текст и рамку для состояния выбранного элемента, наведения и неактивного состояния, что повышает визуальную консистентность интерфейса.
Обязательно тестируйте список на мобильных устройствах. Для этого используйте переключение вида редактора Wix: ширина элементов, размер текста и высота строки должны оставаться удобными для касаний пальцем.
Добавление действий при выборе пункта списка
В Wix для добавления действий при выборе элемента выпадающего списка используется Wix Velo. После добавления Dropdown на страницу необходимо присвоить ему уникальный идентификатор через панель свойств.
Далее в редакторе кода создайте обработчик события onChange для выпадающего списка. Пример:
dropdown.onChange((event) => {
let selectedValue = event.target.value;
if(selectedValue === «Опция 1») {
wixLocation.to(«/страница1»);
} else if(selectedValue === «Опция 2») {
$w(«#textBox»).text = «Вы выбрали Опцию 2»;
}
});
Для навигации по сайту используйте wixLocation.to(«URL»). Для изменения содержимого элементов применяйте $w(«#elementID»).property. Значение выбранного пункта доступно через event.target.value, что позволяет строить условия с точным соответствием текста или значения опции.
Если требуется запускать внешние функции или обновлять базы данных, помещайте вызовы API внутри обработчика onChange. Wix поддерживает асинхронные операции, что позволяет безопасно выполнять fetch запросы или обновление коллекций перед отображением изменений пользователю.
Для тестирования действий используйте Preview режим, чтобы убедиться, что переходы и обновления элементов происходят без ошибок, а значения dropdown соответствуют назначенным условиям.
Проверка работы выпадающего списка на опубликованном сайте
После публикации сайта необходимо убедиться, что выпадающий список корректно отображается и функционирует на всех устройствах. Для этого откройте сайт в нескольких браузерах: Chrome, Firefox, Safari и Edge. Обратите внимание на отображение стрелки раскрытия и читаемость текста внутри списка.
Проверьте интерактивность: клик по списку должен раскрывать все элементы, а выбор значения должен сразу отражаться в поле ввода. Если список связан с формой, убедитесь, что выбранное значение передается корректно и сохраняется в базе данных или отправляется на электронную почту.
Используйте инспектор браузера (F12) для проверки структуры HTML. Элементы <select> и <option> должны присутствовать, а скрипты, отвечающие за динамическое раскрытие, загружаться без ошибок в консоли.
Проверяйте адаптивность: список должен быть удобен для касания на мобильных устройствах. Минимальная высота элементов – 44px, чтобы обеспечить точное нажатие пальцем. На планшетах и десктопах убедитесь, что ширина списка соответствует ширине контейнера и не выходит за рамки макета.
Тестируйте сценарии с нестандартными значениями: длинный текст внутри опций, специальные символы, пробелы в начале и конце. Все варианты должны корректно отображаться и не обрезаться.
При использовании анимаций или кастомных стилей для выпадающего списка проверяйте плавность открытия и закрытия. Любые задержки или лаги могут ухудшить пользовательский опыт.
Для окончательной проверки заполните форму с выпадающим списком на тестовом устройстве и отправьте данные. Сверьте, что выбранные значения приходят корректно, а сообщения об ошибках отсутствуют.
Вопрос-ответ:
Как добавить выпадающий список на страницу Wix без использования кода?
Для этого нужно использовать встроенный элемент «Меню» или «Список» в редакторе Wix. В редакторе откройте вкладку «Добавить», выберите «Список и меню», затем перетащите элемент на страницу. После этого можно настроить пункты списка через панель свойств, добавив текст и ссылки на нужные страницы.
Можно ли сделать так, чтобы выпадающий список показывал разные пункты в зависимости от выбранной категории?
Да, это возможно с помощью базы данных Wix и функций динамических страниц. Нужно создать коллекцию с категориями и элементами списка, а затем подключить выпадающий список к базе данных через настройки элемента. При выборе категории будут отображаться только соответствующие записи.
Как изменить дизайн и цвет выпадающего списка в Wix?
В редакторе Wix выберите элемент списка и откройте панель «Дизайн». Там можно выбрать предустановленный стиль или настроить отдельные параметры: цвет фона, текст, рамку, тени и закругления углов. Также можно настроить внешний вид элементов при наведении и клике, чтобы список выглядел гармонично с остальным сайтом.
Возможно ли сделать выпадающий список на мобильной версии сайта Wix, который отличается от версии для компьютера?
Да, в редакторе Wix есть возможность редактировать мобильную версию отдельно. Откройте мобильный редактор, добавьте или настройте отдельный выпадающий список, изменив его содержимое и размер. Это позволяет адаптировать навигацию под маленький экран, не меняя дизайн основной версии сайта.
Загрузка...
