Адаптивное горизонтальное меню: Адаптивное горизонтальное меню, часть 1 — Флексбокс. Знакомство — HTML Academy — Вебджем.рф

Содержание

Универсальное адаптивное меню для сайта

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

Ранее, я уже публиковал статью, в которой поделился двумя способами создания адаптивного меню. А сегодня рассмотрим ещё один способ.

Обычный вид меню для мониторов компьютера и больших экранов будет выглядеть так:

Вид меню на компьютере

На мобильных устройствах, меню в раскрытом виде будет отображаться так:

Вид меню на смартфоне

Содержание

Принцип построения универсального адаптивного меню.
Процесс создания адаптивного меню.
Шаг 1. Создание html структуры меню.
Шаг 2. Подключение стилей css.
Шаг 3. Подключение библиотеки jQuery и скрипта обработчика.

Принцип построения универсального адаптивного меню.

Итак, для того чтобы создать такое меню вам потребуется:

Создать html каркас.
Применить стили css.
Подключить скрипт обработчик.

Разумеется, у вас на сайте есть меню, и вы его хотите сделать адаптивным. У вас есть два пути, первый – адаптировать существующее меню и второй – сделать новое адаптивное меню.

На большинстве сайтов, которые сделаны на CMS, проще создать новое меню, чем переделать старое. Так как само построение меню реализовано через php и запросы к базе данных, а стили css разбросаны среди многих других стилей. В общем, весь этот процесс переделки меню довольно трудоёмкое и кропотливое занятие.

На самописных сайтах работы с переделкой будет меньше, но все, же придётся повозиться.

В любом случае вы можете использовать стили и скрипт из этой статьи и адаптировать своё меню.

А для того чтобы создать новое адаптивное меню вам потребуется совсем немного времени.

Изначально создаётся меню на основе тегов ul и li, затем добавляются стили css и подключается скрипт. Такое меню загружается и отзывается быстрей, так как работает без запросов к базе данных.

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

Процесс создания адаптивного меню.

Шаг 1. Создание html структуры меню.

Первым делом нужно определиться с местом, где будет отображаться меню. Для этого нужно проанализировать файлы вашего шаблона. Как правило, меню выводится в шапке или сайтбаре. За эти основные блоки шаблона отвечают файлы header.php и sidebar.php. Именно в них и нужно искать место для вставки меню или замены старого. Для каждого шаблона – это индивидуальный процесс.

После того как вы определитесь с местом вставки нового меню, необходимо в это место поместить вот этот html каркас и изменить пункты меню и ссылки на свои.

<nav role="navigation">
 <div>
 <div>
 <div>
 <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 <span></span>
 <span></span>
 <span></span>
 </button>
 <a href="https://1zaicev.ru/">Бизнес в Сети</a>
 </div>
 <div>
 <ul>
 <li>
 <a href="#">
 Главная
 </a>
 </li> 
 <li>
 <a href="#" data-toggle="dropdown">
 Рубрики
 <span></span>
 </a>
 <ul role="menu">
 <li>
 <a href="#" target="_self">
 Рубрика1
 </a>
 </li>
 <li>
 <a href="#" target="_self">
 Рубрика2
 </a>
 </li>
 <li>
 <a href="#" target="_self">
 Рубрика3
 </a>
 </li>
 </ul>
 </li>
 <li>
 <a href="#">
 Автор
 </a>
 </li>
 <li>
 <a href="#">
 Блог
 </a>
 </li>
 <li>
 <a href="#">
 Статьи
 </a>
 </li>
 <li>
 <a href="#">
 Вход
 </a>
 </li>
 <li>
 <a href="#">
 Регистрация
 </a>
 </li>
 </ul>
 </div>
 </div>
 </div>
</nav>

Примечание: Оранжевым цветом я обозначил элементы, которые вы редактируете под ваш сайт. Пункты меню можно добавлять и удалять. Как это делать я показываю в видеоуроке. За стрелку раскрывающегося меню отвечает вот этот код:
<span></span>. Если раскрывающихся пунктов меню у вас несколько используйте этот код.

Шаг 2. Подключение стилей css.

Для того чтобы упростить процесс и не путаться с медиазапросами, подключать стили будем в виде отдельных файлов. Файлы стилей подключаются в файле header.php между тегами <head> … </head>. По крайней мере, это так в большинстве современных шаблонах.

Ваша задача найти, где подключается основной файл стилей style.css и ниже него подключить стили адаптивного меню.

Подключение стилей css

Но, для начала вы должны скачать файлы со стилями и скриптом здесь. После этого скопировать файлы bootstrap.css и menu.css в папку с вашей темой. А после в файле header.php, между тегами ХЕД добавить вот эти строки подключения:

<link rel="stylesheet" type="text/css" href="http://Ваш домен/wp-content/themes/Ваша тема/bootstrap. css" />

<link rel="stylesheet" type="text/css" href="http://Ваш домен/wp-content/themes/Ваша тема/menu.css" />

Шаг 3. Подключение библиотеки jQuery и скрипта обработчика.

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

И хотя, библиотека jQuery у вас скорей всего уже подключена, вы это увидите между тегами ХЕД в файле header.php, я на всякий случай покажу, как её подключить. А заодно и скрипт обработчик подключим, который вы скачали в архиве.

В том же файле header.php, перед закрытием тега </head> вставляете вот эти строки кода:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" src="http://Ваш домен/wp-content/themes/Ваша тема/bootstrap.min.js"></script>

Примечание: файл bootstrap. min.js, вместе со стилями тоже нужно скопировать в папку темы вашего сайта. Возможно, в вашей теме есть папка JS, тогда скопируйте этот файл туда и укажите это в пути к файлу.

Итак, всё готово, можно проверять результат. Медиазапросы построены на точке 768 px, как только экран браузера станет меньше этой величины, меню адаптируется. Точку медиазапроса вы можете поменять в файлах стилей.

А теперь в качестве наглядного примера, как работает адаптивное меню, и как его установить на сайт предлагаю посмотреть видеоурок.

На этом у меня сегодня всё, я желаю вам успехов и до встречи в новых статьях и видеоуроках!

С уважением, Максим Зайцев.

Адаптивное меню для сайта

Всем привет!

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

Смотреть примерСкачать

Похожие статьи на эту тему:

Красивый выпадающий список для сайта — делаем выпадающий список
Пользовательские стили для формы на чистом CSS без Javascript

Добавляем HTML

HTML КОД

<header>
    <nav>
        <ul>
            <li><a href="#0">О нас</a></li>
            <li><a href="#0">Проекты</a></li>
            <li><a href="#0">Блог</a></li>
            <li><a href="#0">Контакты</a></li>
            <li>
                <a href="#0"><span>Категории</span></a>
                <ul>
                    <li><a href="#0">Меню</a></li>
                    <li><a href="#0">Категория 1</a></li>
                    <li><a href="#0">Категория 2</a></li>
                    <li><a href="#0">Категория 3</a></li>
                    <li><a href="#0">Категория 4</a></li>
                    <li><a href="#0">Категория 5</a></li>
                    <li><a href="#0">Placeholder</a></li>
                </ul>
            </li>
        </ul> <!-- .  cd-main-nav -->
    </nav> <!-- .cd-main-nav-wrapper -->
    <a href="#0">Menu<span></span></a>
</header>

Вся навигации состоит из двух неупорядоченных списков. Названия разделов и категорий меню вы, соответственно, меняете на свои.

HTML КОД

1	<a href="#0">Menu<span></span></a>

Последняя строка отвечает за навигацию при маленьком разрешении экрана.

Добавляем CSS

Архив с примером содержит файл style.css. В нем в разделе «Стили для меню» находятся все стили оформления меню в том числе и медиазапросы. Вы можете скачать весь файл, или добавить стили только для самого меню. Если вы, скачали в свой проект весь style.css, то не забудьте подключить его в свой html файл между тегами <head>.

1	<link rel="stylesheet" href="css/style. css">

Добавляем JQuery

Из архива копируем папку js. И подключаем скрипты в наш html документ.

