Меню аккордеон css: Аккордеон меню | WebReference

4 способа создать удивительные аккордеоны только для CSS

Перейти к содержанию

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

Большинство аккордеонов полагаются на JavaScript, в основном на jQuery, но, поскольку использование передовых методов CSS3 стало широко распространенным, мы также можем найти хорошие примеры, которые используют только HTML и CSS, которые делают их доступными в средах с отключенным JavaScript.

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

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

При создании вкладок только для CSS обычно есть два основных подхода, каждый из которых имеет два варианта использования. Первый подход использует скрытые элементы формы, а второй использует псевдоселекторы CSS.

1. Метод радио-кнопки

Метод Radio Button добавляет скрытый радиовход и соответствующий ярлык для каждой вкладки аккордеона. Логика проста: когда пользователь выбирает вкладку, он в основном проверяет переключатель, который принадлежит этой вкладке, точно так же, как при заполнении формы. Когда они нажимают на следующую вкладку в аккордеоне, они выбирают следующий переключатель и т. Д.

В этом методе одновременно может быть открыта только одна вкладка. Логика HTML выглядит чем-то
  нравится:

Название вкладки 1

Заголовок содержимого (здесь не используйте тег h2)

Некоторый контент ….

р>

Вам нужно добавить отдельную пару радио-меток для каждой вкладки в аккордеоне. Один только HTML не даст желаемого поведения, вам также нужно добавить соответствующие CSS-правила, давайте посмотрим, как этого добиться.
Вертикальные вкладки с фиксированной высотой
В этом решении (см. Скриншот ниже) разработчик скрыл переключатель с помощью дисплея: нет; Правило, затем он дал относительную позицию для метки метки, которая содержит заголовок каждой вкладки, и абсолютную позицию для соответствующей метки: после псевдоэлемента.

Последний содержит маркер, помеченный зеленым знаком +, который открывает вкладки. Закрытые вкладки также используют ручку, отмеченную зелеными знаками «-». В CSS закрытые вкладки выбираются с помощью элемент + элемент селектор.

Вам также нужно придать содержимому открытой вкладки фиксированную высоту. Для этого выберите тело открытой вкладки (помеченное классом tab-content в HTML выше) с помощью element1 ~ element2 CSS селектор.

Основная логика CSS здесь заключается в следующем:

вход[type=radio] {
дисплей: нет;
}
метка {
положение: относительное;
дисплей: блок;
}
ярлык: после {
содержание: «+»;
положение: абсолютное;
справа: 1em;
}
вход: проверено + метка: после {
содержание: «-«;
}
вход: проверено ~ . tab-content {
высота: 150 пикселей;
}

Вы можете взглянуть на полный CSS здесь на Codepen, CSS изначально написан на Sass, но если вы нажмете кнопку «Просмотр скомпилированного», вы увидите скомпилированный файл CSS.
ИЗОБРАЖЕНИЕ: Codepen от Jon YablonskiИзображение Аккордеон с Радио Кнопками
Этот красивый аккордеон изображения использует тот же метод переключателя, но вместо меток разработчик использовал HTML-тег figcaption, чтобы реализовать поведение аккордеона.

CSS несколько отличается, в основном потому, что в этом случае вкладки располагаются не вертикально, а горизонтально. Разработчик использовал CSS + селектор element + element (который использовался в предыдущем случае для выбора переключателей), чтобы гарантировать, что края покрытых изображений все еще остаются
  видимый.
ИЗОБРАЖЕНИЕ: Tympanus.netПрочитайте подробное руководство о том, как создать этот элегантный аккордеон только для CSS.

2. Метод флажка

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

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

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

Название вкладки 1

Заголовок содержимого (здесь не используйте тег h2)

Некоторый контент ….

р>

</div>
<!-- Other Tabs with The Same Structure -->

Флажок фиксированной высоты Аккордеон

Если вам нужны вкладки с фиксированной высотой, логика CSS почти такая же, как и в случае с переключателями, просто тип ввода изменился с переключателя на переключатель. В этом Кодовая ручка Вы можете взглянуть на код.
ИЗОБРАЖЕНИЕ: Codepen от Jon YablonskiФлажок Высота Флажок Аккордеон
Когда одновременно открыто несколько вкладок, отображение вкладок с фиксированной высотой может негативно повлиять на пользовательский опыт, поскольку высота гармошки может значительно возрасти. Это можно улучшить, если вы измените фиксированную высоту на высоту жидкости; это означает, что высота открытых вкладок увеличивается или уменьшается в соответствии с размером содержимого, которое они содержат.

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

вход: проверено ~ .tab-content {
максимальная высота 50em;
}

Если вы хотите лучше понять, как работает этот метод, вы можете взглянуть на это Codepen,
ИЗОБРАЖЕНИЕ: Codepen от Jon Yablonski

3. Целевой метод

: цель является одним из псевдо-селекторов CSS3. С его помощью вы можете связать элемент HTML с тегом привязки следующим образом:

Название вкладки

Содержание вкладки

Когда пользователь нажимает на заголовок вкладки, весь раздел открывается благодаря псевдо-селектору: target, и URL-адрес также будет изменен на следующий формат: www.some-url.com/#tab-1,

Открытая вкладка может быть стилизована в CSS с помощью правила section: target {…}. Здесь, на hongkiat, есть отличное руководство о том, как создавать красивые аккордеоны только для CSS с помощью метода: target как в вертикальной, так и в горизонтальной компоновке.
Основным недостатком метода: target является то, что он меняет URL, когда пользователь нажимает на вкладки. Это влияет на историю браузера, и кнопка назад браузера не приведет пользователя к предыдущей странице, но к предыдущему состоянию аккордеона.

