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

Выпадающее меню

Выпадающее меню отображает на странице или форме приложения Кнопку, при нажатии на которую раскрывается меню с добавленными действиями. Эти действия настраиваются при помощи Сценария.

Чтобы разместить виджет, перетащите его с правой панели дизайнера интерфейсов на поле для моделирования или нажмите кнопку +Виджет. Подробнее читайте в статье «Шаблон формы». Затем выполните настройку в открывшемся окне.

Вкладка «Основные»

• Показывать содержимое в конструкторе — включите опцию, чтобы содержимое виджета отображалось на поле для моделирования;
• Расположение* — настройте расположение выпадающего меню относительно кнопки;
• Размер окна* — выберите размер выпадающего меню.

Вкладка «Системные»

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

Для завершения настройки нажмите на кнопку Сохранить.

Настройка содержимого

После настройки виджета необходимо добавить пункты меню, которые будут отображаться при нажатии на кнопку. Для этого нажмите кнопку +Добавить элемент меню и выполните настройку.

• Название* — укажите название пункта меню;
• Событие при нажатии — задайте событие, которое произойдет, когда пользователь нажмет на пункт меню. К примеру, изменится статус элемента приложения. Для этого нужно добавить соответствующий сценарий. Нажмите кнопку Создать, введите название сценария и нажмите Открыть. Откроется вкладка Сценарии, где вы сможете прописать необходимый сценарий. Подробнее об этом читайте в статье «Сценарии в виджетах».

Кроме того, вы можете изменить настройки Кнопки и переименовать её, нажав на значок шестеренки рядом с её названием.

После выполнения всех настроек нажмите кнопки Сохранить и Опубликовать на верхней панели конструктора интерфейсов.

Пример

В примере виджет Выпадающее меню добавлен на форму просмотра приложения Заказы. Название Кнопки изменено на «Применить скидку». В настройках пунктов меню добавлены сценарии изменения значения поля Стоимость. К сумме заказа применяется скидка 10% или 15%. Результат применения сценария отображается в поле Стоимость со скидкой.  

tabs.html drop-down.html

Была ли статья полезной?

ДаНет

Нашли опечатку? Выделите текст, нажмите ctrl + enter и оповестите нас

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

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

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

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

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

1. 1.

   Перейдите в админку WordPress.

2. 2.

   Перейдите во вкладку Внешний вид ― Меню.

3. 3.

   В блоке «Страницы» выберите те страницы, которые хотите поместить в раскрывающийся блок.

4. 4.

   Нажмите Добавить в меню:

5. 5.

   С помощью мыши перенесите добавленные пункты под основную категорию.

   Совет. В настройках можно делать несколько уровней дочерних элементов:

6. 6.

   Нажмите Сохранить меню:

7. 7.

   Перейдите в режим редактирования страницы. Раскрывающийся блок должен отобразиться в основном меню.

8. 8.

   Настройте внешний вид раскрывающегося блока. Он редактируется в рамках настройки модуля «Меню». Обратим внимание только на те параметры настройки, которые касаются только раскрывающегося меню. Всё остальное настраивается вместе с основным меню.

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

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

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

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

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

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

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

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

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

Да

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

дизайнов вложенных меню, тем, шаблонов и загружаемых графических элементов на Dribbble

1. Просмотр нижнего шаблона навигации

   Нижний шаблон навигации

2. Просмотр Использование вложенных экземпляров в Figma

   Использовать вложенные экземпляры в Figma

3. Посмотреть Исследование табличных данных для инструмента CRM

   Исследование табличных данных для инструмента CRM

4. Просмотр вложенной таблицы данных

   Вложенная таблица данных

5. Просмотр вложенных флажков

   Вложенные флажки

6. Просмотр вложенных меню — Keynote

   Вложенные меню — Keynote

7. Просмотр вложенных свойств в Figma

   Вложенные свойства в Figma
8. Просмотр значков веб-интерфейса — демонстрация Rive Nested Artboards

   Иконки веб-интерфейса — демонстрация Rive Nested Artboards

9. Просмотр отчета о контроле качества — обзор проверки

   Отчет о контроле качества — обзор проверки

10. Просмотр вложенных пространств | Значок

    Вложенные пространства | Значок

11. Eggplore UI StyleGuide — Freebie 🤯

12. Посмотреть вольт — вложенный свиток

    Вольт — вложенный свиток

13. Просмотр вложенного обновления бренда

    Вложенное обновление торговой марки

14. Просмотр расширенных фильтров

    Дополнительные фильтры

15. View Chotchkes — Дизайн логотипа

    Чочки — Дизайн логотипа

16. Просмотр вложенных

    Вложенный

17. View Voyr — информационная панель

    Voyr — Приборная панель

18. Просмотр элемента вложенного списка

    Элемент вложенного списка

19. Посмотреть упрямый генератор

    Упрямый генератор

20. Вариант просмотра списка таблицы данных 1

    Опция просмотра списка таблиц данных 1

21. Просмотр панели администратора — навигация ⚙️

    Панель администратора — навигация ⚙️

22. Третий краткий обзор нового набора иллюстраций

23. Просмотр редактора логических правил

    Редактор логических правил

24. Посмотреть упрямый генератор бесплатных иллюстраций

    Упрямый генератор бесплатных иллюстраций

Зарегистрируйтесь, чтобы продолжить или войдите

Загрузка еще…

Документация: — amp.

Содержание

• Использование
  • Вложенные подменю
  • Динамический рендеринг контента
• Атрибуты
  • сторона (дополнительно)
  • Общие атрибуты
• Действия
  • Сброс
• Стайлинг
• Доступность
• Валидация

Описание

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

Требуемые скрипты

Поддерживаемые макеты

fill

Использование

включает многоуровневую организацию контента внутри . Боковая панель с можно использовать вместе с для создания адаптивного меню.

Компонент должен быть размещен внутри . Компонент может содержать следующие элементы AMP:

• <список усилителей>
• <усилитель-аккордеон>

поддерживает вложение одного или нескольких слоев подменю. Он использует следующие атрибуты своих потомков в качестве идентификаторов функциональности подменю:

• amp-nested-submenu : определяет контейнер скрытого подменю. При открытии элемент вдвигается и занимает место своего родительского меню (либо , либо другое подменю).
• amp-nested-submenu-open : это идентифицирует элемент, который открывает подменю при нажатии. Он должен быть родственным указанному подменю.
• amp-nested-submenu-close : идентифицирует элемент, закрывающий ближайшее подменю. Элемент должен быть потомком подменю.

Только теги

 Открыть боковую панель

  
    <ул>
      

        
Открыть подменю
        

          <ул>
            

              
вернуться
            
            

              
Открыть другое подменю
              

                
вернуться
                 jpg"
                  макет = "отзывчивый"
                 
                 
                >
              
            
          
        

Динамический рендеринг контента

Динамическое извлечение содержимого из конечной точки JSON с использованием шаблона и amp-mustache .

Пример ниже демонстрирует эту возможность путем вложения внутрь .

 Открыть боковую панель