Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Уроки » Кроссбраузерный "аккордеон" с помощью CSS3.

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

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

В последнее время, в силу того, что практически все современные и популярные браузеры (Opera, Firefox, Safari, Chrome, Flock и даже вечный тормоз — IE), активно подключаются к поддержке новых свойств 3, стало возможным в плотную заняться разработкой, более-менее кроссбраузерного, компактного «аккордеона», раскрывающегося при наведении. Конечно, способов создания таких «гармошек», в интернетах можно найти на любой вкус и цвет, все они разные и по исполнению, и по функциональной направленности.
Меня больше всего интересовала возможность создания панелей () в стиле «» исключительно средствами , без использования изображений при формировании блоков и без подключения дополнительных javascript. Ну и конечно же самое главное, чтоб в итоге, получился полноценный рабочий элемент, одинаково хорошо работающий во всех браузерах.

Сегодня, мы вместе с вами, рассмотрим всю технику исполнения кроссбраузерного «аккордеона» на чистом CSS3. Без лишней воды, нагромождений кода, только практика и наглядный пример. Кстати, а вот и он:

За основу построения структуры меню, были взяты ранние наработки по теме, описанные в статье: Меню «Аккордеон» без javascript и изображений.
В обновленной версии, мы будем использовать, при формировании внешнего вида аккордеона, функцию линейного градиента, эффекты трансформации открывающихся блоков и активных пунктов меню. В дальнейшем при желании, сможете с помощью магии CSS3, добавить чуточку размытой тени, экспериментируя со свойством box-shadow.
 

Меню в стиле Аккордеон

 
Примеры посмотрели, надеюсь разница работы старой и новой версий меню стала очевидной, особенно если не забыли просмотреть и в IEшке. Теперь, давайте подробнее рассмотрим полный расклад всех составляющих нашего «аккордеона», базовый html-каркас, и стили CSS, с помощью которых, сформируем внешний вид и функциональность панелей.

Разметка HTML

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

<div class="accordion">
    <ul>
        <li>
            <h3>»  Заголовок №1</h3>
            <div>
               <p>
                  Здесь любое содержание....
               </p>
            </div>
        </li>
        <li>
            <h3>»  Заголовок №2</h3>
            <div>
               <p>
                  Здесь любое содержание....
               </p>
            </div>
        </li>
        <li>
            <h3>»  Заголовок №3</h3>
            <div>
               <p>
                  Здесь любое содержание....
               </p>
            </div>
        </li>
        <li>
            <h3>»  Заголовок №4</h3>
            <div>
               <p>
                  Здесь любое содержание....
               </p>
            </div>
        </li>
    </ul>
</div>

 
Как видите, каркас меню не содержит ничего лишнего, вам остается только, при необходимости, по своему редактировать пункты(добавлять или удалять) и наполнять содержанием встроенные блоки div. Для связки нашего «аккордеона» с CSS, основному div-контейнеру, мы прописали определенный класс: class="accordion". С эти классом нам и предстоит работать в .css, дабы сформировать внешний вид, и оживить раскрывающиеся блоки, без использования javascript.

CSS3

Для оформления пунктов аккордеона, используем функцию линейного градиента linear-gradient и эффект тени для текста text-shadow в заголовках. Ну, а чтобы немного придать движухи при наведении и раскрытии панелей с содержанием, используем свойство из обоймы CSS3 transition. Это же свойство в связке с padding-left: 30px, применяем к заголовкам основных пунктов, добиваясь эффекта скольжения при наведении.
Как вы понимаете, значения необязательные и вам никто не мешает экспериментировать. Некоторые пояснения, непосредственно в коде CSS, помогут вам разобраться.
 