1
2
3

<script src="js/modernizr.js"></script>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script>

Если в вашем проекте уже есть modernizr.js и jquery-2.1.1.js, то второй раз подключать их не нужно. Меню готово!

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

Всем удачи!

Источник: Оригинал

С Уважением, Михалев Валентин

40 красивых и эффективных адаптивных навигационных меню

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

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

В этом посте мы покажем 40 различных навигационных меню для вашего вдохновения. Некоторые из них креативны и необычны, а другие просты, но эффективны. Это продемонстрирует множество различных стилей и подходов, которые можно с пользой использовать в вашей собственной работе по дизайну и разработке. Мы будем демонстрировать веб-сайты так, как они выглядят на рабочем столе, но лучший способ познакомиться с этими навигационными меню — щелкнуть мышью и посмотреть, как они работают в браузере. Отрегулируйте ширину браузера и посмотрите, как это повлияет на меню.

НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: более 50 миллионов надстроек и элементов дизайна

Найдите несколько идей, которые можно использовать в своих проектах, просмотрев список ниже.

Mostly Serious

Mostly Serious использует типичный значок гамбургера (три горизонтальные линии), чтобы указать на наличие меню. При нажатии на значок открывается меню, содержащее основные ссылки.

Magnet Co

Magnet Co также использует гамбургер (с двумя линиями вместо трех). Когда пользователи щелкают значок, открывается полноэкранное меню навигации на темном фоне.

Сэм Годдард

Разработчик Тот же Годдард отображает проекты своего портфолио в уникальном меню. Каждый проект указан крупным шрифтом вместе с годом проекта. Когда вы наводите указатель мыши на одну из ссылок, в фоновом режиме также появляется уменьшенное изображение.

Строительная компания Мартин

На веб-сайте Строительной компании Мартин есть значок гамбургера в правой части экрана. При нажатии на значок открывается меню со ссылками на основные страницы сайта.

Алиенист

Меню Алиенист уникально и привлекательно. При нажатии на значок меню открывается полноэкранное меню на фоне чтения.

Pipe

Навигационное меню Pipe довольно простое, но эффективное. При наведении курсора на ссылки открывается базовый раскрывающийся список с несколькими ссылками второго уровня. Главный уровень меню также включает кнопку «Начать». Помещение этой ссылки в виде кнопки действительно выделяет ее.

Carnival Sounds

Carnival Studios использует интересный подход, отображая ссылки вертикально и сбоку. Выпадающих списков нет, но это визуальный эффект, который обрисовывает в общих чертах каждую ссылку, когда вы наводите на нее курсор.

Canal Street Market

Canal Street Market использует вкладки для организации и отображения контента. Доступ к разноцветным вкладкам можно получить с правой стороны страницы.

Parker

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

Rino & Pelle

Модный сайт Rino & Pelle использует значок гамбургера в главном меню, которое по сути является вторичным меню, поскольку основные ссылки перечислены в заголовке. Щелчок по значку открывает полноэкранное меню, которое выдвигается из верхней части страницы.

Free Markets Destroy

Free Markets Destroy использует значок гамбургера и уникальный дизайн меню навигации. Ссылки имеют 3D-эффекты, разные цвета при наведении мыши и большой указатель пальца.

Sercopointweb

На веб-сайте Sercopointweb используется значок гамбургера, который открывает полноэкранное меню с двухцветным фоном.

Stripe

Меню заголовка Stripe содержит раскрывающиеся списки. В отличие от некоторых раскрывающихся меню, каждое раскрывающееся меню отображает доступные ссылки немного по-разному.

Good & Proper Tea

Навигационное меню Good & Proper Tea довольно простое, хотя оно хорошо оформлено и соответствует теме и стилю сайта. Ссылка «Магазин» открывает раскрывающийся список с категориями товаров в магазине, что позволяет пользователям легко найти то, что они ищут.

Pier 70

Доступ к меню навигации Pier 70 осуществляется нажатием кнопки. Открывается полноэкранный дисплей с ярким полосатым фоном. Ссылки выделены крупным жирным шрифтом.