4. Метод парения

Этот последний недостаток можно преодолеть, если использовать псевдоселектор: hover CSS вместо: target, но в этом случае вкладки будут реагировать не на щелчок, а на событие наведения мыши. Хитрость заключается в том, что вам нужно либо скрыть невыделенные элементы, либо уменьшить их ширину или высоту — в зависимости от расположения вкладок

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

Следующие 3 аккордеона только для CSS были созданы методом: hover, нажмите на ссылки под скриншотами, чтобы взглянуть на код.
Горизонтальное изображение аккордеона
ИЗОБРАЖЕНИЕ: CodePen от vavikПерекошенный Аккордеон
ИЗОБРАЖЕНИЕ: Codepen от Gerald De LeonАктивированный при наведении аккордеон с состоянием по умолчанию
ИЗОБРАЖЕНИЕ: Codepen by Cory

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

Похожие записи

Страница не найдена (ошибка 404)

PHP

HTML/CSS

JS/jQuery

htaccess

Bootstrap

Программы

Разное

Справочники

Cоздание меню аккордеона на Bootstrap3

Cоздание меню аккордеона на Bootstrap3

Здравствуйте! Сегодня как я и обещал в прошлой статье я расскажу как в Bootstrap можно сделать блоки типа аккордеон. Это такие блоки которые могут показывать одну секцию открытой при этом скрывая все остальные за что и получили свое название аккордеон как одноименный музыкальный инструмент.

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

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

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

Пример

Для примера я создал кнопку и скрытый текстовый блок. По клику на кнопке блок будет либо показан, либо свернут.

Настройка

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

Чтобы “указать” управляющему элементу, какой блок нужно сворачивать, есть два метода:

1. атрибут href для ссылки,
2. кнопка или любой другой объект с атрибутом data-target.

В обоих случаях этот элемент должен иметь атрибут the data-toggle=»collapse». Второму блоку, который должен быть скрыт, нужно назначить класс .collapse.

Настройка через data-* атрибуты

Добавьте атрибуты data-toggle=»collapse» и data-target управляющему элементу. Атрибут data-target должен содержать CSS-селектор элемента, видимость которого нужно менять. Также управляемому элементу нужно назначить класс .collapse.

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

Настройка через javaScript

Если data-* атрибуты вам не подходят, можно обойтись без них, подключив коллапс при помощи js:

$('.collapse').collapse()

Автоскрытие остальных блоков (accordion)

Чтобы автоматически сворачивать все остальные элементы при показе нового, передайте параметр data-parent=»#selector», где #selector может быть идентификатором, классом или любым другим css-селектором родительского элемента. Это удобно для показа ответов на часто задаваемые вопросы. Так, после выбора одного из ответов, все остальные автоматически будут свернуты. Код такого блока вы найдете в примерах ниже.

Методы collapse в Bootstrap.js

Параметры bootstrap collapse

Параметры, как и инициализацию объекта, можно передавать при помощи data-* атрибутов или через JavaScript. В первом случае имя атрибута идет после data-, например, data-parent=».container».

Параметр	Тип	По умолчанию	Описание
parent	selector	false	Если вы передаете селектор, то все скрываемые элементы внутри его будут скрыты при показе родительского блока.
toggle	boolean	true	Менять ли видимость элемента при вызове

Пример: простое скрытие элементов

Это самый простой пример работы скрипта:

<button data-toggle="collapse" data-target="#hide-me">Collapse Bootstrap.js</button>
<div>
Анонимус — посетители анонимных борд, которые почти все являются анонимами.
</div>

Обратите внимание: благодаря классу .in сворачиваемый элемент по умолчанию виден. Анонимус — посетители анонимных борд, которые почти все являются анонимами.

Пример: сворачивание остальных блоков внутри родительского (эффект гармошки или accordion)

<div>
 <div>
 <div>
 <h5>
 <a data-toggle="collapse" data-parent="#collapse-group" href="#el1">Первый элемент</a>
 </h5>
 </div>
 <div>
 <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
 </div>
 </div>
 <div>
 <div>
 <h5>
 <a data-toggle="collapse" data-parent="#collapse-group" href="#el2">Второй элемент</a>
 </h5>
 </div>
 <div>
 <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
 </div>
 </div>
 <div>
 <div>
 <h5>
 <a data-toggle="collapse" data-parent="#collapse-group" href="#el3">Третий элемент</a>
 </h5>
 </div>
 <div>
 <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
 </div>
 </div>
</div>

Просмотреть  пример

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

(Visited 378 times, 1 visits today)

Tailwind CSS Accordion — бесплатные примеры и руководство

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

Основные примеры

Аккордеон использует развал возможность складывания и раскладывания.

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

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

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

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

            
      <дел>
        <дел>
          

            

              Аккордеон №1
            
          
          

            <дел>
              Это тело аккордеона первого элемента.  Оно отображается по умолчанию,
              пока плагин сворачивания не добавит соответствующие классы, которые мы используем для стилизации каждого
              элемент. Эти классы управляют общим внешним видом, а также отображением и
              скрытие с помощью переходов CSS. Вы можете изменить любой из них с помощью собственного CSS или переопределения
              наши переменные по умолчанию. Также стоит отметить, что почти любой HTML может быть помещен в
              .accordion-body, хотя переход ограничивает переполнение.