Главная » Уроки » Вертикальное меню в стиле аккордеон CSS и jQuery

Вертикальное меню в стиле аккордеон CSS и jQuery

Различными блоками, менюшками выполненных в стиле «», сейчас уже никого не удивишь. Предлагается масса интересных решений и техник исполнения, как с использованием , так и основанных исключительно на CSS.
Сегодня хочу познакомить вас с ещё одним вариантом компактного, вертикального меню в стиле «аккордеон», которое отлично впишется в боковую колонку любого сайта. Работа меню основана на небольшом jQuery плагине в связке с некоторыми современными свойствами CSS3, для формирования внешнего вида раскрывающегося блока ссылок, так что пресловутая кроссбраузерность элемента обеспечена))).

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

Начнём с того, что наше будущее меню для работы использует библиотеку jQuery, так что необходимо её подключить к вашему сайту, если вы это ещё не сделали. Можно скачать самую последнюю версию с сайта разработчика, а так же можно подгружать jQuery на свою страницу с сайта Google или других внешних источников. В примере мы будем использовать библиотеку подгружаемую с сервиса Google, для этого вам необходимо внутри тегов <head></head> или внизу html-страницы перед закрывающим тегом достаточно разместить такую строчку:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

В этом случае вы получите самую последнюю версию jQuery.

Далее мы выстроим html-каркас аккордеона. Наше меню представляет из себя неупорядоченный список <ul>, помещённый в контейнер div с определённым классом, не будем особо выдумывать и присвоим этому классу вполне логичное имя — mini-menu. В дальнейшем, непосредственно в CSS, мы определим правила и свойства для этого класса, тем самым сформируем стили и внешний вид элементов будущего меню.

<div class="mini-menu">
    <ul>
        <li>
            <a href="http://dbmast.ru">Главная</a>
        </li>
        <li class="sub">
            <a href="#">Пункт Меню - 1</a>
            <ul>
               <li><a href="http://dbmast.ru">Ссылка - 1</a></li>
               <li><a href="#">Ссылка - 2</a></li>
               <li><a href="#">Ссылка - 3</a></li>
               <li><a href="#">Ссылка - 4</a></li>
               <li><a href="#">Ссылка - 5</a></li>
               <li><a href="#">Ссылка - 6</a></li>
               <li><a href="#">Ссылка - 7</a></li>
               <li><a href="#">Ссылка - 8</a></li>
            </ul>
        </li>
        <li class="sub">
            <a href="#">Пункт Меню - 2</a>
            <ul>
               <li><a href="#">Ссылка - 1</a></li>
               <li><a href="#">Ссылка - 2</a></li>
               <li><a href="#">Ссылка - 3</a></li>
               <li><a href="#">Ссылка - 4</a></li>
               <li><a href="#">Ссылка - 5</a></li>
               <li><a href="#">Ссылка - 6</a></li>
               <li><a href="#">Ссылка - 7</a></li>
               <li><a href="#">Ссылка - 8</a></li>
               <li><a href="#">Ссылка - 9</a></li>
            </ul>
        </li>
        <li class="sub">
            <a href="#">Пункт Меню - 3</a>
            <ul>
                <li><a href="#">Ссылка - 1</a></li>
                <li><a href="#">Ссылка - 2</a></li>
                <li><a href="#">Ссылка - 3</a></li>
                <li><a href="#">Ссылка - 4</a></li>
                <li><a href="#">Ссылка - 5</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Контакты</a>
        </li>
    </ul>
</div>

Если можно так сказать, блок меню полностью автономный, то есть все стили css прописаны конкретно для него и никак не будут влиять на общие стили вашего сайта, конечно если класс mini-menu не совпадёт с имеющимся в вашей таблице стилей классом, тогда просто обзывайте его как-нибудь по-другому. Далее, размещаете div-контейнер со всем содержимым туда где вы хотите видеть меню-аккордеон.
Чтобы меню выглядело так, как мы это задумали, с помощью стилей CSS, сформируем внешний вид, определим размеры, цвет фона, изменения ссылок при наведении и другие параметры.

.mini-menu{
    margin: 0px auto;
    max-width: 220px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.7);
    -webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
    box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    font: normal 14px Helvetica, Arial, sans-serif;
}
.mini-menu ul {
    list-style: none;
    margin: 0;
    padding:0;
    text-align:left;
}
.mini-menu > ul > li {
    position: relative;
}
.mini-menu > ul > li > a {
    display: block;	
    outline: 0;	
    padding: .7em 1em;	
    text-decoration: none;	
    color:#C9C9C9;	
    font-weight: normal;	
    text-shadow: 1px 1px 3px #111;	
    background: #333;
    border-bottom: 1px solid #222;
    background-image:-webkit-linear-gradient(#444, #333);
    background-image:-moz-linear-gradient(#444, #333);
    background-image:-ms-linear-gradient(#444, #333);
    background-image:linear-gradient(#444, #333);
    -webkit-box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
    -moz-box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
    box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
}
.mini-menu > ul > li > a:hover,
.mini-menu > ul > li > a.active {
    color:#f2bd00;
}
.mini-menu .sub > ul {
    counter-reset: items;
    height: 0;
    overflow: hidden;
    background: #eee;
    -webkit-box-shadow:inset 0 0 50px #bbb;
    -moz-box-shadow:inset 0 0 50px #bbb;
    box-shadow:inset 0 0 50px #bbb;
}
.mini-menu .sub > ul > li > a {
    counter-increment: items;
    color:#514b92;
    font-size: 12px;
    display: block;
    text-decoration: none;
    padding: .7em 1em;
    border-bottom: 1px dotted #bababa;
}
.mini-menu .sub > ul > li > a:hover,
.mini-menu .sub > ul > li > a.active {
    background: #d8d8d8;
    color: red;
    padding-left: 1.3em;
}
.mini-menu .sub > ul > li > a:after{
    content: "»";
    float: left;
    margin-right:6px;
    line-height: 12px;
}
.mini-menu .sub > ul:after {
    content: counter(items);
    font-size: 1em;
    display:inline-block;
    position: absolute;
    right: 10px;
    top: 6px;
    background: #333;
    line-height: 1em;
    padding: .5em .7em;
    color: #c9c9c9;
    text-indent: 0;
    text-align: center;
    text-shadow:0px 1px 0px rgba(0, 0, 0, .5);
    font-size: 0.8em;
    font-weight: 500;
    -webkit-border-radius:25%;
    -moz-border-radius:25%;
    border-radius:25%;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
}

Ширину всего блока меню я выставил в max-width: 220px;, соответственно вы можете присвоить любое другое значение, в зависимости от ширины боковой колонки вашего сайта или блога. Градиент фона, для основных пунктов меню, работает во всех современных браузерах, для IE 9 и ниже не стал добавлять «костыли», так как эти версии, слава Богу, умирают всё быстрее и быстрее, да и без градиентной заливки, в старых версиях IEшки, меню выглядит замечательно.
Цифровое обозначение количества ссылок, находящихся в каждом пункте меню, формируется с помощью псевдокласса :after в селекторе .mini-menu .sub > ul:after, и генерируется через свойство content: counter(items);. Это значит, что добавляя очередной подпункт в какой-либо из блоков, цифра справа на основном пункте меню, будет меняться в соответствии количества ссылок в этом блоке.
Классом .sub обозначены пункты списка имеющие подпункты, исполняемый js завязан на работу именно с этим классом.

Каркас меню мы выстроили, внешний вид оформили, все функции определили, остаётся только запустить «Аккордеон». Для этого необходимо подключить к странице небольшой JQuery-плагин:

<script type="text/javascript">
    $(document).ready(function () {
        $(".sub > a").click(function() {
            var ul = $(this).next(),
                    clone = ul.clone().css({"height":"auto"}).appendTo(".mini-menu"),
                    height = ul.css("height") === "0px" ? ul[0].scrollHeight + "px" : "0px";
            clone.remove();
            ul.animate({"height":height});
            return false;
        });
           $('.mini-menu > ul > li > a').click(function(){
           $('.sub a').removeClass('active');
           $(this).addClass('active');
        }),
           $('.sub ul li a').click(function(){
           $('.sub ul li a').removeClass('active');
           $(this).addClass('active');
        });
    });
</script>

Разместить javascript можете всё там же, в разделе между тегами <head></head>, или внизу странички, в районе закрывающего тега </body>.

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

Всё! Замечательное, компактное меню в стиле «аккордеон» полностью готово к работе. Смотрим ещё раз живой пример, скачиваем исходники и экспериментируем, как душе угодно и на сколько хватит фантазии, продолжаем без устали творить, творить, творить...

Обновление: 30.03.2015

Для всех страждущих, набросал 5 вариантов этого меню, с различными способами раскрытия и закрытия подпунктов, а так же к одному из них прикрутил, для примера, обработку cookie, чтобы при переходе по ссылке, запоминалось состояние активных панелей.

С уважением, Андрей

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

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

70 комментариев
  1. skupev says:

    Здравствуйте ! Изменил .click (function ()

    на:

    .hover (function () . Всё работает, только до менюшек теперь добраться не могу. ОТкрывается при наведении, а как перевожу на пункты меню и закрывается сразу.Не успеваю ни чего сделать. И подскажите, в каком месте поменять фон серого на синий ? Хочется чтоб было под цвет сайта . Спасибо! )

    Ответить
  2. skupev says:

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

    Ответить
  3. skupev says:

    Хотелось что бы было Цифровое обозначение количества ссылок, находящихся в каждом пункте меню . Если это возможно. Как тут. Не поможете ? кусочек кода может нужно для этого?

    Ответить
  4. Rew says:

    Отличное меню

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

Отправляя к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