Простое «аккордеон» меню на jQuery

Представляю 2 "аккордеон" меню с одинаковой анимацией раскрытия, созданные с использованием библиотеки jQuery.

Левое меню раскрывается при клике на заголовке, а правое раскрывается при наведении на заголовок списка. Верстка обоих меню содержит все элементы, необходимые для демонстрации скрипта, а также примерные стили и комментарии на русском языке. Подключена библиотека jQuery версия 1.9.1.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Меню аккордион на jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
<!--//---------------------------------+
//  Developed by freeden_codomaza@mail.ru
//  // --------------------------------->
$(document).ready(function()
{
	// расскрывает элемент с классом "menu_body" 
	// при клике на параграфе с классом "menu_head" (левое меню)
	$("#firstpane li.menu_head").click(function()
	{
		$(this).children().slideToggle(400);
		$(this).siblings().children().slideUp("slow");

	});
	// расскрывает элемент с классом "menu_body"
	// при наведении курсора на параграф (правое меню)
	$("#secondpane li.menu_head").mouseover(function()
	{
		$(this).children().slideDown(400);
		$(this).siblings().children().slideUp("slow");
	});
});
</script>
<style type="text/css">
.menu_list {
	width: 200px;
}
.menu_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
	font-weight:bold;
	background: #CC99CC;
}
.menu_body {
	display:none;
}
.menu_body a{
	display:block;
	color:#990000;
	background-color:#FFCCFF ;
	padding-left:20px;
	font-weight:bold;
	text-decoration:none;
}
.menu_body a:hover{
	color: #FFFF99;
	text-decoration:none;
}
</style>
</head>
<body>
<div style="float:left" > <!--Это div содержащий левое меню-->
  <p><strong> Работает при клике </strong></p>
    <ul id="firstpane" class="menu_list"> <!--Здесь начинается разметка для левого меню-->
      <li class="menu_head">Заголовок 1
        <ul class="menu_body">
          <li><a href="#">Ссылка-1</a></li>
          <li><a href="#">Ссылка-2</a></li>
          <li><a href="#">Ссылка-3</a></li>
        </ul>
      </li>
      <li class="menu_head">Заголовок 2
        <ul class="menu_body">
          <li><a href="#">Ссылка-1</a></li>
          <li><a href="#">Ссылка-2</a></li>
          <li><a href="#">Ссылка-3</a></li>
        </ul>
      </li>
      <li class="menu_head">Заголовок 3
        <ul class="menu_body">
          <li><a href="#">Ссылка-1</a></li>
          <li><a href="#">Ссылка-2</a></li>
          <li><a href="#">Ссылка-3</a></li>
        </ul>
      </li>
    </ul>  <!--Код для левого меню заканчивается здесь-->
</div>

<div style="float:left; margin-left:50px;"> <!--Это div содержащий правое меню-->
  <p><strong>Работает при наведении курсора </strong></p>
    <ul id="secondpane" class="menu_list"> <!--Здесь начинается разметка для правого меню-->
      <li class="menu_head">Заголовок 1
        <ul class="menu_body">
          <li><a href="#">Ссылка-1</a></li>
          <li><a href="#">Ссылка-2</a></li>
          <li><a href="#">Ссылка-3</a></li>
        </ul>
      </li>
      <li class="menu_head">Заголовок 2
        <ul class="menu_body">
          <li><a href="#">Ссылка-1</a></li>
          <li><a href="#">Ссылка-2</a></li>
          <li><a href="#">Ссылка-3</a></li>
        </ul>
      </li>
      <li class="menu_head">Заголовок 3
        <ul class="menu_body">
          <li><a href="#">Ссылка-1</a></li>
          <li><a href="#">Ссылка-2</a></li>
          <li><a href="#">Ссылка-3</a></li>
        </ul>
      </li>
    </ul> <!--Код для правого меню заканчивается здесь-->
</div>


</body>
</html>

25 мар. 2013 7,778 4

Добавить комментарий

freeden
Оксана

Комментарии

19 авг. 2013 Ответить

Спасибо! Действительно дельный код.

Добавлю немного цветов и будет вообще шикарно.

7 апр. 2014 Ответить

Здравствуйте!

Искал именно такое меню. Один лишь вопрос, а как сделать первый пункт Заголовок то же ссылкой? Я делаю, он появляется, но при наведении на другой заголовок первый сворачивается и пропадает.

Спасибо!

, 12 января Ответить

Здравствуйте! Сворачиваются все вложенные элементы li.menu_head, поэтому нужно указать конкретный вложенный элемент для сворачивания (div) в селекторах children(), находящихся в этих строках:

$(this).children("div").slideToggle(400);
$(this).siblings().children("div").slideUp("slow");

$(this).children("div").slideDown(400);
$(this).siblings().children("div").slideUp("slow");

Ну а далее остается поэксперементировать с разметкой и CSS, удачи!

27 янв. 2016 Ответить

От души! Просто и понятно!!!