Java, UX, HTML, CSS, WEB-design

8 методов и дизайнов аккордеонного меню CSS с открытым исходным кодом


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

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

Горизонтальный аккордеон

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

Но этот тип аккордеона также может работать как функция онбординга или простое информационное поле на странице.

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

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

Радио Аккордеоны

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

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

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

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

Аккордеонный слайдер CSS3

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

В этом аккордеоне на чистом CSS3 вы найдете множество очень простых эффектов и настраиваемых функций анимации. Эта штука великолепна и является одним из немногих простых в настройке аккордеонов.

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

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

Аккордеон только для CSS

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

Этот CSS-аккордеон показывает, как это сделать с помощью CSS3 и полей ввода радио.

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

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

Мульти-открытый аккордеон

Если вам нужна полная противоположность аккордеону «по одному предмету за раз», вам может понравиться этот дизайн, созданный Фрэнком Али.

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

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

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

Активированный Аккордеон

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

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

Кроме того, дизайн довольно прост, и есть полный контроль над цветами с небольшой настройкой CSS.

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

Простое меню

Коротко и лаконично лучше всего описывает этот фрагмент простого меню-аккордеона.

Он также выровнен по вертикали и запускается при наведении курсора, поэтому пользователь просто наводит указатель мыши на заголовок аккордеона, чтобы открыть подссылки. Разница здесь в стиле анимации (или его отсутствии).

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

Но если вы хотите что-то острое, это обязательно поможет.

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

Аккордеон без анимации

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

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

Но в целом поведение феноменальное, и эта ручка — одна из самых простых, с которой вы можете начать.

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — 8 методов и дизайнов аккордеонного меню CSS с открытым исходным кодом

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье 8 методов и дизайнов аккордеонного меню CSS с открытым исходным кодом

Название: 8 методов и дизайнов аккордеонного меню CSS с открытым исходным кодом . Краткое описание: ⭐ Вы можете создать несколько хороших меню с пом . Дата публикации: 16.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»