Anne Klein

На веб-сайте электронной коммерции Anne Klein используется мегаменю со ссылками на подкатегории и изображения в раскрывающихся списках.

Пленки для песочницы

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

Группа BORN

Меню группы BORN доступно пользователям через значок в верхней правой части экрана. Он открывает полноэкранное меню с двумя столбцами ссылок.

UPQODE

Функциональность UPQODE очень похожа. Меню доступно в правом верхнем углу и отображается в двух столбцах, но левый цвет показывает их контактную информацию.

Brews & Grooves

Веб-сайт Brews and Grooves отличается крупным жирным шрифтом, и в меню навигации используется аналогичный подход. Щелчок по значку в заголовке открывает полноэкранное меню с несколькими ссылками на важный контент на сайте

Young and Hyperactive

Веб-сайты-портфолио часто являются отличным источником вдохновения для дизайнеров, и сайт Young and Hyperactive является хорошим примером. Значок/кнопка в заголовке открывает полноэкранное меню, которое выдвигается сверху. Есть два столбца ссылок, а также маленькие значки социальных сетей.

Это Эмбер

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

Bien

Дизайн веб-сайта Bien включает меню навигации в левой части экрана с текстом, идущим вертикально вверх по экрану.

The Stylist Group

Меню в The Stylist Group достаточно стандартное, за исключением того, что по умолчанию оно скрыто. При нажатии на ссылку «меню» открывается панель навигации, которая выдвигается из кнопки.

Third and Grove

Third and Grove использует минималистичный дизайн веб-сайта с простым макетом. Меню открывается при нажатии на значок гамбургера. Он использует довольно простой двухколоночный макет для пунктов полноэкранного меню с партнерами, отображаемыми в списке ссылок в третьем столбце.

Plug & Play

На веб-сайте дизайнерского агентства Plug & Play используется значок гамбургера, который открывает меню, которое перемещается с использованием двух разных столбцов или разделов.

Rox

Поначалу навигация на веб-сайте Rox выглядит довольно стандартно, но становится интереснее, когда пользователи наводят курсор на ссылки. На заднем плане появляется желтый кружок, а текст ссылок меняется. Например, ссылка «работа» при наведении становится «наши проекты».

Spline

Красочный веб-сайт Spline использует «+» в заголовке, который открывает меню. Это не совсем полноэкранное меню, но оно выдвигается сверху вниз и занимает большую часть экрана.

Web Effectual

Web Effectual содержит простой значок гамбургера, который открывает меню. Меню полноэкранное, всего три ссылки и сплошной фон. При наведении ссылки подчеркиваются цветом.

Сигара Blackbird Co

Значок меню Blackbird Cigar co находится в середине заголовка. Он открывает полноэкранный дисплей, который скользит справа. Некоторые из основных пунктов меню также включают в себя вторичное меню, которое открывается при наведении.

Tambien

Нажмите на значок в заголовке Tambien, чтобы открыть навигационные ссылки на главные страницы сайта. Он скользит слева.

Le Petit Salon

Le Petit Salon имеет один из самых уникальных и интересных дизайнов, представленных в этой статье. Когда вы нажимаете на значок меню, он открывает четыре ссылки, которые прокручиваются по экрану жирным шрифтом и повторяются.

Unique Brands

Если щелкнуть значок в шапке сайта Unique Brands, откроется полноэкранное меню с пятью ссылками на белом фоне. Фон скользит слева.

EDF

EDF использует главное меню навигации с тремя ссылками и значком гамбургера, который открывает более широкий выбор ссылок.

An Event Apart

Меню на веб-сайте An Event Apart довольно простое, но привлекательное и хорошо оформленное (как и следовало ожидать). Текст имеет тонкое подчеркивание, которое становится жирнее при наведении курсора, а верхняя граница также появляется при наведении.

Cognito

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

Omnisend

Omnisend использует мегаменю с несколькими опциями, которые открываются по некоторым ссылкам верхнего уровня.

Большеглазый олень

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

Mindset

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

Крайняя воронка