/* Формируем блок аккордеона */
.accordion {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    overflow: hidden;
}
/* список аккордеона */
.accordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
}
.accordion>ul>li {
    display:block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    height:36px;
    max-width: 300px;
/* задержка перехода при раскрытии */
    transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    -webkit-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
}
/* оформляем пункты */
.accordion>ul>li>h3 {
    display:block;
    margin: 0 auto;
    padding:10px 20px;  
    color: #6c6c6c;
    text-decoration: none;
    font: 14px  Helvetica, Arial, Sans-Serif;
    text-shadow: 1px 1px #fff;
    text-transform:uppercase;
    background: #c9c9c9;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #d3d3d3;
/* градиент */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f0f0f0', endColorstr = '#c9c9c9')";
    background-image: -moz-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: -ms-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: -o-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), to(#c9c9c9));
    background-image: -webkit-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: linear-gradient(top, #f0f0f0, #c9c9c9);
/* анимируем заголовок */
   -o-transition: padding-left 250ms ease-out;
   -webkit-transition: padding-left 250ms ease-out;
   -moz-transition: padding-left 250ms ease-out;
}
/* блок с содержанием */
.accordion>ul>li>div {
    background-color:#fcfcfc;
    margin: 0 auto;
    padding:10px;
    color: #555;
    font-size: 14px;
    height: 100%;
}
.accordion>ul>li:hover {
    height: 280px;
}
/* пункты аккордеона при наведении */
.accordion:hover>ul>li:hover>h3 {
    /* оформляем пункты при наведении */
    color: #3A505C;
    background: #d3d3d3;
    cursor:pointer;
    /* градиент */
    background-image: -moz-linear-gradient( top, #d3d3d3, #efefef);
    background-image: -ms-linear-gradient( top, #d3d3d3, #efefef);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#efefef));
    background-image: -o-linear-gradient(#dbdbdb, #e6e6e6); /* Opera */
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#d3d3d3', endColorstr='#efefef')"; /* IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr= '#d3d3d3', endColorstr= '#efefef')";   /* IE 8 */
/* подвижная ссылка */
   padding-left: 30px;
}
/* параграфы внутри аккордеона */
.accordion p { margin: 0 0 10px }
/* миниатюры изображений */
.accordion img{ width: 25%; height: auto}

 
Internet Explorer, этот вечный тормоз, не позволяющий веб-разработчикам расслабиться, на сей раз прожевал все, что ему предложили. Правда, для более старых версий(IE 5.5 — IE 7 и IE 8) , все же пришлось применить некоторые «костыли», в виде фильтров при создании эффекта линейного градиента в оформлении пунктов «аккордеона».

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

С уважением, Андрей Лазаренко /shurawi/

 

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

38 комментариев
  1. Alex:

    Огромадное СПС автору (ам) скрипта!

    Ответить
  2. Олег:

    Здравствуйте!

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

    Большое Вам спасибо!

    Ответить
  3. romaamor:

    А как переписать CSS что бы меню было не вертикальное а горизонтальное ?

    Ответить
    • driver:

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

      Ответить
  4. Co2FE:

    Здравствуйте.

    Прикрутил.

    Работает во всех браузерах, кроме IE (9,10 — ниже не проверял). Конкретно — не работает псевдокласс :hover.

    Не видит его вообще IE... 🙂

    Возможно, нужен «костыль» какой-нибудь для него?

    В чем может быть подковырка?

    Ответить
    • driver:

      Co2FE. Доброго времени суток!

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

      Если бы, как вы пишете IE не видел :hover вообще, то пункты меню ни как бы не реагировали при наведении и вы бы не увидели содержания скрытых блоков.

      Так что «Аккордеон» работает во всех браузерах без исключения отлично. Повторюсь, в IEшке отсутствует лишь плавность раскрытия аккордеона и смещение ссылки при наведении происходит немного резче. Ну, на то он IE, чтоб нам работа медом не казалась.

      Костыли для более старых версий IE 5.5 — IE 7 и IE 8, все же пришлось применить, в частности при создании эффекта линейного градиента.

      Свойство transition на данный момент IE не поддерживается, а значит обойдемся пока в этом браузере без плавных переходов ))).

      Ответить
      • Co2FE:

        Работает...Проверил отдельно от CMS.

        Отдельно, не в его структуре — все ОК!

        А в CMS — не работает...Т.е. — работает во всех браузерах, кроме IE, где :hover вообще не реагирует и не открывает содержания скрытых блоков.

        Ну да ладно... Это частный случай, видимо... Буду ковырять... 🙂

        Ответить
        • driver:

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

          Удачи!

        • Co2FE:

          Все заработало...

          Ларчик открылся путем добавления во фрейм CMS вот такой ереси:

          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

          CMS — WA Shop-Script 308

  5. driver:

    Co2FE

    Спасибо за очень полезное дополнение.

    Ответить
  6. Ринат:

    Огромное спасибо за урок. Но насколько я понимаю, возможности оставлять одну из вкладок открытой здесь не предусмотрено? Все только по наведению курсора. Очень жаль. Хороший скрипт, особенно радует, что кроссбраузерный, но лично мне нужно было заполнить одну из пустовавших областей сайта несколько большим объемом контента.

    Ответить
  7. Евгений:

    Спасибо Автору очень понравилось.Вопрос:при наведении курсора

    блок body еле заметно дергается влево.Как сделать что-бы подменю после открывания фиксировалось и не закрывалось при убирании курсора? Спасибо

    Ответить
    • driver:

      Спасибо за отзыв.

      Убрал *{margin: 0;padding: 0;} в стилях демо, сейчас все нормально должно быть. Бывает в ходе разработки забываешь подчищать код))). Фиксация выезжающих блоков в данном виде аккордеона не предусматривалась изначально. В другом способе разворачивания (при клике), блоки «аккордеона» будут фиксироваться и закрываться по стандарту, т.е. при повторном клике по заголовкам пунктов.

      Удачи!

      Ответить
  8. vektorss:

    меню просто супер..., сейчас в него картинки вместо текста вставляю — всё работает. Огромное спасибо, driver!!!!

    Ответить
  9. Тимур:

    А как сделать чтобы первый пункт (Новости) по умолчанию был открыт

    Ответить
    • driver:

      Для начала, добрый вечер, Тимур.

      Самый простой способ, это создать отдельный класс для пункта, который вы хотите видеть открытым, в вашем случае это первый пункт, ну и обзовем класс, например .first. В CSS пропишим этот класс со следующими параметрами display:block;height: 300px;. Высоту можете выставить свою. Необходимо чтобы это правило работало внутри основного блока .accordion, значит на выхлопе получаем примерно следующее: .accordion .first{display:block;height: 300px;}

      В завершение, уже в html, первому пункту меню присваиваем класс first, непосредственно в коде это будет выглядеть так: <li class="first">, соответственно остальные пункты оставляете как есть. Если понадобится сделать открытым любой другой пункт, просто прописываете к нему class="first".

      Удачи!

      Ответить
  10. Vad:

    Нашел то, что искал «НАКОНЕЦ ТО»! Огромное человеческое спасибо. Сейчас буду сидеть разбирать его.

    Ответить
  11. Владимир:

    Здравствуйте, driver!

    Подскажите пожалуйста:

    1. Как сделать в этом меню «Аккордеон» открытие вкладок по клику?

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

    Спасибо Вам, меню очень понравилось!

    Ответить
    • driver:

      Здравствуйте, Владимир.

      В данном примере «аккордеон» выстроен в виде неупорядоченного списка, с раскрытием блоков с содержанием при наведении с помощью псевдокласса :hover, для активации скрытых боков по клику необходимо использовать другой псевдокласс :target, но применительно к этой конструкции аккордеона, в таком виде как сейчас, он не сработает, нужно полностью перестраивать и html и часть css. В комментариях точно не уложимся)))

      В ближайшие два — три дня, заканчиваю развернутый материал, именно по теме «аккордеона» с активацией блоков через псевдокласс :target, а так же готов пример аккордеона на чекбоксах. Так что следите за обновлениями моего блога...

      Ответить
      • Владимир:

        Спасибо за ответ, по возможности обязательно буду следить за обновлениями Вашего блога. Благодарю Вас за то, что делитесь своим творчеством. Желаю Вам успехов и благополучия!

        Ответить
  12. Олег:

    Отличный кроссбраузерный «аккордеон», пересмотрел множество вариантов, Ваш оказался наиболее удобным, отдельное спасибо за градиент для «Ослика»!

    Ответить
12»
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться без комментирования

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru