Падающее меню: Как создать выпадающее меню

06.08.2023 alexxlab

Содержание

Как создать выпадающее меню в REG.Site

Не всегда все пункты меню можно уместить в основное горизонтальное меню. Поэтому в шапку страницы помещают только крупные категории, а подкатегории находятся в раскрывающемся меню. В этой статье мы покажем вам, как настроить такое меню в REG.Site. Как создать основное меню мы описали в статье Как создать меню в шапке сайта в REG.Site.

Для примера создадим вот такой раскрывающийся блок:

Обратите внимание! Перед тем как создавать меню, нужно настроить страницы, записи и рубрики, на которые будут ссылаться пункты выпадающего меню.

Чтобы создать выпадающее меню:

1.
Перейдите в админку WordPress.
2.
Перейдите во вкладку Внешний вид ― Меню.
org/HowToStep»> 3.
В блоке «Страницы» выберите те страницы, которые хотите поместить в раскрывающийся блок.
4.
Нажмите Добавить в меню:
5.
С помощью мыши перенесите добавленные пункты под основную категорию.
Совет. В настройках можно делать несколько уровней дочерних элементов:
6.
Нажмите Сохранить меню:
7.
Перейдите в режим редактирования страницы. Раскрывающийся блок должен отобразиться в основном меню.
8.
Настройте внешний вид раскрывающегося блока. Он редактируется в рамках настройки модуля «Меню». Обратим внимание только на те параметры настройки, которые касаются только раскрывающегося меню. Всё остальное настраивается вместе с основным меню.

Настройки раскрывающегося блока находятся во вкладке «Дизайн».

В блоке «Макет» настройте Направление выпадающего меню

Совет. Если вы делаете выпадающее меню в шапке, выбирайте направление «вниз», так как направление «вверх» уведёт меню за пределы экрана и пользователь не сможет им воспользоваться.

В блоке «Ссылки выпадающего меню» можно настроить такие элементы выпадающего меню, как:

фон,
цвет разделительной линии между основным и дополнительным меню,
цвет текста,
цвет активной ссылки,
цвет фона меню мобильной версии сайта,
цвет текста на мобильной версии сайта.

Обратите внимание! Если вы не укажете цвета в параметрах «Мобильные Меню Цвет Фона» и «Цвет текста мобильного меню», в мобильной версии будут отображать цвета, которые настроены для ПК.

В блоке «Анимация» можно настроить, как будет проявляться меню при наведении на основную категорию.

Готово, вы создали выпадающее меню.

Помогла ли вам статья?

Да

раз уже
помогла

Пользовательское выпадающее меню | Университет Webflow

Домашний урок

Все уроки

Создайте полностью настраиваемое раскрывающееся меню, используя элементы и взаимодействия Webflow.

layout-design

У этого видео старый пользовательский интерфейс. Скоро будет обновленная версия!

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

Тем не менее, для тех из вас, кто хотел бы иметь больший контроль над тем, как их выпадающее меню построено, оформлено и работает, в этом уроке мы научим вас именно этому — как создать собственное выпадающее меню! 1 взаимодействия , чтобы выпадающий список работал — открывать и закрывать при срабатывании

В этом уроке

Чтобы создать собственное раскрывающееся меню, мы собираемся:

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

Создайте раскрывающуюся оболочку

Перетащите первый блок div с панели добавления элементов .
Назовите свой класс . Это будет «раскрывающаяся оболочка».
Установите значение ширины
Измените позицию на: относительно — это позволит вам абсолютно расположить оболочку «выпадающего содержимого», которую вы создадите позже.

Подробнее: О позиционировании

Совет по дизайну
При установке фиксированного значения ширины убедитесь, что для параметра max-width задано значение 100 % или меньше. Таким образом, вы гарантируете, что ваш элемент не выйдет за пределы ширины меньших устройств. Вы также можете сделать наоборот, установив ширину на 100% и максимальную ширину на фиксированное значение, например 500px или 1200px. Это гарантирует, что ваши текстовые строки не будут слишком длинными на больших устройствах, а ваши изображения не будут расти больше, чем их исходное разрешение.

Создайте триггер раскрывающегося списка