Крайняя воронка имеет довольно стандартное меню, но ссылка «как это работает» включает раскрывающийся список с несколькими красочными значками. С правой стороны вы найдете кнопки «Войти» и «Попробовать бесплатно».

Что такое меню на веб-сайте?

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

Почему важна навигация на веб-сайте?

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

Что такое навигационная структура веб-сайта?

Структура относится к тому, как страницы связаны друг с другом и к иерархическому расположению (какие страницы соединяются друг с другом и как) сайта.

Доступны ли шаблоны дизайна меню веб-сайта?

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

Основной компонент адаптивных форм — горизонтальные вкладки

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

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

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

Общие причины использования горизонтальных вкладок в адаптивной форме:

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

Версия и совместимость

Горизонтальные вкладки Adaptive Forms Core Component был выпущен в феврале 2023 года как часть Core Components 2.0.4. Вот таблица, показывающая все поддерживаемые версии, совместимость с AEM и ссылки на соответствующую документацию:


Версия компонента	AEM как облачная служба
—	—
v1	Совместим с версии 2. 0.4 и выше

Информацию о версиях и выпусках основных компонентов см. в документе Версии основных компонентов.

Технические подробности

Получите самую свежую информацию о горизонтальных вкладках Adaptive Forms Core Component в технической документации на [GitHub](https://github.com/adobe/aem-core-forms-components/tree/master/ui .af.apps/src/main/content/jcr_root/apps/core/fd/components/form/pageHorizontal tabs/v1/pageHorizontal tabs). Чтобы узнать больше о разработке основных компонентов, ознакомьтесь с документацией для разработчиков основных компонентов.

Диалоговое окно настройки

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

Основная вкладка

Имя — Вы можете легко идентифицировать компонент формы по его уникальному имени как в форме, так и в редакторе правил, но имя не должно содержать пробелов или специальных символов.
Заголовок — С его заголовком вы можете легко идентифицировать компонент в форме, и по умолчанию заголовок отображается поверх компонента. Если вы не добавляете заголовок, вместо текста заголовка отображается имя компонента.
Скрыть заголовок — выберите параметр, чтобы скрыть заголовок компонента.
Обернуть данные в объект
— выберите «Обернуть данные в объект», чтобы поместить данные поля из мастера в объект JSON. Если этот параметр не выбран, JSON для отправки данных имеет плоскую структуру для полей мастера.
Макет . У вашего мастера может быть либо фиксированный макет (Простой), либо гибкий макет (Адаптивная сетка). Простая компоновка удерживает все на месте, а адаптивная сетка позволяет регулировать положение компонентов в соответствии с вашими потребностями. Например, используйте адаптивную сетку, чтобы выровнять «Имя», «Отчество» и «Фамилия» в форме в одной строке.
Ссылка на привязку — Ссылка на привязку — это ссылка на элемент данных, который хранится во внешнем источнике данных и используется в форме. Ссылка на привязку позволяет динамически привязывать данные к полям формы, чтобы форма могла отображать самые последние данные из источника данных. Например, ссылку на привязку можно использовать для отображения имени и адреса клиента в форме на основе идентификатора клиента, введенного в форму. Ссылку на привязку также можно использовать для обновления источника данных данными, введенными в форму. Таким образом, AEM Forms позволяет создавать формы, которые взаимодействуют с внешними источниками данных, обеспечивая беспроблемный пользовательский интерфейс для сбора данных и управления ими.
Скрыть компонент — выберите параметр, чтобы скрыть компонент из формы. Компонент остается доступным для других целей, таких как использование его для расчетов в Редакторе правил. Это полезно, когда вам нужно хранить информацию, которую не нужно просматривать или изменять непосредственно пользователю.
Отключить компонент — выберите параметр для отключения компонента. Отключенный компонент не активен и не может быть изменен конечным пользователем. Пользователь может видеть значение поля, но не может его изменить. Компонент остается доступным для других целей, таких как использование его для расчетов в Редакторе правил.

Вкладка «Элементы»

Кнопка Добавить позволяет выбрать компонент для добавления в качестве панели из окна выбора компонентов. После добавления компонента вы можете увидеть следующие параметры:

Значок — Значок идентифицирует компонент панели в списке. Вы можете навести указатель мыши на значок, чтобы увидеть полное имя компонента в виде всплывающей подсказки.
Описание — Описание, используемое в качестве текста панели. По умолчанию имя компонента, выбранного для панели.
Удалить — коснитесь или щелкните, чтобы удалить панель из компонента «аккордеон».
Изменить порядок — Коснитесь или щелкните и перетащите, чтобы изменить порядок панелей.

Вкладка «Содержимое справки»

Краткое описание — Краткое описание представляет собой краткое текстовое пояснение, предоставляющее дополнительную информацию или уточнение о назначении определенного поля формы. Это помогает пользователю понять, какой тип данных следует вводить в поле, и может предоставить рекомендации или примеры, которые помогут убедиться, что введенная информация действительна и соответствует желаемым критериям. По умолчанию краткие описания остаются скрытыми. Включить Всегда показывать краткое описание Параметр, чтобы отображать его под компонентом.
Всегда показывать краткое описание — включите параметр, чтобы отображать краткое описание под компонентом.
Текст справки — Текст справки относится к дополнительной информации или указаниям, которые предоставляются пользователю, чтобы помочь ему правильно заполнить поле формы. Он появляется, когда пользователь щелкает значок справки (i), расположенный рядом с компонентом. Текст справки предоставляет более подробную информацию, чем метка поля формы или текст-заполнитель, и предназначен для того, чтобы помочь пользователю понять требования или ограничения поля. Он также может предложить предложения или примеры, чтобы сделать заполнение формы более простым и точным.

Вкладка «Специальные возможности»

Текст для программ чтения с экрана — Текст для программ чтения с экрана относится к дополнительному тексту, специально предназначенному для чтения вспомогательными технологиями, такими как программы чтения с экрана, используемые людьми с нарушениями зрения. Этот текст содержит звуковое описание назначения поля формы и может включать информацию о заголовке поля, описании, имени и любых соответствующих сообщениях (Пользовательский текст). Текст для чтения с экрана помогает обеспечить доступность формы для всех пользователей, включая пользователей с нарушениями зрения, и дает им полное представление о поле формы и его требованиях.
Роль HTML для средства чтения с экрана для объявления — Роль HTML — это атрибут, используемый для указания назначения элемента HTML вспомогательным технологиям, таким как программы чтения с экрана. Атрибут роли используется для предоставления дополнительного контекста и семантического значения элементу, упрощая для программ чтения с экрана интерпретацию и объявление содержимого пользователю. Например, в AEM Forms метка поля формы может иметь роль «метки», а его поле ввода может иметь роль «текстового поля». Это помогает программе чтения с экрана понять взаимосвязь между меткой и полем ввода и правильно объявить их пользователю.

Диалоговое окно «Дизайн» позволяет создателям шаблонов управлять тем, как элементы отображаются по умолчанию. Для компонента Adaptive Forms Accordion можно установить следующее:

Основные компоненты, которые создатель формы может добавить в аккордеон в редакторе Adaptive Forms
Простые имена для стилей (классов CSS), которые можно применить в диалоге свойств компонента аккордеон в редакторе адаптивных форм.

Это помогает сделать процесс создания и настройки форм более простым и эффективным.

Вкладка «Разрешенные компоненты»

Вкладка «Разрешенные компоненты» позволяет редактору шаблонов устанавливать компоненты, которые можно добавлять в качестве элементов на панели в компоненте «Горизонтальные вкладки» в редакторе адаптивных форм.

Вкладка «Стили»

Диалоговое окно «Дизайн» используется для определения и управления стилями CSS для компонента. Вкладки Adaptive Forms Horizontal Core Component поддерживают систему стилей AEM.

Классы CSS по умолчанию : Вы можете указать класс CSS по умолчанию для базовых вкладок Adaptive Forms Horizontal.

Адаптивное горизонтальное меню: Адаптивное горизонтальное меню, часть 1 — Флексбокс. Знакомство — HTML Academy