Рубрика JQuery

Меню аккордеон на основе JQuery

В этом уроке хочу продемонстрировать вам меню в стиле аккордеон. Среди основных преимуществ данного меню можно выделить следующие:

1. Вложенность аккордеонов. Возможность вложить один аккордеон в другой.
2. Многофункциональность вложенных элементов меню.
3. Гибкость настройки отображаемых элементов меню.

Разметка для меню выглядит следующим образом:

<ul>
<li>
<a href="#">Item 1</a>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
</ul> 

Для работы меню нам потребуется подключить JQuery, функцию меню и таблицу стилей.

 <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
 <script src="menu.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="style.css" />

Как вы видите основной элемент в меню это тег UL, который имеет класс «menu«. А каждый элемент, который служит в качестве выпадающего списка меню, имеет класс «acitem«.

Для того чтобы какой-либо из пунктов меню автоматически после загрузки страницы отображался в развернутом виде можно воспользоваться дополнительным классом. В данном случае класс «expand«.

Например:

<ul>
<li>
<a href="#">Item 1</a>
<ul>
<li>...</li>
...
...

CSS.

body {
font-family: Helvetica, Arial, sans-serif;
font-size: 0.9em;
}

p {
line-height: 1.5em;
}

ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}

ul.menu a {
display: block;
text-decoration: none;
}

ul.menu li {
margin-top: 1px;
}

ul.menu li a, ul.menu ul.menu li a {
background: #333;
color: #fff;
padding: 0.5em;
}

ul.menu li a:hover, ul.menu ul.menu li a:hover {
background: #000;
}

ul.menu li ul li a, ul.menu ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}

ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
ul.menu ul.menu li a:hover {
border-left: 0;
padding-left: 0.5em;
}
ul.menu ul.menu {
border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
text-decoration: underline;
background: #c00;
}
div.panel {
border: 1px #000 solid;
padding: 5px;
margin-top: 1px;
}

ul.menu div.panel a, ul.menu div.panel li a:hover  {
display :inline;
color: #666;
background: none;
margin: 0;
padding: 0;
border: none;
font-weight: bold;
}
ul.menu div.panel a:hover {
color: #000;
text-decoration: underline;
}

Важное замечание: код CSS не свободен от недостатков и предназначен исключительно для ознакомительных целей. Проверяйте на кроссбраузерность.

Источник: www.i-marco.nl.
Перевод: Администратор сайта explorer-soft.com.