Вертикальное аккордеон меню на CSS3 и jQuery

Рисунок аккордеонаСкитаясь по необъятным просторам интернета, нашел отличное аккордеон меню, как и любое другое оно складывается и раскладывается по клику, показывая и скрывая ссылки на указанные страницы сайта или блога, но мне понравился его оригинальный дизайн и в этой заметке я хочу поделится своей находкой.
 Функционал реализован с помощью небольшого скрипта jQuery, который плавно открывает подразделы меню. Цветовая гамма подобрана отлично, но при необходимости ее легко можно сменить на индивидуальную.
 Вот, собственно, как оно, меню, выглядит
DEMO
  Теперь рассмотрим HTML структуру, CSS и jQeury скрипт-обработчик для этого меню. Исходник можно скачать по прямой ссылке в конце статьи.
1. Код HTML:
<ul class="accordion"> <!--Блок всего меню-->

    <li id="one" class="files"> <!--Блок раздела-->
        <a href="#one">Мои файлы<span>10</span></a> <!--Ссылка блока раздела-->
        <ul class="sub-menu"> <!--Блок подменю раздела-->
            <li><a href="#"><em>01</em>Файл<span>1</span></a></li> <!--Ссылки подменю-->
        </ul>
    </li>

    <li id="two" class="mail">
        <a href="#two">Мои картинки<span>20</span></a>
        <ul class="sub-menu">
            <li><a href="#"><em>01</em>Альбом<span>2</span></a></li>
        </ul>
    </li>

    <li id="three" class="cloud">
        <a href="#three">Сфера<span>30</span></a>
        <ul class="sub-menu">
            <li><a href="#"><em>01</em>Файлы сферы<span>3</span></a></li>
        </ul>
    </li>

    <li id="four" class="sign">
        <a href="#four">Вход</a>
        <ul class="sub-menu">
            <li><a href="#"><em>01</em>Войти на сайт</a></li>
        </ul>
    </li>

</ul>
Количество разделов и ссылок в подменю не ограничено, вы можете добавлять их сколько угодно.
2. CSS:
.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.accordion li {
list-style: none;
}

/* Определение и стили элементов */

.accordion li > a {
display: block;
position: relative;
min-width: 110px;
padding: 0 10px 0 40px;
height: 32px;

color: #fdfdfd;
font: bold 12px/32px Arial, sans-serif;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #6c6e74;
background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion > li:hover > a,
.accordion > li:target > a,
.accordion > li > a.active {
color: #3e5706;
text-shadow: 1px 1px 1px rgba(255,255,255, .2);
background: #a5cd4e;
background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
}
.accordion li > a span {
display: block;
position: absolute;
top: 7px;
right: 0;
padding: 0 10px;
margin-right: 10px;
font: normal bold 12px/18px Arial, sans-serif;
background: #404247;
border-radius: 15px;
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.accordion > li:hover > a span,
.accordion > li:target > a span,
.accordion > li > a.active span {
color: #fdfdfd;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #3e5706;
}

/* Иконки перед разделами */

.accordion > li > a:before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 24px;
height: 24px;
margin: 4px 8px;

background-repeat: no-repeat;
background-image: url(../img/icons.png); /* Ссылка на картинку-спрайт иконок */
background-position: 0px 0px;
}

.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before,
.accordion li.files > a.active:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before,
.accordion li.mail > a.active:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before,
.accordion li.cloud > a.active:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before,
.accordion li.sign > a.active:before { background-position: -72px -24px; }

/* Стили для под меню */

.sub-menu li a {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: #e5e5e5;
border-bottom: 1px solid #c9c9c9;
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.sub-menu li:hover a { background: #efefef; }

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: transparent;
border: 1px solid #c9c9c9;
box-shadow: none;
}
.sub-menu em {
position: absolute;
top: 0;
left: 0;
margin-left: 14px;
color: #a6a6a6;
font: normal 10px/32px Arial, sans-serif;
}

/* Скрываем неактивные блоки */

.accordion li > .sub-menu {
display: none;
}
.accordion li:target > .sub-menu {
display: block;
}
3. Если не подключена, подключаем к сайту библиотеку jQuery (не ниже версии 1.7.1) и далее добавляем скрипт-обработчик:
$(document).ready(function() {
// Указываем переменные
 var accordion_head = $('.accordion > li > a'),
     accordion_body = $('.accordion li > .sub-menu');

// Автоматически открывает первый раздел
// Чтобы не открывался можно удалить

 accordion_head.first().addClass('active').next().slideDown('normal');

// Функция клика
 accordion_head.on('click', function(event) {
// Скрывает открытый раздел по повторному клику
  event.preventDefault();
  if ($(this).attr('class') == 'active'){
     accordion_body.slideUp('normal')
     $(this).removeClass('active');
     return false;
     }
// Открывает следующий, скрывая открытый
  if ($(this).attr('class') != 'active'){
     accordion_body.slideUp('normal');
     $(this).next().stop(true,true).slideToggle('normal');
     accordion_head.removeClass('active');
     $(this).addClass('active');
     }
   });
  });
 Я взял на себя инициативу и добавил в скрипт функцию, которая скрывает подменю по повторному клику на ссылку раздела, в оригинале, на сайте создателя (DesignModo) этого чудесного меню, ее не было. Мне, почему-то так больше нравится, иначе постоянно виден какой-то из открытых разделов, а так, захотел - скрыл.
По многочисленным просьбам, в статье Улучшенный скрипт для вертикального аккордеон меню выкладываю другой(дополненный) вариант скрипта этого меню, с открытием раздела и подсветкой ссылки соответствующей текущей страницы.

Как установить данное аккордеон меню в блог на Blogger

1. Проверяете подключен ли к вашему блогу фрейиворк jQeury. Если нет и ранее вы этого не делали - подключаете, подробнее как это сделать читайте здесь.
2. Создаете новый гаджет HTML/JavaScript и размещаете в нем, HTML код менюшки, стили и скрипт.
CSS код в гаджете размешается между тегами <style>/</style>;
Скрипт - между тегами <script>/</script>
Никаких манипуляций непосредственно с кодом шаблона производить не нужно.

СКАЧАТЬ ZIP

©http://magentawave.com

46 комментариев:

  1. Действительно очень стильный аккордеон - пошел в закладки! Жалко что на мой блог не пойдет, уже "забит" скриптами под завязку!

    ОтветитьУдалить
    Ответы
    1. Почему же? Он (аккордеон) и без скрипта работать будет, правде не так элегантно, но будет. А скрипт самого меню не большой, ну а жКВери, думаю, у вас уже подключен ;) Хотя конечно когда скриптов уже "под завязку", то это будет лишним.

      Удалить
  2. Здравствуйте. Во первых спасибо за полезную информацию. Думаю попробовать эту менюшку, но вот возникло у меня несколько вопросов
    1. Что делать с папкой с картинками? Их нужно куда-то выкладывать и потом прописывать ссылки в код? или зачем они там нужны?
    2. Как сделать так чтобы цвет подпунктов изменялся при наведении на них мышкой? то есть до нажатия. в демо они не реагируют.

    ОтветитьУдалить
    Ответы
    1. 1. Да, в папке с картинками лежит спрайт изображений перед пунктами и фон для IE(но это уже рудимент) их нужно залить на хостинг и вставить ссылку в CSS (в CSS, который в статье выделено место где именно)
      2. Подпункты реагируют на наведение курсора - фон становится чуть светлее, стиль для них в этой строчке - .sub-menu li:hover a:{***}. Чтобы изменить также и цвет текста используйте св-во color

      Удалить
  3. Спасибо. Действительно симпатичная менюшка и очень удобная. Жаль для юкоза ничего подобного не нашла. Перекрасила ее в CSS в фиолетово-розовый так что смотрится довольно симпатично и на девчячьих блогах. Если кому нужна в этом цвете и неохота возиться, обращайтесь поделюсь:) Картинки пока не добавила, думаю их ведь все равно не хватит на нужные мне подпункты, но так тоже симпатично смотрится.

    ОтветитьУдалить
    Ответы
    1. Всегда пожалуйста :) Насчет юкоза, думаю туда тоже можно применять, только нужно посмотреть поподробнее, просто не пользовался я этой платформой и всех нюансов там не знаю. Насчет картинок, то вы можете сделать свой спрайт изображений, по аналогу имеющегося и добавить большее количество картинок, таких какие вам нужны.

      Удалить
  4. Плиз помогите уже всю голову сломала, как сделать так чтобы странички открывались в другой вкладке? Короче чтоб при нажатии на подпункт посетитель не уходил с открытой страницы если вас не затруднит может подскажете на конкретном примере ?
    Я понимаю что нужно что-то куда-то добавить или это в CSS делается, или это вообще невозможно?

    ОтветитьУдалить
    Ответы
    1. К нужным ссылкам добавьте target="_blank" и будет вам счастье.

      Удалить
  5. Анонимный13.01.13, 16:55

    А как сделать так чтобы в начале все разделы были закрыты.

    ОтветитьУдалить
    Ответы
    1. Вот эту строчку удалите:
      accordion_head.first().addClass('active').next().slideDown('normal');

      В скрипте, вроде, комментарием помечено...

      Удалить
  6. Вовка24.01.13, 4:01

    Вот еще одно аккордеон меню с бесконечным уровнем вложенности http://masscode.ru/index.php/k2/item/51-liharmonica

    ОтветитьУдалить
    Ответы
    1. Да, не плохой вариант, но стиль надо еще курить, как мне кажется....

      Удалить
  7. почему-то везде предлагают вариант меню, где в строковый li вкладывается блочный ul, что противоречит веб-стандартам...

    ОтветитьУдалить
    Ответы
    1. С чего вы взяли что LI - строчный? LI наследует значения родителя, а UL - по определению блочный элемент. Но вот впрочем, вам пример без списков, надеюсь по веб-стандартам :) http://www.magentawave.com/2012/05/super-dropdown-menu-on-css.html

      Удалить
  8. Анонимный06.03.13, 13:52

    посоветуйте плиз
    как из него трех уровневое сделать? и возможно ли это?

    ОтветитьУдалить
    Ответы
    1. Данное меню, дизайнерская разработка (ссылка в конце статьи) , не думаю что в нем предусмотрено расширение в эту сторону. Сделать, конечно же, можно все, но это уже будет совершенно другое меню.

      Удалить
  9. Анонимный24.03.13, 6:35

    А как сделать чтобы раскрывался не первый элемент, а второй или третий?

    ОтветитьУдалить
    Ответы
    1. В строке:
      accordion_head.first().addClass('active').next().slideDown('normal');
      Вместо функции .first(), используйте .eq() указывая порядковый номер нужной секции, при этом .eq(1) - будет открыт второй раздел, .eq(2) - третий и т.д.

      Удалить
  10. А можно сделать что-бы меню открывалось при наведение мыши,а не по клику?

    ОтветитьУдалить
    Ответы
    1. поменяла click на mouseover работает

      Удалить
    2. Да где-то так, но лучше использовать mouseenter и не забыть обулить анимацию. В итоге можно сделать так:
      http://notepad.cc/menu-hover

      Удалить
  11. Возможно ли сделать это меню в виде модуля для Joomla? Я думаю такой модудль был бы весьма востребован)

    ОтветитьУдалить
    Ответы
    1. Я тоже так думаю, но есть одна проблема - я в Joomla вообще не рублю, а тем более как там модули делать... Но если найдется достойное и востребованное решение, то обязательно дополню пост.

      Удалить
  12. Здравствуйте.ЧТО нужно удалить со скрипта чтобы получилось как демо миню
    у меня не получается, и я бы хотела цветом под свой шаблон.

    ОтветитьУдалить
    Ответы
    1. В ДЕМО установлен тот же скрипт что и статье, иначе какой тогда смысл в демонстрационной странице? Ничего оттуда удалять не нужно, в архиве исходника в "index.html" скрипт оригинала, скрипт из ДЕМО в архиве добавлен дополнительно как "Accordion_Menu_Other jQ.js", так это уже дополненный мной код.
      Все цвета выставляются в CSS там вы можете указать подходящие под ваш шаблон.

      P.S. В коде скрипта, в статье, уже добавлено подключение jQeury, если у вас он уже подключен, то повторно этого делать не нужно, может быть конфликт версий. Я обновлю статью и уберу эту строку, чтобы не было путаницы.

      Удалить
  13. спасибо большое!! меню уже вижу! у вас нажимаешь на мои файлы открывается под меню ,а когда нажимаешь второй раз на мои файлы, то под меню сворачивается и всё так плавно,как будто оно зафиксировано, а у меня нажимаю на мои файлы открывается под меню ,нажимаю второй раз на мои файлы под меню не сворачивается оно сворачивается когда нажимаю на 01 файл в под меню и страничка дергается при нажатии уходит всё время вверх или вниз подскажите пожалуйста что я сделала не верно.

    ОтветитьУдалить
    Ответы
    1. Мила, вы все сделали правильно, но забыли две очень важные вещи, о которых написано в статье.
      Первое:
      - Подключить к блогу фреймворк jQeury, простите, но я в упор не нашел этой строки в коде вашего шаблона. Поэтому читаем статью по ссылке ниже и подключаем
      http://www.magentawave.com/2013/03/jquery.html
      Второе:
      - А где скрипт-то? HTML меню в гаджете есть, стили тоже, а скрипта-обработчика нет ни в гаджете ни в шаблоне. Без него меню конечно будет работать, но именно так, как оно работает сейчас. Чтобы это исправить изучаете вот эту статью:
      http://www.magentawave.com/2012/03/how-chenge-gadget-in-template-blogger.html
      и добавляете скрипт в гаджет.
      Потом расскажите о результатах :) Должно все получится.

      Удалить
    2. Я в гаджет поместила скрипт и jQeury, но опять не получилось!!не знаю что опять сделала не правильно.

      Удалить
    3. Что же вы "поместили", а самое главное как!??
      Короче, вот так должно быть внутри гаджета: http://notepad.cc/specialformila
      это ГОТОВЫЙ код, просто скопируйте его и ЗАМЕНИТЕ тот что вы там у себя уже понапомещали, т.е. УДАЛИТЕ ТОТ И ВСТАВЬТЕ ЭТОТ. И будет вам счастье.

      Удалить
    4. СПАСИБО БОЛЬШОЕ ЗА ВАШУ ПОМОЩЬ!!ТЕПЕРЬ ЗНАЮ МОЮ ОШИБКУ.КОД HTML нужно писать последним . 1.jQeury. 2 скрипт. 3.CSS КОД
      меню получилось благодаря вам спасибо. прекрасных выходных!!

      Удалить
    5. Порядок не важен, важна правильная запись

      Удалить
  14. Подскажите, почему при нажатии на любой раздел меню, происходит перемещение страницы блога, как при нажатии на клавишу END? Всё остальное настроилось хорошо и красиво, спасибо большое:)

    ОтветитьУдалить
    Ответы
    1. Не подключен jQuery, не срабатывает скрипт из-за ошибки. Прверте код

      Удалить
  15. Здравствуйте!подскажите как сделать если у пункта меню нет подпунктов, то по нему осуществлялся переход на страницу

    ОтветитьУдалить
    Ответы
    1. Что такое реализовать необходимо немного изменить скрипт. Предлагали такое вариант:
      вместо event.preventDefault(); указать if($(this).siblings('ul').length>0){event.preventDefault();}

      Удалить
  16. Здравствуйте!скажите пожалуйста в меню аккордеон счёт файлов добавляется автоматически или нужно цифру изменять в ручную при каждом выпуске поста.
    благодарю за ранее

    ОтветитьУдалить
    Ответы
    1. Каждый раз в ручную... Да и чтобы сделать что-то подобное на JS это будет очень большой код ))

      Удалить
    2. Здравствуйте!!спасибо большое за ответ!!прекрасного денёчка!!

      Удалить
  17. как сделать? чтоб при переходе по пункту меню он оставался активным после открытия страницы

    ОтветитьУдалить
    Ответы
    1. В статье есть ссылка на улучшенный вариант скрипта для этого меню и , кстати сказать, он улучшен именно в этом направлении. Дублирую ссылку - http://www.magentawave.com/2012/12/new-script-for-accordion-menu.html - изучайте наздоровье.

      Удалить
  18. Можно ли сделать уже в главным пунктах ссылки на другие САЙТЫ?

    ОтветитьУдалить
  19. А как сделать чтобы все пункты были постоянно открыты, т.е. без анимации?

    ОтветитьУдалить
  20. Спасибо! Отличное меню! Отличная статья!

    ОтветитьУдалить
  21. Анонимный28.03.15, 11:40

    Добрый день! Нужно чтобы при клике на категорию работала ссылка(как и на подкатегорию), пожалуйста подскажите как сделать?

    ОтветитьУдалить
    Ответы
    1. Предлагали так:
      if($(this).siblings('ul').length > 0){event.preventDefault();}
      Строку - event.preventDefault(); замените на предложенную выше.

      Удалить

Следующее Предыдущее

BestProject