Ниспадающее меню | WebReference
Главная Вёрстка Bootstrap Компоненты Ниспадающее меню
Такой тип меню прочно завоевал место в операционных системах и программах. На сайтах также применяется довольно часто из-за своей компактности и иерархической структуры — каждый пункт меню может содержать подменю, а тот в свою очередь ещё одно. Впрочем, из-за этого имеются некоторые проблемы связанные с удобством восприятия. По виду меню невозможно сразу понять сколько пунктов оно содержит, а вложенные подменю затрудняют навигацию. По этим причинам Microsoft в некоторых своих программах отказалась от ниспадающего меню в пользу ленточного интерфейса, как у Word. Но главное, есть инструмент, а уж как им пользоваться решать вам, исходя из своих задач.
В Bootstrap само меню и кнопка для его вызова — это два разных элемента объединённых в один блок с классом dropdown.
Традиционно возле текста указывается небольшая стрелка вниз — она означает, что пользователь имеет дело именно с ниспадающим меню, а не с обычной кнопкой или текстом. Для её создания просто вставьте <span></span> после надписи на кнопке (пример 1).
Пример 1. Ниспадающее меню
<div> <button type="button" data-toggle="dropdown" aria-expanded="false"> Меню <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu"> <li role="presentation"><a role="menuitem" href="#">Сепулька</a></li> <li role="presentation"><a role="menuitem" href="#">Сепулькарии</a></li> <li role="presentation"><a role="menuitem" href="#">Сепуление</a></li> </ul> </div>
Ниже кнопки мы добавляем список с пунктами меню и пишем класс dropdown-menu. Всё остальное берёт на себя Bootstrap, так что дополнительных действий от нас не требуется. В результате получим следующее меню (рис. 1).
Рис. 1. Вид меню
Разделитель
Чтобы визуально отделить один или несколько пунктов меню от других применяется горизонтальный разделитель. Вместо обычной ссылки вставьте пустой элемент <li> с классом divider, как показано в примере 2.
Пример 2. Разделитель
<div> <button type="button" data-toggle="dropdown" aria-expanded="false"> Меню <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu"> <li role="presentation"><a role="menuitem" href="#">Сепулька</a></li> <li role="presentation"></li> <li role="presentation"><a role="menuitem" href="#">Сепулькарии</a></li> <li role="presentation"></li> <li role="presentation"><a role="menuitem" href="#">Сепуление</a></li> </ul> </div>
Результат данного примера показан на рис. 2.
Рис. 2. Применение разделителя в меню
Блокирование пунктов меню
Если некоторые пункты меню требуется сделать неактивными, то к элементу <li> следует добавить класс disabled (пример 3).
Пример 3. Блокированный пункт меню
<div> <button type="button" data-toggle="dropdown" aria-expanded="false"> Меню <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu"> <li role="presentation"><a role="menuitem" href="#">Сепулька</a></li> <li role="presentation"></li> <li role="presentation"><a role="menuitem" href="#">Сепулькарии</a></li> <li role="presentation"><a role="menuitem" href="#">Сепуление</a></li> </ul> </div>
Такой пункт меню будет виден, но он отображается другим цветом, на него нельзя щёлкнуть, а при наведении на пункт курсора мыши указатель меняется (рис. 3).
Рис. 3. Блокированный пункт меню
Открытое меню
Пользователю можно сразу показать открытое меню, тогда ему не придётся лишний раз щёлкать по нему чтобы посмотреть, что за ним скрывается. Просто добавьте класс open к родительскому <div>.
<div>
Вид кнопок
Кроме добавления традиционных кнопок допустимо вставить кнопку, у которой стрелка от текста визуально отделена (рис. 4).
Рис. 4. Вид кнопки со стрелкой
Для создания такого элемента сделаем две кнопки — одна с текстом, другая со стрелкой и объединим их в группу, добавив класс btn-group (пример 4).
Пример 4. Кнопка со стрелкой
<div> <button type="button">Меню</button> <button type="button" data-toggle="dropdown" aria-expanded="false"> <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu"> <li role="presentation"><a role="menuitem" href="#">Сепулька</a></li> <li role="presentation"></li> <li role="presentation"><a role="menuitem" href="#">Сепулькарии</a></li> <li role="presentation"><a role="menuitem" href="#">Сепуление</a></li> </ul> </div>
Поскольку мы теперь имеем дело с двумя кнопками, возможны разные эксперименты. Например, можно задать разный цвет у кнопки с текстом и стрелкой или поменять их местами.
<button type="button" data-toggle="dropdown" aria-expanded="false"> <span></span> </button> <button type="button">Меню</button>
В данном случае белая стрелка на зелёном фоне будет слева от текста «Меню».
ниспадающее меню
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11.08.2018
Редакторы: Влад Мержевич
Группа кнопок
Ctrl+←
Вкладки
Ctrl+→
Панель инструментов Редактор 3D—Справка | Документация
Доступно с лицензией 3D Analyst.
- Ниспадающее меню панели инструментов Редактор 3D
- Инструменты панели Редактор 3D
На панели инструментов Редактор 3D (3D Editor) содержится набор инструментов для создания, обновления или удаления объектов непосредственно на экране. Редактирование в 3D спроектировано для работы с дополнительным модулем ArcGIS 3D Analyst в ArcGlobe и ArcScene. Процесс редактирования в 3D мало отличается от редактирования в ArcMap (2D). Однако, имеются некоторые фундаментальные отличия. Все инструменты легко найти на прикрепляемой панели инструментов и в ниспадающем меню Редактор 3D (3D Editor). У вас имеется доступ к полному набору команд, включая Переместить (Move), Повернуть (Rotate), Размер (Size) и Масштаб (Scale), а также к специализированным 3D-инструментам, например, к инструментам для работы с объектами мультипатч. Все инструменты обеспечивают обновление поверхности в реальном времени, что позволяет как сохранять изменения непосредственно в документе, так и отменять эти изменения.
Вы можете задать настройки для редактирования в 3D с помощью диалогового окна Опции редактирования (Editing Options), которое можно открыть, щелкнув меню Редактор 3D (3D Editor) и выбрав Опции (Options). Вы можете установить единицы измерения и число знаков после запятой; какие символы и панели инструментов будут отображаться при редактировании и т. д. Кроме того, можно использовать параметры замыкания, которые облегчают редактирование. Параметры замыкания позволяют задать точное положение вершин новых объектов. Допуск замыкания, свойства и приоритет необходимо задать заранее, до использования среды замыкания.
Панель инструментов Редактор 3D (3D Editor) в ArcScene
Панель инструментов Редактор 3D (3D Editor) в ArcGlobe
Ниспадающее меню панели инструментов Редактор 3D
Опции ниспадающего меню панели инструментов Редактор 3D (3D Editor)
Опции | Описание | Сочетание клавиш |
---|---|---|
Начать редактирование (Start Editing) | Позволяет начать сеанс 3D-редактирования и активировать 3D-инструменты | |
Завершить редактирование (Stop Editing) | Позволяет завершить сеанс 3D-редактирования Вам будет предложено сохранить самые последние несохраненные изменения или отказаться от них. | |
Сохранить изменения | Сохраняет изменения во время редактирования Это рекомендуется сделать перед завершением сеанса редактирования. | |
Переместить (Move) : | Перемещает выделенные объекты вправо, влево, вперед, назад, вверх или вниз. | Выделите объект и нажмите клавишу M. |
Повернуть (Rotate) | Поворачивает выделенные объекты в плоскости x,y | Выделите объект и нажмите клавишу R. |
Масштаб (Scale) | Изменяет размер выделенных объектов. | Выделите объект и нажмите клавишу C. |
Разбить (Split) | Позволяет вручную разбить линию на две в указанной щелчком точке с созданием нового объекта. | |
Копировать параллельно (Copy Parallel) | Создает копию линейного объекта со сдвигом на указанном расстоянии слева, справа или по обеим сторонам исходного объекта | |
Слияние (Merge) | Объединяет выбранные объекты одного слоя в новый объект; применяется только к линиям и полигонам | |
Объединение (Union) | Объединяет выбранные пространственные объекты в один новый объект | |
Пересечь (Intersect) | Создает новый пространственный объект из общих участков или граней двух любых выбранных объектов одного типа геометрии. | |
Дублировать по вертикали | Копирует выделенные объекты с заданным отступом по вертикали | |
Заменить моделью (Replace with model) | Заменяет геометрию выделенного объекта или объектов 3D-моделью; доступно только для объектов-мультипатч. | |
Замыкание : | Включает замыкание, чтобы установить точное местоположение вершин пространственных объектов относительно других имеющихся объектов | |
Опции (Options) | Открывает диалоговое окно Опции редактирования (Editing Options) Примечание:Диалоговое окно Опции 3D редактирования (3D Editing Options) не содержит закладок Топология (Topology) и Аннотации (Annotation), которые имеются в среде редактирования в ArcMap. |
Инструменты панели Редактор 3D
Инструменты редактирования в 3D
Инструмент | Описание |
---|---|
Редактировать размещение | Позволяет выделять и перемещать, поворачивать и масштабировать объекты в интерактивном режиме. Выбранные объекты необходимы для активации других команд редактирования или заполнения атрибутов в других окнах, например, в окне Свойства редактируемого скетча (Edit Sketch Properties). |
Редактировать вершину (Edit Vertex) | Непосредственно в один клик включает режим редактирования вершины. Объект становится выделенным, а все вершины подсвечиваются. Указатель меняет цвет с черного на белый, показывая тем самым, что вы можете выбирать вершины и изменять сегменты. Щелкните вершину правой кнопкой мыши, чтобы открыть контекстное меню, в котором имеются дополнительные команды редактирования вершин, например, Вставить вершину (Insert) и Переместить (Move). Подсказка:
|
Включить текущее Z | Активирует цифровую плоскость, и вы можете создавать на ней новые пространственные объекты. Вновь созданные объекты получат Z-значения исходя из значения высоты, которая будет вами задана для появления цифровой плоскости. Нажимайте эту кнопку для включения и выключения плоскости высоты. Подсказка:
|
Текущее Z | Задает Z-значение на данный момент. Это поле будет включаться только тогда, когда будет переключаться Current Z. Значение по умолчанию равно нулю, но при установке значения current Z допускаются и положительные, и отрицательные значения. Подсказка:
|
Редактировать вершины | Подсвечивает все вершины выделенного объекта, активируя режим редактирования вершин. Вы можете использовать инструмент Редактировать вершину (Edit Vertex) для редактирования вершин и сегментов, которые образуют пространственный объект. Или просматривать и изменять свойства вершин в окне Свойства редактируемого скетча (Edit Sketch Properties). |
Разрезать полигоны | Разрезает полигон и создает один или несколько новых объектов. Замыкание на ребро часто помогает успешно выполнять операции разрезания. |
Инструмент Разбить (Split) | Разделяет выделенный линейный объект на два объекта. |
Атрибуты (Attributes) | Открывает окно Атрибуты (Attributes), в котором можно просматривать и редактировать (включая добавление, удаление или обновление) атрибуты выбранных пространственных объектов. |
Свойства скетча (Sketch Properties) | Открывает окно Свойства редактируемого скетча (Edit Sketch Properties), где можно редактировать такие атрибуты вершин, как M- и Z-значения. |
Создать объекты (Create Features) | Открывает окно Создать объекты (Create Features), в котором с помощью шаблонов и инструментов построения можно добавлять новые пространственные объекты. |
Связанные разделы
Создание открепленной реплики—ArcGIS Pro | Документация
Доступно с лицензией Standard или Advanced.
Репликации откреплений/прикреплений позволяет вам редактировать данные дочерней реплики и затем производить синхронизацию этих изменений с родительской репликой. При создании открепленных реплик дочерняя реплика может быть либо многопользовательской, либо файловой базой геоданных. Подробнее см. раздел Типы репликации.
Можно использовать опцию Создать реплику из контекстного меню Распределенные данные для доступа к инструменту Создать реплику из многопользовательской базы геоданных. После того, как открепленная реплика синхронизирована, ее регистрация отменяется. Если будет необходимо внести дополнительные изменения, то вам будет нужно создать реплику открепление/прикрепление.
Перед началом работы посмотрите требования к данным в разделе Подготовка данных для репликации. Список поддерживаемых с репликацией базы геоданных типов данных в ArcGIS Pro см. Совместимость репликации и базы геоданных.
Для создания открепленной реплики выполните следующие шаги:
- Запустите ArcGIS Pro и откройте существующий проект ArcGIS Pro или начните с шаблона.
- На панели Каталог щелкните правой кнопкой существующее подключение к базе геоданных и в контекстном меню выберите Распределенная база геоданных.
- Выберите Создать реплику .
- Для Наборов данных реплики используйте кнопку обзора, чтобы выбрать слои, которые будут реплицироваться в этой открепленной реплике.
- Для Тип реплики выберите Открепленная реплика из ниспадающего меню.
- В поле Выходной тип в ниспадающем меню выберите репликацию в Базу геоданных (по умолчанию) или в файл XML.
- Для Имени реплики введите имя, определяющее реплику. Имя каждой реплики должно быть уникальным для пользователя, создающего эту реплику.
- Щелкните Дополнительные настройки, чтобы раскрыть их, если вы хотите заменить опции репликации по умолчанию. Если вы не будете производить никаких изменений в опциях по умолчанию, то перейдите сразу к шагу 15.
- В Дополнительных настройках для Типа доступа к реплике выберите Полная или Простая для модели базы геоданных.
Более подробно об опциях типа доступа к реплике
- В Расширить классы объектов и таблицы выберите одну из следующих опций:
- Для Повторно использовать схему выберите одну из доступных опций: Использовать повторно или Не использовать повторно, которая является настройкой по умолчанию.
- Для Реплицировать связанные данные выберите Получать связанные или Не получать связанные, чтобы указать, реплицируются ли строки, связанные со строками, уже находящимися в данной реплике. Получать связанные – настройка по умолчанию.
- Объекты геометрии реплики можно использовать для определения геометрии реплики:
- Объектами геометрии реплики может быть векторный слой точек, линий или полигонов.
- Векторный слой, используемый для определения области реплики, может содержать один или несколько пространственных объектов. Если в слое более одного объекта, их геометрия объединяется, и реплицируются только те данные, которые пересекают объединенную геометрию.
- Если для объектов геометрии реплики были заданы фильтры (например, определяющий запрос), то для определения геометрии реплики будут использоваться только те объекты, которые соответствуют этим фильтрам.
- Также для определения геометрии реплики можно также использовать параметр среды Экстент :
- Если Объекты геометрии реплики заданы, они будут использоваться как геометрия реплики.
- Если Объекты геометрии реплики не заданы, для геометрии реплики будет использоваться параметр среды Экстент .
- Если заданы и Объекты геометрии реплики , и параметр среды Экстент , будет использоваться настройка Объекты геометрии реплики .
- Если не указаны ни Объекты геометрии реплики , ни параметр среды Экстент , будет использоваться полный экстент данных.
- Дополнительно вы можете поставить отметку Зарегистрировать только существующие данные, если данные уже существуют в дочерней базе геоданных и используются для задания наборов данных для реплики. Если опция Зарегистрировать только существующие данные не отмечена, что является настройкой по умолчанию, данные родительской базы геоданных копируются в дочернюю базу геоданных.
- Щелкните Запустить , чтобы создать открепленную реплику.
Связанные разделы
- Подготовка данных для репликации
- Создание односторонней реплики
- Создание двусторонней реплики
- Обзор синхронизации реплик
Отзыв по этому разделу?
Создать раскрывающийся список
Введение в Excel
Справка по Excel и обучение
Введение в Excel
Введение в Excel
Создать раскрывающийся список
- Создать новую книгу
Статья - Вставка или удаление рабочего листа
Статья - Переместить или скопировать рабочие листы или данные рабочего листа
Статья - Печать листа или книги
Статья - Используйте Excel в качестве калькулятора
Статья - Автоматическое заполнение данных в ячейках листа
Статья - Создать раскрывающийся список
Статья
Следующий: Строки и столбцы
Excel
Введите и отформатируйте данные
Проверка данных
Проверка данных
Создать раскрывающийся список
Excel для Microsoft 365 Excel для Microsoft 365 для Mac Excel для Интернета Excel 2021 Excel 2021 для Mac Excel 2019 Excel 2019 для Mac Excel 2016 Excel 2016 для Mac Excel 2013 Excel 2010 Excel 2007 Дополнительно. .. Меньше
Вы можете помочь людям более эффективно работать с рабочими листами, используя раскрывающиеся списки в ячейках. Раскрывающиеся списки позволяют людям выбирать элемент из списка, который вы создаете.
Хотите пройти через этот процесс? Попробуйте наш новый онлайн-учебник по раскрывающимся спискам (бета-версия).
На новом рабочем листе введите записи, которые должны отображаться в раскрывающемся списке. В идеале у вас должны быть элементы списка в таблице Excel. Если вы этого не сделаете, вы можете быстро преобразовать свой список в таблицу, выбрав любую ячейку в диапазоне и нажав Ctrl+T .
Примечания:
- org/ListItem»>
Зачем вам помещать данные в таблицу? Когда ваши данные находятся в таблице, при добавлении или удалении элементов из списка любые раскрывающиеся списки, основанные на этой таблице, будут автоматически обновляться. Вам не нужно делать ничего другого.
Сейчас самое время отсортировать данные в диапазоне или таблице в раскрывающемся списке.
Выберите ячейку на листе, в которой вы хотите разместить раскрывающийся список.
Перейдите на вкладку Данные на ленте, затем Проверка данных .
Примечание. Если вы не можете нажать Проверка данных , возможно, лист защищен или открыт для общего доступа. Разблокируйте определенные области защищенной книги или прекратите совместное использование листа, а затем повторите шаг 3.
На вкладке Параметры в поле Разрешить щелкните Список .
Щелкните поле Источник , затем выберите диапазон списка. Мы помещаем наш на лист под названием Cities в диапазоне A2:A9. Обратите внимание, что мы пропустили строку заголовка, потому что мы не хотим, чтобы это была опция выбора:
. org/ListItem»>Установите флажок в раскрывающемся списке в ячейке.
Перейдите на вкладку Входное сообщение .
Если вы хотите, чтобы при щелчке по ячейке отображалось сообщение, установите флажок Показывать входное сообщение при выборе ячейки и введите в поля заголовок и сообщение (до 225 символов). Если вы не хотите, чтобы сообщение отображалось, снимите флажок.
org/ListItem»>Если вы хотите, чтобы всплывающее сообщение отображалось, когда кто-то вводит что-то, чего нет в вашем списке, отметьте Показать предупреждение об ошибке после ввода неверных данных поле, выберите параметр в поле Стиль и введите заголовок и сообщение. Если вы не хотите, чтобы сообщение отображалось, снимите флажок.
Не знаете, какой вариант выбрать из набора Style ?
Чтобы показать сообщение, которое не мешает людям вводить данные, которых нет в раскрывающемся списке, щелкните Информация или Предупреждение. Информация покажет сообщение с этим значком, а Предупреждение покажет сообщение с этим значком.
Чтобы люди не могли вводить данные, которых нет в раскрывающемся списке, нажмите Стоп .
Примечание. Если вы не добавите заголовок или текст, по умолчанию в заголовке будет указано «Microsoft Excel», а в сообщении появится следующее: «Введенное вами значение недействительно. Пользователь имеет ограниченные значения, которые можно ввести в эту ячейку. .»
Если люди могут оставить пустую ячейку, отметьте Игнорировать пустое поле .
Перейдите на вкладку Предупреждение об ошибке .
После создания раскрывающегося списка убедитесь, что он работает так, как вы хотите. Например, вы можете проверить, не нужно ли изменить ширину столбца и высоту строки, чтобы отобразить все ваши записи.
Если список записей для раскрывающегося списка находится на другом рабочем листе и вы хотите, чтобы пользователи не видели его и не вносили в него изменения, рассмотрите возможность скрытия и защиты этого рабочего листа. Дополнительные сведения о том, как защитить лист, см. в статье Блокировка ячеек для их защиты.
Если вы решите изменить параметры в раскрывающемся списке, см. раздел Добавление или удаление элементов из раскрывающегося списка.
Чтобы удалить раскрывающийся список, см. Удаление раскрывающегося списка.
Вы можете скачать пример книги с несколькими примерами проверки данных, как в этой статье. Вы можете следовать инструкциям или создавать собственные сценарии проверки данных. Загрузите примеры проверки данных Excel.
Ввод данных выполняется быстрее и точнее, если вы ограничиваете значения в ячейке вариантами из раскрывающегося списка.
Начните с составления списка допустимых записей на листе и отсортируйте или измените порядок записей, чтобы они отображались в нужном вам порядке. Затем вы можете использовать записи в качестве источника для раскрывающегося списка данных. Если список невелик, вы можете легко обратиться к нему и ввести записи непосредственно в инструмент проверки данных.
Создать список допустимых записей для раскрывающегося списка, набранного на листе в один столбец или строку без пустых ячеек.
Выберите ячейки, в которых вы хотите ограничить ввод данных.
На вкладке Данные в разделе Инструменты щелкните Проверка данных или Подтвердить .
Примечание. Если команда проверки недоступна, лист может быть защищен или книга может использоваться совместно. Вы не можете изменить параметры проверки данных, если ваша книга является общей или ваш лист защищен. Дополнительные сведения о защите книги см. в статье Защита книги.
Щелкните вкладку Настройки , а затем во всплывающем меню Разрешить щелкните Список .
Щелкните поле Источник , а затем на листе выберите список допустимых записей.
Диалоговое окно сворачивается, чтобы лист было лучше видно.
Нажмите RETURN или нажмите кнопку Развернуть для восстановления диалогового окна, а затем нажмите OK .
Советы:
Вы также можете ввести значения непосредственно в поле Source , разделив их запятой.
Чтобы изменить список допустимых записей, просто измените значения в исходном списке или отредактируйте диапазон в Коробка Источник .
Вы можете указать свое собственное сообщение об ошибке для ответа на ввод неверных данных. На вкладке Data щелкните Data Validation или Validate , а затем щелкните вкладку Error Alert .
См.
такжеПрименение проверки данных к ячейкам
На новом рабочем листе введите записи, которые должны отображаться в раскрывающемся списке. В идеале у вас должны быть элементы списка в таблице Excel.
Примечания:
Зачем вам помещать данные в таблицу? Когда ваши данные находятся в таблице, при добавлении или удалении элементов из списка любые раскрывающиеся списки, основанные на этой таблице, будут автоматически обновляться. Вам не нужно делать ничего другого.
org/ListItem»>
Сейчас самое время отсортировать данные в том порядке, в котором они должны отображаться в раскрывающемся списке.
Выберите ячейку на листе, в которой вы хотите разместить раскрывающийся список.
Перейдите на вкладку Данные на ленте, затем нажмите Проверка данных .
На вкладке Параметры в поле Разрешить щелкните Список .
org/ListItem»>Если люди могут оставить ячейку пустой, установите флажок Игнорировать пустое .
Проверить Поле раскрывающегося списка в ячейке.
Перейдите на вкладку Входное сообщение .
Если вы хотите, чтобы сообщение отображалось при щелчке по ячейке, установите флажок Показать сообщение и введите в поля заголовок и сообщение (до 225 символов). Если вы не хотите, чтобы сообщение отображалось, снимите флажок.
Перейдите на вкладку Предупреждение об ошибке .
Если вы хотите, чтобы сообщение отображалось, когда кто-то вводит что-то, чего нет в вашем списке, установите флажок Показать оповещение , выберите параметр в Введите и введите заголовок и сообщение. Если вы не хотите, чтобы сообщение отображалось, снимите флажок.
Нажмите OK .
Если вы уже создали таблицу с раскрывающимися записями, щелкните поле Источник , а затем щелкните и перетащите ячейки, содержащие эти записи. Однако не включайте ячейку заголовка. Просто включите ячейки, которые должны появиться в раскрывающемся списке. Вы также можете просто ввести список записей в Поле Source , разделенное запятой, например:
Фрукты, овощи, крупы, молочные продукты, закуски
После создания раскрывающегося списка убедитесь, что он работает так, как вы хотите. Например, вы можете проверить, не нужно ли изменить ширину столбца и высоту строки, чтобы отобразить все ваши записи. Если вы решите изменить параметры в раскрывающемся списке, см. раздел Добавление или удаление элементов из раскрывающегося списка. Чтобы удалить раскрывающийся список, см. Удаление раскрывающегося списка.
Нужна дополнительная помощь?
Вы всегда можете обратиться к эксперту в техническом сообществе Excel или получить поддержку в сообществе ответов.
См. также
Применение проверки данных к ячейкам
Все функции Excel (по категориям)
Создание выпадающих списков (бесплатный предварительный просмотр)
Пользовательское выпадающее меню | Webflow University
Webflow имеет встроенный выпадающий компонент, который вы можете просто перетащить на панель навигации или в любое место на странице. Это позволяет создать выпадающее меню за считанные секунды.
Тем не менее, для тех из вас, кто хотел бы иметь больше контроля над тем, как их раскрывающееся меню построено, оформлено и работает, в этом уроке мы научим вас именно этому — как создать собственное раскрывающееся меню!
Прежде чем начать
- Вы будете использовать блоков div для создания пользовательского компонента раскрывающегося списка
- Вы будете добавлять несколько блоков ссылок внутрь оболочки раскрывающегося содержимого
- Вы также будете использовать взаимодействий для создания раскрывающегося списка работа — открывать и закрывать при срабатывании
В этом уроке
Чтобы создать собственное раскрывающееся меню, мы собираемся:
- Создать оболочку раскрывающегося списка
- Создать триггер раскрывающегося списка
- Создайте оболочку раскрывающегося списка
- Создайте взаимодействие для переключения раскрывающегося списка
Создайте оболочку раскрывающегося списка
- Перетащите первый блок div с панели добавления элементов .
- Назовите свой класс . Это будет «раскрывающаяся оболочка».
- Установите ширину значение
- Измените положение на: относительно — это позволит вам абсолютно расположить оболочку «выпадающего содержимого», которую вы создадите позже.
Подробнее: О позиционировании
Совет по дизайнуПри установке фиксированного значения ширины убедитесь, что для параметра max-width задано значение 100 % или меньше. Таким образом, вы гарантируете, что ваш элемент не выйдет за пределы ширины меньших устройств. Вы также можете сделать наоборот, установив ширину на 100% и максимальную ширину на фиксированное значение, например 500px или 1200px. Это гарантирует, что ваши текстовые строки не будут слишком длинными на больших устройствах, или ваши изображения не станут больше, чем их исходное разрешение.
Создайте триггер раскрывающегося списка
- Добавьте второй блок div внутри оболочки раскрывающегося списка — вы сделаете это в навигаторе , поскольку у оболочки раскрывающегося списка нет высоты на холсте.
- Добавьте также класс в этот блок div. Мы называем это «триггер выпадающего списка».
- Перетащите текстовый блок прямо в раскрывающийся триггер. Дважды щелкните, чтобы изменить текст.
- Добавьте стиль, например цвет фона (или изображение, или градиент) в блок div выпадающего триггера
- Дайте вашему тексту передышку, установив отступы
Вы можете поместить все, что хотите, в раскрывающийся список. Вы даже можете оставить его пустым. Например, вы можете включить значок или другой текстовый блок с надписью «закрыть». Настройте состояние наведения и измените курсор мыши триггера
Вы можете стилизовать состояние наведения триггера раскрывающегося списка, чтобы те, кто наводит курсор на триггер, чувствовали приглашение щелкнуть его.
Подробнее : Стилизация состояний
Вам может показаться неестественным, что при наведении раскрывающегося списка отображается обычный курсор мыши. Вы всегда можете выбрать свой триггерный блок div и изменить тип используемого курсора . Для ссылок, как правило, вы хотите выбрать курсор-указатель. Или вы можете выбрать любой тип курсора.
Подробнее: Курсоры
Создание оболочки выпадающего содержимого
- Перетащите новый блок div прямо в оболочку раскрывающегося списка и поместите его под триггером раскрывающегося списка.
- Создайте класс и назовите его выпадающее содержимое
- Установите для абсолютное положение — это гарантирует, что ваш выпадающий список не будет смещаться вокруг другого содержимого на странице
- Установите ширину на 100% , чтобы заполнить все доступное пространство внутри выпадающей оболочки
- Установите переполнение на скрытый — это будет полезно при создании взаимодействия позже
- Добавьте цвет фона , если хотите
Подробнее: Переполнение
Добавление содержимого
Содержимое может быть любым. Здесь мы добавим несколько блоков ссылок.
- Перетащите блок ссылок из панели добавления и поместите его в раскрывающуюся оболочку содержимого
- Добавьте класс в блок ссылок. Мы назовем это «выпадающая ссылка», вы можете назвать это как угодно.
- Измените настройку дисплея на блок , чтобы выпадающая ссылка покрывала всю ширину раскрывающегося содержимого.
- Добавьте отступ со всех четырех сторон, удерживая клавишу Shift и перетаскивая
- Перетащите текстовый блок прямо в блок ссылок
- Скопируйте ссылку блок и вставьте его еще несколько раз, чтобы создать столько ссылок, сколько вам нужно в раскрывающемся списке
- Дважды щелкните каждый текстовый блок , чтобы переименовать каждую раскрывающуюся ссылку
- Ссылка каждый блок ссылок на соответствующий ресурс
Проверить: Наше руководство по различным настройкам ссылок, которые вы можете установить для элементов ссылок
Стилизация текста ссылки
Ссылки наследуют свой стиль от тега всех ссылок . Таким образом, изменение стиля текстового блока, вложенного в блок ссылок, не приведет к переопределению стилей текста всех ссылок . Чтобы стилизовать текст внутри блока ссылок, вам нужно стилизовать типографику самого блока ссылок.
- Выберите блок ссылок (выпадающая ссылка)
- Изменить Цвет текста
- Избавьтесь от подчеркивания (текстовое декорация) на нет , чтобы избавиться от ссылки
. для переключения раскрывающегося списка
Теперь вы хотите создать взаимодействие, которое запускается для выбранного элемента, и вы хотите, чтобы оно происходило при щелчке мыши (или касании). Чтобы построить это:
- Выберите триггер раскрывающегося списка
- Создать взаимодействие: триггер элемента: щелчок мышью (касание)
Но я хочу переключать раскрывающееся меню при наведении, а не при щелчке
Вы будете использовать те же анимации, которые мы создадим ниже, только в В этот момент выберите оболочку раскрывающегося списка и вместо выбора щелчка (вкладки) выберите триггер элемента: наведение мыши . Затем выполните следующие действия.
Откройте раскрывающийся список
- Под при первом нажатии (0417 при наведении ), создайте новую анимацию . Назовите это раскрывающееся меню открытым.
- Выберите блок div раскрывающегося содержимого
- Создайте первое действие анимации : размер
- Установите высоту на ноль (0 пикселей) . Поскольку вы установили скрытое переполнение в раскрывающемся содержимом, оно просто исчезнет.
- Установите для этого параметра начальное состояние , так как вы не хотите, чтобы выпадающее содержимое отображалось при загрузке страницы
- Создайте второе анимационное действие: размер
- Установите для высоты значение auto — вы можете либо ввести слово «auto» в поле ввода и нажать Enter. Или щелкните единицу измерения справа от ввода и выберите «Авто» в меню единиц измерения.
Закройте раскрывающийся список
- Под при 2-м щелчке (или при наведении ), добавьте новую синхронизированную анимацию . Назовите этот раскрывающийся список закрытым.
- Выберите содержимое раскрывающегося списка
- Создайте действие анимации: размер
- Установите высоту обратно на 0 пикселей
выпадающее меню переключается.
Перейти к следующему
Теперь, когда вы узнали, как создать пользовательское раскрывающееся меню, вы можете расширить эту технику для создания более сложных компонентов, таких как аккордеон , который очень полезен для создания FAQ .
Ресурсы
- Создание аккордеона
- Создание интерактивной стрелки раскрывающегося списка
Попробуйте Webflow — это бесплатно
Был ли этот урок полезен? Дайте нам знать!Спасибо за отзыв! Это поможет нам улучшить наш контент.
Свяжитесь с нашим сообществом
Свяжитесь со службой поддержки
Что-то пошло не так при отправке формы.
Связаться со службой поддержки
Есть предложения по уроку? Дайте нам знать
Спасибо! Ваша заявка принята!
Ой! Что-то пошло не так при отправке формы.
Как создать выпадающее меню в WordPress (5 шагов)
Навигация по сайту — это ключ к тому, чтобы помочь вашим пользователям добраться туда, куда они хотят. Хорошо продуманное меню может иметь большое значение для улучшения пользовательского опыта (UX) и даже для снижения показателя отказов. Однако плохо сделанный может сделать прямо противоположное.
К счастью, WordPress позволяет создавать собственные меню в соответствии с потребностями вашего сайта. Вы даже можете использовать встроенные функции, чтобы добавить компактное выпадающее меню WordPress, которое экономит место, но при этом обеспечивает четкое направление для ваших посетителей.
В этом посте мы обсудим, почему важна навигация по веб-сайту и чем могут быть особенно полезны выпадающие меню. Затем мы расскажем, как создать их в WordPress, и поделимся некоторыми плагинами, которые могут помочь.
Начинаем!
Знакомство с навигацией и выпадающими меню WordPress
Несмотря на то, что они могут показаться скромными, меню навигации являются жизненно важным элементом любого веб-сайта. Они помогают пользователям быстро находить наиболее релевантные страницы для достижения их целей, а также дают представление о том, что вы можете предложить посетителям, впервые зашедшим на сайт:
Главное меню навигации на веб-сайте KinstaНаличие хорошо продуманного меню навигации является ключом к повышению конверсии. и снижение показателя отказов. Когда пользователи могут легко найти страницы, на которых находится ваш продукт, форма подписки по электронной почте или другой конвертирующий контент, вам будет проще заставить их совершить покупку или зарегистрироваться.
Кроме того, если пользователи смогут уверенно ориентироваться на вашем сайте, им не придется покидать ваши страницы из-за того, что они оказались не в том месте. Если вы поможете им сделать все правильно с первого раза, это улучшит UX и сведет к минимуму разочарование.
В WordPress меню — неотъемлемая функция. Любой сайт, созданный с помощью платформы, может отображать один или несколько из них. Тем не менее, темы WordPress также играют важную роль, когда речь идет о стилизации и размещении вашего меню или меню.
По этой причине ваше меню WordPress может принимать самые разные формы. Наиболее привычным является стандартное меню заголовка:
Пример типичного меню верхнего колонтитулаВы также можете включить дополнительное меню нижнего колонтитула внизу страницы. Оно может отображать то же содержимое, что и ваше главное меню, или предлагать немного другие параметры:
Пример меню нижнего колонтитулаДругой стиль — наложение меню, которое пользователи могут открывать и закрывать по своему желанию:
Пример меню наложенияАльтернативный вариант , вы можете рассмотреть возможность использования меню боковой панели:
Пример меню боковой панелиИли вы можете включить раскрывающееся меню, также иногда называемое «вложенным» меню:
Пример выпадающего менюЭтот тип навигации идеально подходит для многих типов сайтов. Он не будет скрывать ваш контент, как оверлейное меню, но не так навязчив, как большая панель заголовка или боковое меню.
Скрывая некоторый контент до тех пор, пока он не понадобится, вы сэкономите место на экране и в то же время предоставите пользователям простой способ перемещения.
Как создать выпадающее меню в WordPress (за 5 шагов)
Если вы решили, что выпадающее меню может хорошо подойти для вашего сайта WordPress, настроить его довольно просто. Используя собственные функции меню, доступные в WordPress, вы можете создать собственную систему навигации, которая соответствует вашим потребностям, всего за пять шагов.
Шаг 1. Создайте пункты меню
Первый шаг к созданию меню — решить, что в него включить. Начните с перехода к Внешний вид > Меню на панели управления WordPress:
Доступ к редактору меню на панели управления WordPressТо, что вы видите в редакторе меню, будет немного отличаться в зависимости от вашей темы.
Однако сейчас важно отметить первую опцию на вкладке Edit Menus . Вы должны увидеть опцию, в которой вы можете выбрать одно из существующих меню для редактирования, а также опцию создать новое меню :
Ссылка на создание нового меню в верхней части редактора меню WordPressВ этом примере мы выберем последний вариант и создадим новое меню. Это включает в себя добавление заголовка и нажатие кнопки Создать меню :
Присвоение имени и создание нового менюТеперь вы готовы начать добавлять элементы в меню WordPress. В большинстве случаев лучше сделать ваше меню как можно более простым, но в то же время предоставить пользователям достаточно информации, чтобы добраться туда, куда они хотят.
Включение слишком большого количества страниц может перегрузить посетителей и усложнить, а не упростить навигацию.
Есть несколько способов добавления пунктов меню. Первые две — это страниц и публикаций , и они работают очень похоже.
Добавление страниц в менюВ боковой панели редактора меню просто установите флажки для каждой страницы или публикации, которую вы хотите включить, и нажмите кнопку Добавить в меню :
Следующий вариант — добавить Пользовательские ссылки . Это включает в себя предоставление URL-адреса страницы, на которую вы хотите направить пользователей, а затем создание для нее короткой, но описательной метки. После этого вы можете снова нажать Добавить в меню :
Добавление пользовательской ссылки в менюНаконец, вы также можете добавить Категории страниц и записей в меню навигации. Это перенаправит пользователей на страницу архива, где они смогут просмотреть весь контент по определенной теме.
Блоги и другие сайты с большим количеством контента могут найти эту функцию особенно полезной:
Добавление категорий в меню Как и в случае с параметрами Страницы и Сообщения , просто установите флажки из категории , которые вы хотите включить, и выберите Добавить в меню
Шаг 2. Организуйте свое меню WordPress
После того, как вы добавите все пункты меню, вы увидите их в виде отдельных плиток в разделе Структура меню в редакторе:
Раздел Структура меню редактора менюИзначально пункты меню будут отображаться в том порядке, в котором вы их добавили. Однако вы можете легко изменить их организацию, перетащив их на место. Это позволит вам создать простое меню без выпадающего меню.
Есть несколько способов добавить выпадающие списки в меню WordPress.
Самый простой способ — продолжить перетаскивание, но начать вкладывать одни элементы меню в другие:
Вложение категорий на странице блогаНапример, на изображении выше мы переместили три категории сообщений, которые мы добавили в меню, в Блог , сделав их «подпунктами». Во внешнем интерфейсе это создаст выпадающее меню, которое выглядит следующим образом:
Пример выпадающего меню в WordPressЕсли вы хотите добавить выпадающее меню, которое включает все категории на вашем сайте, вы можете сделать это, добавив Пользовательская ссылка на ваше меню. Используйте «#» в качестве URL-адреса и «Категории» или что-то подобное для метки:
Создание метки «Категории» для менюЗатем вы можете добавить все свои категории в меню и вложить их в эту метку. Каждая категория будет кликабельной, но ярлык не будет:
Выпадающее меню «Категории»Используя аналогичную технику, вы также можете скрыть все пункты меню в одном выпадающем меню.
Добавьте еще одну пользовательскую ссылку, используя «#» в качестве URL-адреса и «Меню» в качестве метки. Затем вложите все остальные элементы меню в этот:
Вложение всех навигационных ссылок в одну метку менюРезультатом во внешнем интерфейсе будет выпадающее меню, включающее ключевые страницы вашего сайта.
Подпишитесь на рассылку новостей
Хотите узнать, как мы увеличили трафик более чем на 1000%?
Присоединяйтесь к более чем 20 000 других, которые получают наш еженедельный информационный бюллетень с инсайдерскими советами по WordPress!
Подпишитесь сейчас
Как вы можете видеть в элементе Категории ниже, любой контент, вложенный в подэлемент, будет отображаться в подменю:
Настоящее выпадающее меню навигации WordPressС помощью меню перетаскивания Таким образом, вы можете создать любой стиль и комбинацию выпадающих меню WordPress. Помните, однако, что слишком большое количество пунктов меню может сбить пользователей с толку.
Также лучше ограничить количество включаемых подменю, чтобы не загромождать навигацию.
Шаг 3. Добавьте изображения в меню WordPress
Если к концу шага 2 раскрывающееся меню будет выглядеть именно так, как вы себе представляли, вы можете перейти к шагу 5, чтобы опубликовать его. Однако есть дополнительные шаги, которые вы можете предпринять, если хотите улучшить свое меню с помощью настроек.
Одна из тактик, которую следует учитывать, — это включение визуальных элементов в ваши меню, чтобы предоставить дополнительные ориентиры для посетителей. Хотя описательные метки жизненно важны, иногда изображение или значок могут помочь пользователям быстрее определить, куда ведет конкретная навигационная ссылка.
Можно добавлять изображения с помощью пользовательского CSS, который мы вскоре обсудим. Тем не менее, мы рекомендуем подобрать плагин, такой как Menu Image, Icons Made Easy:
Выпадающее меню WordPress с изображениямиТаким образом, вам не нужно беспокоиться о том, чтобы возиться с каким-либо кодом, чтобы добавить визуальный интерес к вашему выпадающему меню.
Просто установите плагин и вернитесь к Внешний вид > Меню :
Раздел «Изображение меню» в редакторе менюВы увидите, что теперь есть параметры изображения для каждой страницы, которую вы включили в свое меню. Вы можете выбрать фотографию, размер и положение каждой страницы. Не забудьте сохранить изменения, когда закончите.
Шаг 4. Добавьте пользовательский CSS в раскрывающееся меню
Хотя это не рекомендуется для начинающих, пользователи среднего и продвинутого уровня могут захотеть включить собственные стили в свои раскрывающиеся меню WordPress. Однако, прежде чем вы перейдете прямо к своему CSS, вам нужно добавить класс в свое меню.
Если вы пропустите этот шаг, ваш пользовательский CSS может вызвать проблемы для любых других меню на вашем сайте. Например, вы можете непреднамеренно применить стиль к меню нижнего колонтитула, который вы предназначали только для основного раскрывающегося меню.
В редакторе меню нажмите Параметры экрана в правом верхнем углу:
Вкладка Параметры экрана в редакторе менюЗатем установите флажок Классы CSS :
Флажок Классы CSS в параметрах экрана tabЭто добавит поле Классы CSS на каждую страницу вашего меню:
Поле Классы CSS в редакторе меню применяются только к элементам в вашем меню с указанным вами классом.Теперь вы можете перейти к своей таблице стилей или настройщику и приступить к работе над собственным стилем.
Шаг 5: Опубликуйте свое меню в основных местах
После того, как ваше раскрывающееся меню WordPress будет структурировано в соответствии с вашими потребностями, и вы внесли все необходимые настройки, вы будете готовы опубликовать его на своем сайте.
Этот процесс будет немного отличаться в зависимости от вашей темы и поддерживаемых ею пунктов меню. В этом примере мы будем использовать тему Twenty Twenty.
В редакторе меню прокрутите вниз до раздела Настройки меню :
Раздел Настройки меню в редактореВы можете установить первый флажок, если хотите, чтобы новые страницы автоматически добавлялись в ваше меню. Если вы только начинаете работу со своим сайтом и еще не добавили все свои ключевые страницы, это может быть полезно. Однако будьте осторожны, чтобы случайно не добавить слишком много пунктов в свое меню.
Под этой опцией вы увидите список флажков, отмечающих различные области вашего сайта, где вы можете отображать свое меню.
Тема Twenty Twenty включает в себя различные области меню: Горизонтальное меню рабочего стола , Расширенное меню рабочего стола , Мобильное меню , Меню нижнего колонтитула , Социальное меню .
В этом случае созданное нами меню лучше всего подходит для расположения Горизонтальное меню рабочего стола , которое находится в заголовке сайта:
Горизонтальное меню рабочего стола для темы Twenty TwentyВы также можете рассмотреть возможность перехода к Управление местоположениями в области Меню на панели инструментов. Здесь вы можете увидеть все местоположения меню, которые поддерживаются вашей темой, а также то, какое меню вы назначили каждому из них:
Вкладка «Управление местоположениями»При размещении ваших меню может быть полезно посмотреть, как они будут выглядеть. как на фронтенде.
Параметр «Управление с предварительным просмотром в реальном времени»Нажмите кнопку «Управление с предварительным просмотром в реальном времени» , чтобы увидеть, как ваше меню будет отображаться в выбранном вами месте с помощью настройщика WordPress:
Предварительный просмотр меню WordPress в настройщикеЗатем вы можете опубликовать свое меню или меню непосредственно из настройщика. Если вам когда-нибудь понадобится добавить или удалить элементы из раскрывающегося меню, вы можете просто вернуться в редактор меню и внести необходимые изменения.
Плагины WordPress для улучшения выпадающих меню
Хотя вы можете создавать полнофункциональные навигационные меню WordPress без каких-либо дополнительных инструментов, иногда бывает полезно расширить функциональность вашего меню. Если это относится к вашему сайту, вы можете изучить некоторые популярные плагины меню WordPress.
Вложенные страницы – это эффективный способ для блогов с большим объемом контента создавать раскрывающиеся меню. Хотя он в основном используется для организации сообщений и страниц, этот плагин также автоматически генерирует меню, отражающее структуру вашего контента:
Плагин WordPress для вложенных страницХотя не обязательно включать большое количество элементов в ваши меню, иногда это неизбежно.
Если это относится к вашему сайту, Max Mega Menu может помочь вам объединить существующие меню WordPress в одно «мегаменю»:
Плагин Max Mega Menu для WordPressВ связи с ростом мобильного просмотра, ключевое значение имеет обеспечение того, чтобы ваши меню по-прежнему читались на мобильных устройствах.
WP Mobile Menu сочетается с любой адаптивной темой, чтобы помочь вам создать систему навигации для мобильных пользователей вашего сайта:
WP Mobile Menus Плагин WordPressНаконец, как мы уже обсуждали, могут быть ситуации, пунктов меню недостаточно. В этих ситуациях вы можете захотеть изучить использование изображения меню, значков, сделанных легко, как мы описали в шаге 3 выше.
Вы можете использовать любой из этих плагинов, чтобы улучшить текущую систему навигации и сделать выпадающее меню WordPress более эффективным. Просто помните, что иногда, когда дело доходит до навигации, проще, чем лучше . Добавляйте дополнительные функции только в том случае, если это улучшит ваш UX и не загромождает ваш сайт.
Устранение неполадок с раскрывающимся меню WordPress
Если вы настроили свое меню, как описано выше, но функция раскрывающегося списка не работает, существует несколько возможных причин.
Хотя мы не можем описать их все здесь, мы можем помочь вам определить причину вашей проблемы, чтобы вы могли найти правильное решение.
Часто неисправное меню является результатом конфликтующего кода между вашим пользовательским меню и вашей темой. Первое, что вы должны сделать, если ваше меню не работает, это переключиться на тему по умолчанию, такую как Twenty Twenty. Если ваше меню снова начнет работать, вы узнаете, что проблема связана с вашей темой. Затем вы можете связаться с разработчиком вашей темы, чтобы найти решение.
Несколько других возможных причин:
- Ошибочный код: Дважды проверьте правильность добавленного вами пользовательского CSS и использование классов CSS, как описано в шаге 4.
- Несовместимость плагинов: Попробуйте отключить все установленные вами плагины, связанные с меню, чтобы посмотреть, решит ли это проблему.
- Устаревший jQuery: Обновите jQuery до последней версии и попробуйте снова открыть раскрывающееся меню.
Однако, как мы упоминали ранее, потенциальные причины вашего неисправного меню многочисленны. Если ни одно из вышеперечисленных решений не работает, мы рекомендуем посетить форумы поддержки WordPress, обратиться к нашей экспертной группе поддержки Kinsta WordPress или нанять разработчика WordPress, чтобы исправить это для вас.
Меню навигации являются ключом к UX вашего сайта. Но что, если у вас есть много пунктов меню, которые вам нужно показать? Выпадающее меню — это название игры! Посмотрите, как легко его создать с помощью этого руководства 📑🗃️Нажмите, чтобы твитнутьРезюме
Хотя это может показаться незначительным, но навигация вашего сайта WordPress может сделать или разрушить его успех. Использование выпадающих меню может сэкономить место на экранах пользователей, а также позволить им легко перемещаться по вашему сайту и повышать конверсию.
Экономьте время, затраты и повышайте производительность сайта с помощью:
- Мгновенная помощь от экспертов по хостингу WordPress, круглосуточно и без выходных.
- Интеграция с Cloudflare Enterprise.