Главная » Уроки » Кроссбраузерный "аккордеон" с помощью 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/

 

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

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

38 комментариев
  1. Добрый день! Статья супер, применил стили к стандартному меню джумла у себя на сайте.

    Можно задать только один вопрос?

    Хотелось бы прописать один из css3 стилей, что бы меню всегда открывалось до конца, не зависимо от времени наведения на него. Например сейчас, если навести мышь на меню и быстро убрать, то оно до конца не откроется, а сразу начнет сворачиваться. Это не очень удобно если высота всех подпунктов меню разная, а не как у вас в демо. (см. пример на моем сайте)

    Можно ли что то прописать с помощью CSS3 или jqury для лечения этой проблемы? ...то же самое относится и к движеню h3 с помощью padding-left, хотелось бы что бы движение всегда заканчивалось.

    Ответить
    • driver says:

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

      Такая функция мною не рассматривается, просто не вижу логики, если чел навел на пункт, он обязательно дождётся того, чтобы увидеть все скрытые пункты, а кому не интересно, нет разницы раскроется меню полностью после его судорожных наводок на пункты или нет)))

      Ответить
      • Могу показать на примере, почему меня эта функция заинтересовала )

        сайт: favorkrep.ru

        На меню «уплотнители» тяжело попасть, если вести сверху вниз курсор, т.к. случайно попадаешь на 3е меню (из-за закрывания 1го).

        В общем, просто попробуйте, может есть еще какое решение...

        Ответить
        • driver says:

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

          PS: хотя в моём примере, такого сдвига при переходах по пунктам не происходит.

  2. Павел says:

    Отлично! Как сделать чтобы при переходе по якорю вкладка октрывалась? так и не допетрил...

    Ответить
  3. Руслан says:

    Здравствуйте. Спасибо вам большое за это меню, нашёл то что искал. Но существует проблема связанная с высотой секции, по умолчанию стоит 280px для всех, а мне необходимо для каждой свой размер. Понимаю, что параметры высоты для каждой секции можно задать отдельно в том же css, но как это сделать я не знаю, поскольку абсолютный «чайник» в «этих» делах.

    Помогите пожалуйста)))

    Ответить
    • driver says:

      Если не критично отсутствие плавного перехода при раскрытии,достаточно изменить значение height с 300px на auto:

      .accordion>ul>li:hover {
          height: auto;
      }

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

      Ответить
  4. елена says:

    Отличный сайт и урок. Большое спасибо! В том числе за мобильную версию сайта.

    Ответить
  5. Андрею низкий поклон с Дальнего Востока и Юго Восточной Азии за крутой сайт и за аккордеон в частности!

    Ответить
  6. coder says:

    Добрый вечер!

    Не смог найти на Вашем сайте вариант этого аккордеона где бы он открывался бы по клику (target) а не по наведению (hover).

    Заранее благодарен.

    Ответить
    • driver says:

      Есть парочка вариантов на скрытых чекбоксах: раз и два

      Ответить
      • coder says:

        Спасибо, что так быстро ответили. Предложенные вами варианты хорошие. Однако вешеизложенный Вами вариант кода аккордеона интересен тем, что имеет плавность при открытии или закрытии на одном только CSS и HTML (без использования JavaScript). Ещё круче было бы реализовать возможность открытия/закрытия при щелчке мыши (типа oclick но без JavaScript).

        Ответить
  7. NeedHate says:

    Эффекта плавности можно достичь, если слегка поменять принцип работы аккордеона. В примере, который я скинул в этом нам помогает max-height: 0 в закрытом состоянии и max-height: 200px в открытом, соответственно. Это позволяет браузеру во время рендеринга высоты блока просчитывать время, за которое этот блок откроется. Легкое притормаживание всё же будет, но плавность будет достигнута.

    И сам пример: jsfiddle.net/wutnha1s/

    Ответить
  8. Мария says:

    Добрый день, а как сделать так, чтобы пункты аккордеона открывались в право, а не вниз?

    Ответить
«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