Главная » jQuery » 5 Вариантов одного меню аккордеон

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

Однажды я выложил развернутый урок по созданию компактного в стиле , раскрывающееся по клику, со встроенным счётчиком подпунктов. Меню получилось довольно симпатичным и функциональным. Внешний вид сформирован исключительно на CSS3, градиентная заливка, внешняя тень блока и т.д. Работа меню построена на библиотеке , исполняющий плагин получился очень лёгким и простым в настройках, так что меню привлекло внимание пользователей. Но тут же стали появляться вопросы типа: как сделать меню раскрывающееся по наведению, как прикрутить к нему обработчик cookie и т.п.
Вопросы такого плана задаются и к другим записям, посвященным созданию меню, поэтому я решил сделать 5 разных вариантов меню «аккордеон», в какой-то мере отвечающие запросам пользователей.
 
Компактное меню аккордеон
 
Повторяться не буду, полный расклад и описание отдельных параметров опущу, так как основы не отличаются от описанных в уроке. Функциональные различия (способы открытия и закрытия) в исполняемом javascript, они настолько не существенны, что думаю разобраться будет не трудно.
Смотрите живой пример, исходники js и css, выбирайте понравившийся вариант и творите, творите, творите...

1. Меню со встроенным счётчиком

Вариант меню аккордеон со встроенным счётчиком ссылок, раскрывается и закрывается по клику. Счетчик ссылок скрытых блоков отображается на основных пунктах, обрабатывается и выводится с помощью свойств counter-increment, counter-reset и content.
При раскрытии подпунктов, предыдущие раскрытые блоки остаются открытыми, закрываются по повторному клику:
 

<div class="mini-menu">
    <ul>
        <li>
            <a href="#">Главная</a>
        </li>
        <li class="sub">
            <a href="#">Пункт Меню - 1</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>
            </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>
.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);
}
<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(){
	   $('.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');
	});
});
 </script>

 

2. Меню раскрывается по клику предыдущая панель при этом закрывается

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

<div class="mini-menu">
    <ul>
        <li>
            <a href="#">Главная</a>
        </li>
        <li class="sub">
            <a href="#">Пункт Меню - 1</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>
            </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>
.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.3em;
}
.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;
}
<script type="text/javascript">
$(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');
	});
});
</script>

 

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

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

<div class="mini-menu">
    <ul>
        <li>
            <a href="#">Главная</a>
        </li>
        <li class="sub">
            <a href="#">Пункт Меню - 1</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>
            </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>
.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.3em;
    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;
}
<script type="text/javascript">
$(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');
	});
});
</script>

 

4. Меню «аккордеон» раскрывается при наведении

Очень много вопросов, как сделать меню раскрывающееся при наведении. Всё довольно просто, достаточно изменить функцию .click() на .hover() и ряд параметров в исполняемом js. При наведении курсора на основные пункты меню панели раскрываются, при переходе на другой пункт, предыдущая панель автоматом закрывается:
 

   <div class="mini-menu">
        <ul>
            <li>
                <a href="#">Главная</a>
            </li>
            <li class="sub">
                <a href="#">Пункт Меню - 1</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>
                </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>
.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.3em;
    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;
}
<script type="text/javascript">
$(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');
    });
});
 </script>

 

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

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

<script type="text/javascript" src="js/jquery.cookie.js"></script>

 

<ul id="menu">
   <li><a href="#">Просто ссылка</a></li>
    <li class="sub"><a href="#">Пункт Меню - 1</a>
      <ul>
        <li><a href="#">Ссылка 1-1</a></li>
        <li><a href="#">Ссылка 1-2</a></li>
        <li><a href="#">Ссылка 1-3</a></li>
      </ul>
    </li>
    <li class="sub"><a href="#">Пункт Меню - 2</a>
      <ul>
        <li><a href="#">Ссылка 2-1</a></li>
        <li><a href="#">Ссылка 2-2</a></li>
      </ul>
    </li>
    <li class="sub"><a href="#">Пункт Меню - 3</a>
      <ul>
        <li><a href="#">Ссылка 3-1</a></li>
        <li><a href="#">Ссылка 3-1</a></li>
        <li><a href="#">Ссылка 3-1</a></li>
        <li><a href="#">Ссылка 3-1</a></li>
      </ul>
    </li>
    <li><a href="#">Пункт Меню - 4</a></li>
</ul>
#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 li ul {
    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;
}
<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');
    });
    });
</script>

 
Всё, теперь куки будут записываться на стороне клиента, состояние открытых панелей и активных пунктов сохранятся при переходе.
В последнем варианте изменил внешний вид меню, выполнил его в светлых тонах, для примера гибкости настроек формирования с помощью css, используя исходники в виде шаблона, экспериментируя с параметрами, вам не составит большого труда добиться любых результатов.

Ну и последним аккордом в этой статье, как всегда будет ссылка на архив с исходниками, которые я бережно упаковал и выложил в облако на Яндекс.Диск, откуда все кому оно надо, можете их и забрать:

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

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

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

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

24 комментария
  1. .:

    У меня почему-то при клике на каой либо раздел он не разворачиваеться.

    Ответить
    • котярус:

      Возможно потому, что Вы забыли jQuery библиотеку подключить.

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

      Ответить
  2. Андрей:

    Успешно использовал вариант 3, спасибо!

    Пытался применить вариант 5, но, к сожалению, мне не удалось добиться, чтобы при загрузке страницы все раскрывающиеся пункты были свернуты. При тестировании меню из архива раскрыт Пункт Меню — 2. Это можно как-тог победить?

    Ответить
    • driver:

      Андрей, здравствуйте.

      Специально скачал и протестировал все варианты в разных браузерах. Могу ответственно заявить, что всё работает без косяков, т.е. как расписано в статье и показано в демо. Даже не представляю, что там у вас )))). Так что помочь ничем не могу...

      Ответить
  3. Здравствуйте! Подключил меню на сайт, но позиция сохраняется только после нескольких кликов по пункте (меню №5) Не подскажете в чем может быть проблема?

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

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