Розглянемо приклад реалізації вертикального меню-аккордиона на 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).
Відповісти
25.12.2016 в 12:14
Спасибі за відгук, виправив!
Відповісти