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

В состоянии постоянного подключения...
Главная » Уроки » Меню "Аккордеон" без javascript и изображений

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

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

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

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

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

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

Меню Аккордеон

 

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

Разметка 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 и каких либо изображений. Надеюсь эта статья поможет вам придать движухи вашему сайту.

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

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

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

33 комментария
  1. Владимир:

    В IE6-7 не работает =(

    Ответить
    • driver:

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

      Ответить
  2. shesha:

    автору спасибо ...размером со слона

    Ответить
  3. Неля:

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

    Подскажите, пожалуйста, как сделать такое меню с открытием ссылок не при наведении, а при нажатии?

    Заранее спасибо

    Ответить
  4. ищу такое меню уже долго именно на css без явы, из-за постоянных конфликтов яваскриптов (несовместимость). Очень полезный урок. Я для себя нашёл именно то, что я искал.

    реализацию смотрите на svadebkii.noads.biz (в разработке))

    Ответить
  5. ещё бы узнать, как регулировать высоту раскрываемого меню автоматически — в зависмости от текста.

    #accordion div:hover {

    height: AUTO;} — не помогает

    Ответить
    • driver:

      Все правильно, выставляете #accordion div:hover { height: auto;} но при этом следует выставить и #accordion p { height: auto;} если такой параметр используете в вашем стиле, у меня в исходниках прописан размер в 150 px, меняете на auto и все должно заработать в размер вводимого текста.

      Удачи!

      Ответить
  6. Светлана:

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

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

    PS Оформила это как модуль и поместила в позицию лефт. Код и css взяла прямо отсюда для пробы, ничего не меняла.

    Ответить
    • driver:

      Светлана. Здравствуйте.

      Для меня самого загадка, у меня все работает в разных позициях и во всех современных браузерах, особенно в Chrom, так как в плане экспериментов CSS3, эти ребята впереди планеты всей. На вскидку напрашивается, ненужность отдельного позиционирования, проверьте overflow: hidden; и -webkit-transition: height ease-in-out 500ms;. Используйте без контейнера div id="container". Например встраивая в сайд-бар, применяете именно разметку блока меню div id="accordion". В статье приведен чистый CSS, в примере с различными встроенными элементами, так что стоит обратить внимание на исходник Демо и сравнить со своими наработками. в частности можете добавить .clearfix { display: inline-block; } этот хак для многоколоночных макетов с лишним div'ом.

      Удачи!

      Ответить
  7. Тарас:

    Простинько и красивенько!!..))

    спасиба!!!

    Ответить
  8. Вадим:

    Хотелось бы сделать именно это меню раздвигающемся при клике. Прошу помощи

    Ответить
    • driver:

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

      Для начала в CSS поменяйте hover на target в секциях #accordion div: hover {...} и #accordion div: hover h3 {...}

      В разметке вашего меню в html необходимо div с классом «item» присвоить идентификатор, например id="1", а заголовку пункта меню прописать атрибут ссылки с url соответствующим идентификатору div , примерно так:

      <div id="1" class="item">
      			<h3>< a href="#1"> Рубрики</h3>
      <p>Содержимое скрытого блока</p></div>

      Соответственно со всеми следующим пунктами меню проделываете тоже самое, меня порядковый номер 1,2, 3 и т.д

      Не ручаюсь за безошибочность данного решения, но оно работает.

      Ответить
  9. Dayks:

    Подскажите будьте добры как сделать чтобы блок с текстом появлялся над надписью НОВОСТИ, то есть чтобы надпись двигалась плавно вниз, а над ней открывался текст. Спасибо большое.

    Ответить
    • driver:

      Dayks Все есть как есть! Для того чтобы сделать то что вы хотите, необходимо полностью перестроить каркас стилей, а это уже совершенно другая история. Здесь же показан пример исполнения меню с помощью чистого стиля CSS, возможности новых функций CSS3.

      Удачи!

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

    Как же мне нравится эта менюшка.

    Но вот беда... Прыгает вверх при открытии какой-нибудь вкладки. Приходится прокручивать всю страницу.Встроино в сайд-бар. С разметкой блока меню div id="accordion" тоже не получается. Ни как не могу разобраться. другие простые аккардионы тоже самое...

    Прошу помощи !

    Ответить
    • driver:

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

      Что не получается с разметкой, напишите конкретнее, в чем нужна моя помощь?

      Ответить
  11. semen74:

    О ! Оперативно.

    Можно я вышлю сейчас маленькое видео 200 Кб.?

    Ответить
  12. semen74:

    Вопрос отпадает. Разобрался с дивом...Спасибо !

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