5 Варіантів одного меню акордеон

41

Одного разу я виклав розгорнуту урок зі створення компактного меню в стилі акордеон, спадне по кліку, з вбудованим лічильником підпунктів. Меню вийшло досить симпатичним і функціональним. Зовнішній вид сформований виключно на CSS3, градієнтна заливка, зовнішня тінь блоку і т. д. Робота меню побудована на бібліотеці jQuery, виконуючий плагін вийшов дуже легким і простим у налаштуваннях, так що меню привернуло увагу користувачів. Але тут же стали з’являтися питання типу: як зробити спадне меню по наведенню, як прикрутити до нього обробник cookie і т. п.
Питання такого плану задаються і до інших записів, присвяченим створення меню, тому я вирішив зробити 5 різних варіантів меню «акордеон», в якійсь мірі відповідають запитам користувачів.

Компактное меню аккордеон

Повторюватися не буду, повний розклад і опис окремих параметрів опущу, так як основи не відрізняються від описаних в уроці. Функціональні розходження (способи відкриття і закриття) у виконуваному javascript, вони не настільки істотні, що думаю розібратися буде не важко.
Дивіться живий приклад, исходники js і css, вибирайте потрібний варіант і творіть, творіть, творіть…

1. Меню з вбудованим лічильником

Варіант меню акордеон з вбудованим лічильником посилань, розкривається і закривається по кліку. Лічильник посилань прихованих блоків відображається на основних пунктах, обробляється і виводиться за допомогою властивостей counter-increment, counter-reset і content.
При розкритті підпунктів, попередні розкриті блоки залишаються відкритими, закриваються по повторному натисканні:

  • Результат
  • HTML
  • CSS
  • JS
  • Головна
  • Пункт Меню - 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
  • Контакти
  • Головна
  • Пункт Меню – 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
  • Контакти
.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);
}

<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(){
$('.mini-menu > ul > li > a, .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(){
$(‘.mini-menu > ul > li > a, .sub a’).removeClass(‘active’);
$(this).addClass(‘active’);
}),
$(‘.sub ul li a’).click(function(){
$(‘.sub ul li a’).removeClass(‘active’);
$(this).addClass(‘active’);
});
});

2. Меню розкривається по кліку попередня панель при цьому закривається

Варіант «акордеона» розкривного по кліку, при цьому попередня панель, якщо вона була розкрита закривається, повторний клік по основним пунктом заблокований. В даному випадку лічильник посилань відсутня, замінив його активним перемикачем, що сигналізує про розкриття і закриття панелей:

  • Результат
  • HTML
  • CSS
  • JS
  • Головна
  • Пункт Меню - 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
  • Контакти
  • Головна
  • Пункт Меню – 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
  • Контакти
.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 {
display: none;
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 {
color:#514b92;
display: block;
font-size: 12px;
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 > a:before {
content:'•';
height:12px;
width:12px;
font-size: 1em;
display:inline-block;
position: absolute;
right: 10px;
top: 12px;
background: #333;
line-height: .8em;
color: red;
text-indent: 0;
text-align: center;
text-shadow:none;
font-weight: 500;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
-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 .sub > a.active:before{
color: #f2bd00;
}

.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 {
display: none;
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 {
color:#514b92;
display: block;
font-size: 12px;
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 > a:before {
content:’•’;
height:12px;
width:12px;
font-size: 1em;
display:inline-block;
position: absolute;
right: 10px;
top: 12px;
background: #333;
line-height: .8em;
color: red;
text-indent: 0;
text-align: center;
text-shadow:none;
font-weight: 500;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
-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);
}
/* активний перемикач */
.mini-menu .sub > a.active:before{
color: #f2bd00;
}

$(document).ready(function () {
$('.sub > a').click(function(){
if ($(this).attr('class') != 'active'){
$('.sub ul').slideUp();
$(this).next().slideToggle();
}
return false;
});
$('.mini-menu > ul > li > a').click(function(){
$('.mini-menu > ul > li > a, .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(){
if ($(this).attr(‘class’) != ‘active’){
$(‘.sub ul’).slideUp();
$(this).next().slideToggle();
}
return false;
});
$(‘.mini-menu > ul > li > a’).click(function(){
$(‘.mini-menu > ul > li > a, .sub a’).removeClass(‘active’);
$(this).addClass(‘active’);
}),
$(‘.sub ul li a’).click(function(){
$(‘.sub ul li a’).removeClass(‘active’);
$(this).addClass(‘active’);
});
});

3. Меню розкривається і закривається по кліку

Варіант меню «акордеон» з більш розширеним функціоналом, структура залишилася та ж, додав можливість закриття панелей по повторному натисканні, так само при розкритті наступних панелей попередні закриваються автоматом, як і в інших варіантах активні пункти виділяються і задіяний активний перемикач на основних пунктах містять посилання:

  • Результат
  • HTML
  • CSS
  • JS
  • Головна
  • Пункт Меню - 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
  • Контакти
  • Головна
  • Пункт Меню – 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
  • Контакти
.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.75);
-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 {
margin: 0;
padding:0;
list-style: none;
}
.mini-menu > ul > li {
position: relative;
}
.mini-menu > ul > li > a {
display: block;
padding: .7em 1em;
outline: 0;
border-bottom: 1px solid #222;
background: #333;
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);
color:#C9C9C9;
text-decoration: none;
text-shadow: 1px 1px 3px #111;
font-weight: normal;
}
.mini-menu > ul > li > a:hover,
.mini-menu > ul > li > a.active {
color:#f2bd00;
}
.mini-menu .sub ul {
display: none;
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 {
display: block;
padding: .7em 1em;
border-bottom: 1px dotted #bababa;
color:#514b92;
font-size: 12px;
text-decoration: none;
}
.mini-menu .sub ul li a:hover,
.mini-menu .sub ul li a.active {
padding-left: 1.3 em;
background: #d8d8d8;
color: red;
}
.mini-menu .sub ul li a:after{
float: left;
margin-right:6px;
content: "»";
line-height: 12px;
}
.mini-menu .sub > a:before {
content:'•';
height:12px;
width:12px;
font-size: 1em;
display:inline-block;
position: absolute;
right: 10px;
top: 12px;
background: #333;
line-height: .8em;
color: red;
text-indent: 0;
text-align: center;
text-shadow:none;
font-weight: 500;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
-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 .sub > a.active:before{
color: #f2bd00;
}

.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.75);
-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 {
margin: 0;
padding:0;
list-style: none;
}
.mini-menu > ul > li {
position: relative;
}
.mini-menu > ul > li > a {
display: block;
padding: .7em 1em;
outline: 0;
border-bottom: 1px solid #222;
background: #333;
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);
color:#C9C9C9;
text-decoration: none;
text-shadow: 1px 1px 3px #111;
font-weight: normal;
}
.mini-menu > ul > li > a:hover,
.mini-menu > ul > li > a.active {
color:#f2bd00;
}
.mini-menu .sub ul {
display: none;
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 {
display: block;
padding: .7em 1em;
border-bottom: 1px dotted #bababa;
color:#514b92;
font-size: 12px;
text-decoration: none;
}
.mini-menu .sub ul li a:hover,
.mini-menu .sub ul li a.active {
padding-left: 1.3 em;
background: #d8d8d8;
color: red;
}
.mini-menu .sub ul li after a: {
float: left;
margin-right:6px;
content: “»”;
line-height: 12px;
}
.mini-menu .sub > a:before {
content:’•’;
height:12px;
width:12px;
font-size: 1em;
display:inline-block;
position: absolute;
right: 10px;
top: 12px;
background: #333;
line-height: .8em;
color: red;
text-indent: 0;
text-align: center;
text-shadow:none;
font-weight: 500;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
-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);
}
/* активний перемикач */
.mini-menu .sub > a.active:before{
color: #f2bd00;
}

$(document).ready(function () {
$('.sub > a').click(function(){
$('.sub ul').slideUp();
if ($(this).next().is(":visible")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
return false;
});
$('.mini-menu > ul > li > a').click(function(){
$('.mini-menu > ul > li > a, .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(){
$(‘.sub ul’).slideUp();
if ($(this).next().is(“:visible”)){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
return false;
});
$(‘.mini-menu > ul > li > a’).click(function(){
$(‘.mini-menu > ul > li > a, .sub a’).removeClass(‘active’);
$(this).addClass(‘active’);
}),
$(‘.sub ul li a’).click(function(){
$(‘.sub ul li a’).removeClass(‘active’);
$(this).addClass(‘active’);
});
});

4. Меню «акордеон» розкривається при наведенні

Дуже багато питань, як зробити спадне меню при наведенні. Все досить просто, достатньо змінити функцію .click ().hover() і ряд параметрів у виконуваному js. При наведенні курсору на основні пункти меню панелі розкриваються, при переході на інший пункт, попередня панель автоматично закривається:

  • Результат
  • HTML
  • CSS
  • JS
   
  • Головна
  • Пункт Меню - 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
  • Контакти
  • Головна
  • Пункт Меню – 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
  • Контакти
.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.75);
-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 {
margin: 0;
padding:0;
list-style: none;
}
.mini-menu > ul > li {
position: relative;
}
.mini-menu > ul > li > a {
display: block;
padding: .7em 1em;
outline: 0;
border-bottom: 1px solid #222;
background: #333;
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);
color:#C9C9C9;
text-decoration: none;
text-shadow: 1px 1px 3px #111;
font-weight: normal;
}
.mini-menu > ul > li > a:hover,
.mini-menu > ul > li > a.active {
color:#f2bd00;
}
.mini-menu .sub ul {
display: none;
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 {
display: block;
padding: .7em 1em;
border-bottom: 1px dotted #bababa;
color:#514b92;
font-size: 12px;
text-decoration: none;
}
.mini-menu .sub ul li a:hover,
.mini-menu .sub ul li a.active {
padding-left: 1.3 em;
background: #d8d8d8;
color: red;
}
.mini-menu .sub ul li a:after{
float: left;
margin-right:6px;
content: "»";
line-height: 12px;
}
.mini-menu .sub > a:before {
content:'•';
height:12px;
width:12px;
font-size: 1em;
display:inline-block;
position: absolute;
right: 10px;
top: 12px;
background: #333;
line-height: .8em;
color: red;
text-indent: 0;
text-align: center;
text-shadow:none;
font-weight: 500;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
-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 .sub > a.active:before{
color: #f2bd00;
}

.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.75);
-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 {
margin: 0;
padding:0;
list-style: none;
}
.mini-menu > ul > li {
position: relative;
}
.mini-menu > ul > li > a {
display: block;
padding: .7em 1em;
outline: 0;
border-bottom: 1px solid #222;
background: #333;
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);
color:#C9C9C9;
text-decoration: none;
text-shadow: 1px 1px 3px #111;
font-weight: normal;
}
.mini-menu > ul > li > a:hover,
.mini-menu > ul > li > a.active {
color:#f2bd00;
}
.mini-menu .sub ul {
display: none;
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 {
display: block;
padding: .7em 1em;
border-bottom: 1px dotted #bababa;
color:#514b92;
font-size: 12px;
text-decoration: none;
}
.mini-menu .sub ul li a:hover,
.mini-menu .sub ul li a.active {
padding-left: 1.3 em;
background: #d8d8d8;
color: red;
}
.mini-menu .sub ul li after a: {
float: left;
margin-right:6px;
content: “»”;
line-height: 12px;
}
.mini-menu .sub > a:before {
content:’•’;
height:12px;
width:12px;
font-size: 1em;
display:inline-block;
position: absolute;
right: 10px;
top: 12px;
background: #333;
line-height: .8em;
color: red;
text-indent: 0;
text-align: center;
text-shadow:none;
font-weight: 500;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
-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);
}
/* активний перемикач */
.mini-menu .sub > a.active:before{
color: #f2bd00;
}

$(document).ready(function(){
$('.sub').hover(
function(){
if ($('> a',this).attr('class') != 'active'){
$('.sub ul').slideUp();
$('a',this).next().slideToggle();
$('.mini-menu > ul > li > a').removeClass('active');
$('> a',this).addClass('active');
}
},
function(){
$('.sub ul').slideUp();
$('.mini-menu > ul > li > a').removeClass('active');
});
$('.sub ul > li > a').click(function(){
$('.sub ul > li > a').removeClass('active');
$(this).addClass('active');
});
});

$(document).ready(function(){
$(‘.sub’).hover(
function(){
if ($(‘> a’,this).attr(‘class’) != ‘active’){
$(‘.sub ul’).slideUp();
$(‘a’,this).next().slideToggle();
$(‘.mini-menu > ul > li > a’).removeClass(‘active’);
$(‘> a’,this).addClass(‘active’);
}
},
function(){
$(‘.sub ul’).slideUp();
$(‘.mini-menu > ul > li > a’).removeClass(‘active’);
});
$(‘.sub ul > li > a’).click(function(){
$(‘.sub ul > li > a’).removeClass(‘active’);
$(this).addClass(‘active’);
});
});

5. Меню акордеон з jQuery Cookie

Вертикальне меню в стилі акордеон розкривається і закривається по кліку попередні панелі при цьому закриваються автоматом. За допомогою jQuery Cookie при переході на іншу сторінку, активні пункти і розкриті панелі зберігають свій стан. Для роботи з куками використовуємо спеціальний jQuery плагін, який необхідно підключити до сторінки вашого сайту, точно так само як і саму бібліотеку jQuery. Якщо бібліотеки ви можете підключити Google, то плагін jQuery Cookie необхідно завантажити, закинути в папку, де у вас знаходяться js і вже потім підключити до сторінки, наприклад ось так:

<script type="text/javascript" src="js/jquery.cookie.js">
  • Результат
  • HTML
  • CSS
  • JS
#menu {
width:220px;
border:1px solid #999;
margin:0 auto;
padding: 0;
list-style: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-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
}
#menu li a {
display:block;
position: relative;
padding:10px 15px;
background:#ccc;
border-top:1px solid #eee;
border-bottom:1px solid #999;
text-decoration:none;
text-shadow: 0px 1px 1px #ffffff;
color:#606060
}
#menu li a:hover,
#menu li a.active {
background:rgb(190, 190, 190);
text-shadow: 0px 1px 1px #ffffff;
color:#3b3b3b
}
#menu ul li {
display:none;
list-style: none;
margin: 0;
padding:0
}
#menu li ul li a {
font-size: 12px;
padding:8px 15px;
background:#ececec;
border-bottom:1px dotted #ccc
}
#menu li ul li a:after {
content: "»";
float: left;
margin-right:6px;
line-height: 1em
}
#menu li ul li a:hover,
#menu li ul li a.active {
background:#dedede;
color:green;
padding-left:18px
}
/* перемикач */
#menu li.sub > a:before {
content:";
height:6px;
width:6px;
display:block;
border:1px solid #606060;
border-right-width:0;
border-top-width:0;
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
position:absolute;
right:20px;
top:14px
}
/* активний перемикач */
#menu li.sub > a:hover:before,
#menu li.sub > a.active:before{
border:1px solid #00a00c;
border-right-width:0;
border-top-width:0;
}

#menu {
width:220px;
border:1px solid #999;
margin:0 auto;
padding: 0;
list-style: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-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
}#menu li a {
display:block;
position: relative;
padding:10px 15px;
background:#ccc;
border-top:1px solid #eee;
border-bottom:1px solid #999;
text-decoration:none;
text-shadow: 0px 1px 1px #ffffff;
color:#606060
}#menu li a:hover,
#menu li a.active {
background:rgb(190, 190, 190);
text-shadow: 0px 1px 1px #ffffff;
color:#3b3b3b
}#menu ul li {
display:none;
list-style: none;
margin: 0;
padding:0
}#menu li ul li a {
font-size: 12px;
padding:8px 15px;
background:#ececec;
border-bottom:1px dotted #ccc
}
#menu li ul li after a: {
content: “»”;
float: left;
margin-right:6px;
line-height: 1em
}
#menu li ul li a:hover,
#menu li ul li a.active {
background:#dedede;
color:green;
padding-left:18px
}
/* перемикач */
#menu li.sub > a:before {
content:”;
height:6px;
width:6px;
display:block;
border:1px solid #606060;
border-right-width:0;
border-top-width:0;
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
position:absolute;
right:20px;
top:14px
}
/* активний перемикач */
#menu li.sub > a:hover:before,
#menu li.sub > a.active:before{
border:1px solid #00a00c;
border-right-width:0;
border-top-width:0;
}

<script type="text/javascript">
$(document).ready(function () {
var checkCookie = $.cookie("sub-nav");
if (checkCookie != "") {
$('#menu > li.sub > a:eq('+checkCookie+')').addClass('active').next().show();
}
$('#menu > li.sub > a').click(function(){
var navIndex = $('#menu > li.sub > a').index(this);
$.cookie("sub-nav", navIndex);
$('#menu li ul').slideUp();
if ($(this).next().is(":visible")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
$('#menu li a').removeClass('active');
$(this).addClass('active');
return false;
});
var checkCookie = $.cookie("sub-link");
if (checkCookie != "") {
$('#menu > li.sub > ul li a:eq('+checkCookie+')').addClass('active');
}
$('.sub ul li a').click(function(){
var subIndex = $('.sub ul li a').index(this);
$.cookie("sub-link", subIndex);
$('.sub ul li a').removeClass('active');
$(this).addClass('active');
});
});

$(document).ready(function () {
var checkCookie = $.cookie(“sub-nav”);
if (checkCookie != “”) {
$(‘#menu > li.sub > a:eq(‘+checkCookie+’)’).addClass(‘active’).next().show();
}
$(‘#menu > li.sub > a’).click(function(){
var navIndex = $(‘#menu > li.sub > a’).index(this);
$.cookie(“sub-nav”, navIndex);
$(‘#menu li ul’).slideUp();
if ($(this).next().is(“:visible”)){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
$(‘#menu li a’).removeClass(‘active’);
$(this).addClass(‘active’);
return false;
});
var checkCookie = $.cookie(“sub-link”);
if (checkCookie != “”) {
$(‘#menu > li.sub > ul li a:eq(‘+checkCookie+’)’).addClass(‘active’);
}
$(‘.sub ul li a’).click(function(){
var subIndex = $(‘.sub ul li a’).index(this);
$.cookie(“sub-link”, subIndex);
$(‘.sub ul li a’).removeClass(‘active’);
$(this).addClass(‘active’);
});
});

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

Ну і останнім акордом у цій статті, як завжди буде посилання на архів з исходниками, які я дбайливо упакував і виклав у хмару на Яндекс.Диск, звідки всі кому воно треба, можете їх і забрати:

Завантажити Вихідні Коди

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

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: