Аккордеон меню – Как доработать аккордеон-меню на CSS 3, построенное на свойстве «transition»? — Хабр Q&A

Accordion

9 473 Скрипты / Accordion

Вертикальное accordion меню

Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке.  

Вертикальное accordion меню 3 315 Скрипты / Accordion

Flat accordion menu — вертикальный аккордеон

Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.

Flat accordion menu - вертикальный аккордеон 2 791 Скрипты / Accordion

Akordeon — плагин аккордеона

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

Akordeon - плагин аккордеона
3 730 Скрипты / Accordion

Аккордеон на CSS3

Типичный аккордеон, но реализованный только с помощью CSS3 свойств.

Аккордеон на CSS3 4 690 Скрипты / Accordion

Спойлер — spoiler

Рассмотрим toggleClass атрибут jquery для создания спойлера или аккордеона.

Спойлер - spoiler 2 439 Скрипты / Accordion

Гибкий аккордеон

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

Гибкий аккордеон
2 925 Скрипты / Accordion

Эффект раздвижных шторок

Похоже на аккордеон — при наведении происходит, как бы раздвигание шторок и мы видим полное изображение.

Эффект раздвижных шторок 1 535 Скрипты / Accordion

Вертикально-горизонтальный аккордион

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

Вертикально-горизонтальный аккордион 2 200 Скрипты / Accordion

Горизонтальный аккордион c вкладками

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

Горизонтальный аккордион c вкладками 2 084 Скрипты / Accordion

Плагин zAccordion — слайдер

Простой плагин zAccordion — слайдер изображений. Замечательно впишется в любой дизайн сайта.

Плагин zAccordion - слайдер 1 719 Скрипты / Accordion

Эффект accordion с вкладками

  Эффект разворачивающейся панели состоящей из вкладок.

Эффект accordion с вкладками

Вертикальное меню — аккордеон — WEB Team

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a {

    border: 0 none;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    display: block;

    line-height: 1;

    list-style: none outside none;

    margin: 0;

    padding: 0;

    position: relative;

}

#cssmenu {

    color: #ffffff;

    font-family: Helvetica,Arial,sans-serif;

    width: 200px;

}

#cssmenu ul ul {

    display: none;

}

#cssmenu > ul > li > a {

    background: rgb(54,170,231); /* Old browsers */

    background: -moz-linear-gradient(top,  rgba(54,170,231,1) 0%, rgba(31,160,228,1) 100%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(54,170,231,1)), color-stop(100%,rgba(31,160,228,1))); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(top,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* IE10+ */

    background: linear-gradient(to bottom,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#36aae7′, endColorstr=’#1fa0e4′,GradientType=0 ); /* IE6-9 */

    border-left: 1px solid #1682ba;

    border-right: 1px solid #1682ba;

    border-top: 1px solid #1682ba;

    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;

    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;

    color: #ffffff;

    cursor: pointer;

    font-size: 14px;

    font-weight: bold;

    padding: 15px 20px;

    text-decoration: none;

    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);

    z-index: 2;

}

#cssmenu > ul > li > a:hover,

#cssmenu > ul > li.active > a,

#cssmenu > ul > li.open > a {

    background: rgb(31,160,228); /* Old browsers */

    background: -moz-linear-gradient(top,  rgba(31,160,228,1) 0%, rgba(25,146,209,1) 100%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(31,160,228,1)), color-stop(100%,rgba(25,146,209,1))); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top,  rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top,  rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(top,  rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* IE10+ */

    background: linear-gradient(to bottom,  rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1fa0e4′, endColorstr=’#1992d1′,GradientType=0 ); /* IE6-9 */

    color: #eeeeee;

}

#cssmenu > ul > li.open > a {

    border-bottom: 1px solid #1682ba;

    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.15);

    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.15);

}

#cssmenu > ul > li:last-child > a,

#cssmenu > ul > li.last > a {

    border-bottom: 1px solid #1682ba;

}

.holder {

    height: 0;

    position: absolute;

    right: 0;

    top: 0;

    width: 0;

}

.holder:after, .holder:before {

    content: «»;

    display: block;

    height: 6px;

    position: absolute;

    right: 20px;

    -webkit-transform: rotate(-135deg);

    -moz-transform: rotate(-135deg);

    transform: rotate(-135deg);

    width: 6px;

    z-index: 10;

}

.holder:after {

    border-left: 2px solid #ffffff;

    border-top: 2px solid #ffffff;

    top: 17px;

}

#cssmenu > ul > li > a:hover > span:after,

#cssmenu > ul > li.active > a > span:after,

#cssmenu > ul > li.open > a > span:after {

    border-color: #eeeeee;

}

.holder:before {

    border-left-color

6 аккордеон меню Joomla 3.x/4 настройки и возможности

 

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

Сегодня существует множество модулей и компонентов, которые позволяют создать подобный тип меню, но не все из них имеют типичный вид. В истинном понимании аккордеон среди компонентов джумла встречается лишь среди modules для вывода контента (например, sp accordion). Так называемые «мобильные» представляют собой одну кнопку, при нажатии на которую раскрывается всё меню. Более функциональные приложения позволяют добавлять пользовательское описание, которое отображается под заголовком (не раскрывается при нажатии, а видно сразу) или даже вставить модуль joomla. А некоторые разработки выводят раскрывающийся список с красивыми иконками.

Какой выбрать вам – станет ясно после нашего обзора. Представляем топ-6 аккордеон меню для joomla 3.

 

Модуль AccordeonMenuCK

Интересная разработка – позволяет не просто создавать меню аккордеон joomla, а создавать пункты с картинками, пользовательским названием и описанием, со ссылками. В пункт меню можно даже вставить module joomla. Приложение позволяет настроить анимированные эффекты – различные способы раскрытия подменю.

  • Поддерживает 3.х джумла (есть версии для 2.5).
  • Отзывчивый.
  • Бесплатный (версия free, на сайте разработчика можно найти пакет pro).

Возможности

Ссылка: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/accordeon-menu-ck.

  • Описание вставляем после названия ссылки, отделяя его двумя «слэшами» (//). Модуль можно загрузить по ID (в заголовок ссылки): [modid=IDOFMODULE].
  • Изображение можно вставить с текстом или без него.
  • На одной странице можно разместить множество меню формата аккордеон.
  • Уровень вложенности может быть разный (количество не ограничено).
  • Работать с СЕО меню можно через CSS.
  • Множество предустановленных тем (с плагином Params) и возможность изменения стиля оформления.
  • Пункты меню с описанием и кнопкой далее можно создать из статей, проранжированных по дате, из статей определенной категории, из контента популярных компонентов (см. далее).
  • Интеграция с Flexicontent, Hikashop (с соответствующим патчем), Virtuemart (скачав патч).
  • Специальное меню для мобильных приложений (доступно после установки отдельного модуля).
  • Для сайтов на joomla предусмотрена дополнительная возможность для вывода: не только с помощью модуля, но в любом месте шаблона с помощью спецпозиции – «ici ‘maximenuCK’».

Настройка

Скачаем установочный файл с портала joomla.org(https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/accordeon-menu-ck) и создадим меню. Для этого зайдем в модуль, перейдем сразу к вкладке Source (Источник).

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

Перейдём к эффектам, выберем один из множества эффектов перехода.

Зайдём во вкладку Styles. Если хотим выбрать один из 20 готовых шаблонов оформления, стоит установить плагин Params (достаточно выбрать наиболее подходящий для нашего шаблона, но можно произвести и более тонкие настройки стиля).

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

В других двух вкладках – стили ссылок разных уровней (1-го, 2-го и последующих).

Остальные параметры доступны после загрузки дополнительных патчей и плагина.

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

Разработчик предлагает получить дополнительные возможности по использованию меню «Аккордеон», скачав плагин Params или компонент «Голосование по JED». А чтобы лучше разобраться в возможностях Accordeon Menu CK, предлагает платно скачать всю документацию по модулю.

 

Расширение swMenuFree

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

  • Данное приложение поддерживает joomla 2.5-3.х (есть версии для 1.5 и для 1.0).
  • Отзывчивое.
  • Бесплатное (версия free, на сайте разработчика можно найти пакет pro).

Страница для скачивания: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/swmenu.

Обзор настроек и возможностей:

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

  • В настройках можно задать источник – меню из тех, что уже созданы стандартными способами либо «Usecontent» (Использовать только контент). В последнем случае необходимо также активировать гибридное меню.

  • Множество настроек для точечных изменений стиля (шрифты, оформление углов, границ, цвета, изображения, тень, границы).

  • Перед или после пункта меню можно поместить пользовательский код cssили html.

  • Функция предварительного просмотра (отображает последние изменения) – удобно при работе.

  • Настройки для «адаптивного» меню (отображение на мобильных устройствах в формате аккордеона).

  • Горизонтальная и вертикальная ориентация.

  • Интеграция с Virtuemart.
  • Обновляется до следующей версии без потери настроек.

Настроим меню и опубликуем через активацию соответствующего модуля.

Единственный минус расширения – отсутствие поддержки и демо (имеется лишь сложная видео инструкция не на русском языке).

 

Модуль Simple Responsive Menu

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

  • Бесплатный.
  • Отзывчивый.
  • Для joomla 3.x.

Настройки

Настроить можно ширину экрана, при которой развернутое меню должно свернуться. А также указать место, где должна расположиться кнопка.

Скачиваем здесь: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/simple-responsive-menu. Открываем модуль, активируем, настраиваем.

Первым делом укажим источник, выберем уровни отображения и перейдём в последнюю вкладку – настройки адаптивности.

Приложение эффективно выполняет своё назначение и оправдывает название – Simple: настройка производится быстро.

 

Модуль Floating Buttons

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

  • Имеется в свободном доступе (лицензия GPLv2).
  • Подходит для Joomla 3.x.
  • Адаптивный.

Скачаем здесь: https://extensions.joomla.org/extensions/extension/style-a-design/modules-panel/floating-buttons. Установим и зайдем в автоматически созданный модуль FloatingButtons. Здесь можно настроить стиль, цвета, иконку, разрешить показывать на всех устройствах, либо только на мобильных. А также прописать для каждого пункта заголовок, url, выбрать для них иконку и цвета.

Модуль JF Mobile Bar

Назначение модуля соответствует названию, но JFMobileBarбольше, чем меню для мобильных устройств – оно работает и на планшетах, и на смартфонах, и на ПК.

  • Последняя версия предназначена для joomla 3.x, предыдущая – 2.5.
  • Распространяется бесплатно.
  • Отзывчивый красивый дизайн.

Возможности и настройка

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

Цветовое оформление можно менять. Доступны иконки.

Поддерживает расширения для соцсетей – EasySocialи JomSocial (можно добавлять ссылки на профили). Но для них требуется установка спецмодулей.

Ссылка на установочный файл: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/jf-mobile-menu. Все настройки в первой вкладке модуля: источник, название меню, размеры, при которых будет отображаться аккордеонное меню, цветовое оформление, названия пунктов, иконки.

После настроек получаем одинаковый вид на компьютере, планшете и смартфоне (если в параметре Show on device указали All, а если любую из других настроек — на компьютере меню будет отображаться полностью, не аккордеоном).

 

После изучения наиболее популярных разработок становится ясно, что под accordion menu joomla чаще понимают «мобильные» меню, реже раскрывающиеся (ниспадающие) списки. При этом каждый модуль или компонент имеет свои плюсы и оказывается очень кстати на сайтах определённой тематики.

 

Модуль DJ-SelectMenu

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

  • Лицензия GPLv2 (free).
  • Адаптивный.
  • Для версий 2.5-3.х (последнее обновление в январе 2016 г.)

Скачиваем: https://extensions.joomla.org/extension/dj-selectmenu. Настройка максимально простая – выбираем меню из списка готовых, выбираем, как открывать (в новом или в том же окне).

 

Бесплатные «аккордеон»-меню с помощью HTML5 и CSS3

HTML — популярный язык, используемый для строительства веб-страниц и другой информации, которая может быть показана в web-браузере. HTML 5 является последним достижением. С другой стороны, CSS — язык, который используется для того, чтобы описать семантику представления на веб-сайтах, это язык разметки стилей; HTML и XML были наиболее используемыми языками. CSS разъединяет содержание самого документа и его представления, включая элементы расположения, цвета и шрифтов. CSS также, как и HTML, появился с различными версиями, и CSS3 является текущей. «Аккордеон»-меню на HTML 5 и CSS 3 используется, чтобы построить дизайн веб-сайтов с хорошей разметкой, комбинацией цвета и идеальной типографией. Аккордеон — многоуровневое меню с фиксированной высотой и шириной. Оно может быть использовано для создания отсека подпунктов главного меню. Вашему вниманию представляются бесплатные «аккордеон»-меню на HTML5 и CSS3, которые могут быть использованы для веб-дизайна и разработки сайтов.

 

Accordion using only CSS


Responsive: Tabs to accordion


CSS3 Multiple Accordion Menu


Accessible Accordion & Toggle


RWD Accordion


jQuery Accordion custom navigation 


CSS3-only accordion


Simple Accordion


Simple Accordion FAQ List


Hover activated accordian with default state


Accordion slider


Accordion


Simple accordion for news


CSS Based Animated Accordion


Fading List


Content Accordion in Pure CSS3


Accordion without Javascript


CSS3 Accordion


Vertical Accordion effect with jQuery


Multi level slide accordion menu with jQuery


Accordion with CSS3


Flexible Slide-to-top Accordion


Vertical Sliding Accordion with jQuery


Elegant Accordion with jQuery and CSS3


Accordion Menu


 

Перевод — Дежурка.

Автор — Unaiz.

Возможно, вам будет интересно: Прозрачные ui-элементы бесплатно. 

JQuery плагин вертикального аккордеон меню для блога WordPress

Здравствуйте, дорогие читатели блога. В этот день расскажу Вам я про превосходный плагин, который создаёт на блоге WordPress классное меню аккордеон — JQuery Accordion Menu Widget. Я сам пользуюсь этим плагинов, и естественно Вы его можете посмотреть в действии справа в рубриках. Очень удобный плагин, просто вставляешь через админку виджет и радуйся.

Плагин

Плагин JQuery Accordion Menu Widget легок в установке и в использовании, к тому же очень функционален. В нем присутствует несколько тем оформления, цветов самого меню, а именно красное, синее, чёрное и  серое. Соответственно это аккордеон меню вольётся практически в любой дизайн блога.

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

Ну а теперь давайте перейдём к процессу установки и настройки плагина.

Установка плагина

Теперь нужно, в админке блога, зайти во вкладку плагины, затем выбрать Добавить новый и в поле для поиска вписать JQuery Accordion Menu Widget далее нажать поиск.

Нужный нам плагин будет самый первый в списке. А под ним будет ссылка Установить плагин. После того как он установится нужный нам виджет появится во вкладке Внешний вид — Виджеты.

На рисунке выше я подчеркнул название самого виджета.

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

Настройки плагина

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

Важный момент: рубрики и подрубрики.

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

Чтобы создать произвольное меню в WordPress Вам нужно зайти в Внешний вид, а затем в Меню. Далее нужно придумать название меню, выберите какое Вам понравится:-) после нажимаем на кнопочку Создать меню.

Когда меню будет создано нужно будет выбрать его элементы, в нашем случае это будут рубрики. Ниже будет не большое окошко с рубриками, в этом окошке нужно будет выбрать вкладку Все, затем нажать Выделить все, а после нажать Добавить в меню. Теперь давайте посмотрим что у меня получилось с рубриками на beloweb.ru.

Теперь нужно создать подрубрики. В данном случае у рубрики WordPress будет подрубрика Плагины. Для этого Плагины нужно перетащить чуть правее. Смотрите на рисунке ниже, что у меня получилось.

После того ка Вы сделаете этот шаг, плагин JQuery Accordion Menu Widget будет работать.

Надеюсь, что всё ясно и доступно объяснил. Если Вам всё таки Вам будет что то не понятно спрашивайте в комментариях. До скорых встреч, друзья.

Меню «Аккордеон» без javascript и изображений

Все чаще и чаще на страницах сайтов можно встретить использование меню навигации в стиле «аккордеон». Широкое применение такой вид меню находит у разработчиков тем для WordPress, это и понятно, компактность и информативность, а так же стиль оформления делают «аккордеон» все более популярным.
В плане оформления и способов вывода таких блоков на страницы сайта работают ребята с размахом, благо есть где развернуться. Чаще всего, блоки навигации в стиле «аккордеон» создаются с применением javascript, для создания эффекта анимации раскрывающихся списков или контейнеров с контентом, заголовки пунктов меню оформляются с использованием изображений, об этом я писал ранее Создаем блок навигации в стиле Аккордеон. Это в какой то мере способствует правильной работе меню в большинстве браузеров, но меня всегда больше привлекает возможность применения новых стандартов CSS3 в работе над дизайном.
 

Внимание!
Данная статья с течением времени стала неактуальна, так как появилась обновленная версия меню «Аккордеон», одинаково хорошо работающая во всех браузерах. Смотрите подробное описание и наглядный пример в новой статье:

Кроссбраузерный «аккордеон» с помощью CSS3

 
Сегодня хочу рассказать и показать, как с помощью стилей и новых свойств CSS3, не используя javascript и изображения, можно заделать отличное, функциональное и быстро работающее меню в стиле «Аккордеон».
 

 

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

Разметка HTML

Начнем работу по созданию меню с разметки на странице HTML, я уверен, что многих удивит на сколько прост код каркаса всего меню. Создадим контейнер div и присвоим ему. Каждому пункту меню пропишем div. Заголовки пунктов меню обозначим тегом h4, а содержание блоков с тега P. В примере я использовал в содержании блоков меню списки, а значит и в стиле и в разметке html код будет выглядеть несколько иначе. Здесь же приведу основу раскладки меню, от чего и можно будет отталкиваться при дальнейшей доработки под свои нужды.

 

<div>
    <div>
        <h4>Новости</h4>
        <p>"Однажды россияне проснутся и увидят, что 1 доллар стал равен 53 рублям. И всё — никаких резких колебаний. Стабильно 53 рубля."</p>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
</div>

<div> <div> <h4>Новости</h4> <p>»Однажды россияне проснутся и увидят, что 1 доллар стал равен 53 рублям. И всё — никаких резких колебаний. Стабильно 53 рубля.»</p> </div> <div> </div> <div> </div> <div> </div> </div>

 

Основные CSS

С оформлением нашего меню через стили CSS, трудностей не возникнет, все по накатанной и без лишних выкрутасов:
 

#accordion .item {
    width: 400px;
    height: 30px; 
    overflow: hidden;
 
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
 
    margin-bottom: 2px;
}
#accordion h4 {
    display: block;
    height: 20px;
    line-height: 20px;
    margin: 0px 0px 5px 0px;
    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 150px;
    padding: 5px;
}
#accordion div:hover h4 {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}

#accordion .item { width: 400px; height: 30px; overflow: hidden; border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 2px; } #accordion h4 { display: block; height: 20px; line-height: 20px; margin: 0px 0px 5px 0px; background: #e6e6e6; padding: 5px; color: #1e1e1e; text-decoration: none; } #accordion p { height: 150px; padding: 5px; } #accordion div:hover h4 { border-bottom: 1px solid #ccc; font-weight: bold; }

 

При размещении в блоках меню содержания, включающего в себя разного рода списки ( Рубрики, Архивы или Метки), соответственно стоит прописать стили и для этих элементов

 

.aleft {
   float:left;
   width:90px;
}
.aright {
   float:left;
   width:90px;
}
.arsip li {
   float: left;
   width: 120px;
}
.clearfix {
   display: inline-block;
}

.aleft { float:left; width:90px; } .aright { float:left; width:90px; } .arsip li { float: left; width: 120px; } .clearfix { display: inline-block; }

 

Например, чтобы разместить список рубрик в две колонки (что логичнее всего), присваиваете тегу ul класс .aleft для левой и класс .aright для правой колонки. В общем от чего плясать понятно, а дальше, это кому как нравиться.
Сразу хочу отметить, что закругленные углы (border-radius) и все прелести CSS3, тормознутый и горячо не любимый IE, обрабатывать отказывается напрочь, в остальных человеческих браузерах (Opera 10.50+, Firefox 3.5+, Safari 3+, Chrome 4+) все выглядит прекрасно.

 

 

CSS3 Transition

Вот наконец-то мы и подобрались к самому интересному, а именно с помощью чего достигается переход к содержимому блоков меню, то есть сам эффект «аккордеон». Каждому пункту меню прописываем правило CSS transition:

 

#accordion .item { 
    transition: height ease-in-out 500ms; /* css3 transition */
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;
}
#accordion div:hover {
    height: 180px; 
}

#accordion .item { transition: height ease-in-out 500ms; /* css3 transition */ -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; } #accordion div:hover { height: 180px; }

 

Свойство CSS3 Transitions позволяют назначать изменения свойств CSS плавно и в течение некоторого времени, в нашем конкретном случае мы используем для открытия содержания пунктов меню с эффектом задержки 500ms.
CSS3 и HTML5 развиваются всё быстрее и быстрее, браузеры начинают поддерживать всё больше новых фишек и плюшек, CSS3 Transitions как раз из этой обоймы. Да, использование CSS3 для критичных моментов сайта сейчас невозможно. Но использовать его для добавления мелких, некритичных для проекта деталей вполне реально, можно и нужно, наше меню «Аккордеон» отличное тому подтверждение.

В довершение всей проделанной работе, остается собрать воедино весь полученный код стилей CSS:

 

#accordion .item {
    width: 400px;
    height: 30px; 
    overflow: hidden;
 
    transition: height ease-in-out 500ms; /* css3 transition */
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;
 
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
 
    margin-bottom: 2px;
}
#accordion h4{
    display: block;
    height: 20px;
    line-height: 20px;
 
    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 150px;
    padding: 5px;
}
#accordion div:hover {
    height: 180px; 
}
#accordion div:hover h4 {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}

#accordion .item { width: 400px; height: 30px; overflow: hidden; transition: height ease-in-out 500ms; /* css3 transition */ -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 2px; } #accordion h4{ display: block; height: 20px; line-height: 20px; background: #e6e6e6; padding: 5px; color: #1e1e1e; text-decoration: none; } #accordion p { height: 150px; padding: 5px; } #accordion div:hover { height: 180px; } #accordion div:hover h4 { border-bottom: 1px solid #ccc; font-weight: bold; }

 

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

Внимание!
Данная статья с течением времени стала неактуальна, так как появилась обновленная версия меню «Аккордеон», одинаково хорошо работающая во всех браузерах. Смотрите подробное описание и наглядный пример в новой статье:

Кроссбраузерный «аккордеон» с помощью CSS3

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *