Розглянемо приклад реалізації вертикального меню-аккордиона на jQuery. Глобальних відмінностей від прикладу «гармошки» на jQuery опублікованого раніше в нашому блозі немає. Можна сказати, що цей приклад може слугувати доповненням до того посту. Так чи інакше, давайте розглянемо приклад.

CSS-стилі меню:

ul.akkordeon {
width:500px;
list-style:none;
}
ul.akkordeon li > p {
cursor:pointer;
color:#778899;
font-size:12px;
font-family:Verdana;
border-bottom:1px dashed #c4c4c4;
}
ul.akkordeon li > div {
display:none;
padding:10px;
font-size:12px;
line-height:15px;
}

Розмітка меню:

  • Як вибрати нішу для свого першого бізнесу?

    Для багатьох потенційних підприємців і
    бізнесменів головною причиною довгого старту
    або взагалі відмови від власної справи є
    невміння підбирати ідеальну нішу для майбутньої діяльності.
    Це тільки на словах все виглядає просто і зрозуміло…

  • Новий вид розваг — квести в реальності

    Починаючи з минулого (2013) року, це нове в нашій
    країні розвага підкорює серця тисяч гравців
    по всій країні. Фанатів квестів в реальності стає
    все більше і більше. Так і самих компаній, які організовують
    незвичайне розвага, відкривається велика кількість…

  • Що змушує вас продовжувати працювати на дядю?

    Скільки буде існувати бізнес і робота за наймом,
    стільки і буде тривати спір між підприємцями
    і найманими працівниками. Одні вважають, що немає нічого
    краще стабільної роботи на когось…

  • Іншим прикладом регіональної компенсації

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

Код jQuery (Варіант 1):
Перший варіант припускає відкриття безлічі пунктів паралельно.

$(document).ready(function(){
$(‘ul.akkordeon li > p’).click(function(){
$(this).toggleClass(‘active’);
$(this).next(‘div’).slideToggle(200);
});
});

Код jQuery (Варіант 2):
У цьому варіанті меню згортається автоматично, тобто при активації одного пункту всі інші відкриті згортаються.

$(document).ready(function(){
$(‘ul.akkordeon2 li > p’).click(function(){
if(!$(this).hasClass(‘active’)){
$(‘ul.akkordeon2 li > p’).removeClass(‘active’).next(‘div’).slideUp();
$(this).addClass(‘active’);
$(this).next(‘div’).slideDown(200);
} else {
$(this).removeClass(‘active’).next(‘div’).slideUp();
}
});
});

Робочий приклад

Додав: htmaker, 26.11.2014 р.
(Ще не оцінили)

Завантаження…

Діліться з друзями:

См. також:


Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Список вибору на JQuery
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript

Коментарі

  • Євген пише:
    24.12.2016 в 23:35

    Здрастуйте, добрий гайд, спасибі допомогли. Але ви переплутали 1ый і 2й варіант(код jQuery).

    Відповісти

  • htmaker пише:
    25.12.2016 в 12:14

    Спасибі за відгук, виправив!

    Відповісти