Добавьте второй блок div внутри оболочки раскрывающегося списка — вы сделаете это в навигаторе , поскольку у оболочки раскрывающегося списка нет высоты на холсте.
Добавьте также класс в этот блок div. Мы называем это «триггер выпадающего списка».
Перетащите текстовый блок прямо в раскрывающийся триггер. Дважды щелкните, чтобы изменить текст.
Добавьте стиль, например цвет фона (или изображение, или градиент) в блок div выпадающего триггера
Дайте вашему тексту передышку, установив отступы

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

Стиль состояния наведения и изменение курсора мыши триггера

Вы можете настроить состояние наведения раскрывающегося списка, чтобы те, кто наводит курсор на триггер, чувствовали приглашение щелкнуть его.

Подробнее : Стилизация состояний

Вам может показаться неестественным, что при наведении раскрывающегося списка отображается обычный курсор мыши. Вы всегда можете выбрать свой триггерный блок div и изменить тип используемого курсора . Для ссылок, как правило, вы хотите выбрать курсор-указатель. Или вы можете выбрать любой тип курсора.

Подробнее: Курсоры

Создание оболочки выпадающего содержимого

Перетащите новый блок div прямо в оболочку раскрывающегося списка и поместите его под триггером раскрывающегося списка.
Создайте класс и назовите его выпадающее содержимое
Установите позицию на абсолютную — это гарантирует, что ваше выпадающее меню не выталкивает другое содержимое на странице
Установите ширину на 100% , чтобы заполнить все доступное пространство внутри выпадающей оболочки
Установите переполнение на скрытый — это будет полезно при создании взаимодействия позже
Добавьте цвет фона , если хотите

Подробнее: Переполнение

Добавление содержимого

Содержимое может быть любым. Здесь мы добавим несколько блоков ссылок.

Перетащите блок ссылок из панели добавления и поместите его в раскрывающуюся оболочку содержимого
Добавьте класс в блок ссылок. Мы назовем это «выпадающая ссылка», вы можете называть это как угодно.
Измените настройку дисплея на блок , чтобы выпадающая ссылка покрывала всю ширину раскрывающегося содержимого
Добавьте отступ со всех четырех сторон, удерживая клавишу Shift и перетаскивая
Перетащите текстовый блок прямо в блок ссылок
Скопируйте ссылку блок и вставьте его еще несколько раз, чтобы создать столько ссылок, сколько вам нужно в раскрывающемся списке
Дважды щелкните каждый текстовый блок , чтобы переименовать каждую раскрывающуюся ссылку
Ссылка каждый блок ссылок на соответствующий ресурс

Проверка: Наше руководство по различным настройкам ссылок, которые вы можете установить для элементов ссылок

Стилизация текста ссылки

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

Выберите блок ссылок (выпадающая ссылка)
Измените цвет текста
Измените подчеркивание (украшение текста) на None , чтобы избавиться от подчеркивания ссылки

Подробнее

Наследование стиля текста

Построение взаимодействия для переключения раскрывающегося списка

Теперь вы хотите создать взаимодействие, которое запускается для выбранного элемента, и вы хотите, чтобы оно происходило при щелчке мыши (или касании). Чтобы построить это:

Выберите триггер раскрывающегося списка
Создать взаимодействие: триггер элемента: щелчок мышью (касание)

Но я хочу переключать выпадающее меню при наведении, а не при щелчке

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

Откройте раскрывающийся список

Под при первом нажатии (0022 при наведении ), создайте новую анимацию . Назовите это раскрывающееся меню открытым.
Выберите блок div раскрывающегося содержимого
Создайте первое действие анимации : размер
Установите высоту на ноль (0 пикселей) . Поскольку вы установили скрытое переполнение в раскрывающемся содержимом, оно просто исчезнет.
Установите для этого параметра начальное состояние , так как вы не хотите, чтобы выпадающее содержимое отображалось при загрузке страницы
Создайте второе анимационное действие: размер
Установите высоту на авто — вы можете либо ввести слово «авто» в поле ввода и нажать Enter. Или щелкните единицу измерения справа от ввода и выберите «Авто» в меню единиц измерения.

Закройте раскрывающийся список

Под при 2-м щелчке (или при наведении ), добавьте новую синхронизированную анимацию . Назовите этот раскрывающийся список закрытым.
Выберите содержимое раскрывающегося списка
Создайте анимационное действие: размер
Установите высоту обратно на 0 пикселей

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

‍

Перейти к следующему

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

Ресурсы

Создание аккордеона
Создание интерактивной стрелки раскрывающегося списка