Блог Интервенция: Еще один "Аккордеон" без javascript и изображений только CSS3

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

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

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

ДемоСкачать

Разметка HTML

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

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

<div id="accordion">
    <div class="item">
        <h3>Новости</h3>
        <p>"Однажды россияне проснутся и увидят, что 1 доллар стал равен 53 рублям. И всё — никаких резких колебаний. Стабильно 53 рубля."</p>
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </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 h3 {
    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 h3 {
    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;
}

Например, чтобы разместить список рубрик в две колонки (что логичнее всего), присваиваете тегу 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;
}

Свойство 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 h3{
    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 h3 {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}

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

ДемоСкачать