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

38

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

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

Дивитися Демо

Почнемо з того, що наше майбутнє меню для роботи використовує бібліотеку jQuery, так що необхідно її підключити до вашого сайту, якщо ви це ще не зробили. Можна завантажити останню версію з сайту розробника, а так само можна довантажувати jQuery на свою сторінку сайту Google або інших зовнішніх джерел. У прикладі ми будемо використовувати бібліотеку подгружаемую з сервісу Google, для цього вам необхідно всередині тегів або внизу html-сторінки перед закриваючим тегом досить розмістити таку строчку:

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

У цьому випадку ви отримаєте останню версію jQuery.

Далі ми вибудуємо html-каркас акордеона. Наше меню представляє з себе ненумерованний список

    вміщений у контейнер 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>
    • Головна
    • Пункт Меню – 1

      • Посилання – 1
      • Посилання – 2
      • Посилання – 3
      • Посилання – 4
      • Посилання – 5
      • Посилання – 6
      • Посилання – 7
      • Посилання – 8
    • Пункт Меню – 2

      • Посилання – 1
      • Посилання – 2
      • Посилання – 3
      • Посилання – 4
      • Посилання – 5
      • Посилання – 6
      • Посилання – 7
      • Посилання – 8
      • Посилання – 9
    • Пункт Меню – 3

      • Посилання – 1
      • Посилання – 2
      • Посилання – 3
      • Посилання – 4
      • Посилання – 5
    • Контакти

    Якщо можна так сказати, блок меню повністю автономний, тобто всі стилі 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.3 em;
    }
    .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.8 em;
    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);
    }

    .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.3 em;
    }
    .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:1px 0px 0px rgba(0, 0, 0, .5);
    font-size: 0.8 em;
    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), 1px 0px 0px 0px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 1px 0px 0px 0px rgba(255, 255, 255, .15);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 1px 0px 0px 0px rgba(255, 255, 255, .15);
    }

    Ширину всього блоку меню я виставив в max-width: 220px;, відповідно ви можете призначити будь-яке інше значення, в залежності від ширини бічної колонки вашого сайту або блогу. Градієнт фону, для основних пунктів меню, працює у всіх сучасних браузерах, для IE 9 і нижче не став додавати «милиці», так як ці версії, слава Богу, вмирають все швидше і швидше, так і без градієнтної заливки, в старих версіях ІЕшки, меню виглядає чудово.
    Цифрове позначення кількості посилань в кожному пункті меню, формується з допомогою псевдокласу :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("висота") === "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');
    });
    });
    

    $(document).ready(function () {
    $(“.sub > a”).click(function() {
    var ul = $(this).next(),
    clone = ul.clone().css({“height”:”auto”}).appendTo(“.mini-menu”),
    height = ul.css(“висота”) === “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’);
    });
    });

    Розмістити javascript можете все там же, в розділі між тегами , або внизу сторінки, в районі закриваючого тега .

    Всі активні посилання, тобто на які натиснули, будуть виділятися, щоб посилання були активними при переході, необхідно прикрутити до меню обробник cookies, але це вже інша історія, слідкуйте за оновленнями блогу і ви неодмінно дізнаєтеся.

    Всі! Чудове, компактне меню в стилі «акордеон» повністю готове до роботи. Дивимося ще раз живий приклад, завантажуємо исходники і експериментуємо, як душі завгодно і на скільки вистачить фантазії, продовжуємо невтомно творити, творити, творити…

    Оновлення: 30.03.2015

    ДемоИсходники

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

    З повагою, Андрій