Меню «Аккордеон»

Меню «Аккордеон»

Аккордеон

Здравствуйте, уважаемые читатели!

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

Скачать файл-архив с исходниками.

Шаг 1. Конструкция меню в HTML.

Сначала создадим html-каркас, который станет основой для нашего нового меню. Ниже вы увидите пример такого html – каркаса:

HTML:

<div style="float:left" >
<div id="firstpane" class="menu_list">
<p class="menu_head">Меню</p>
<div class="menu_body">
<a href="#">Главная</a>
<a href="#">Форум</a>
<a href="#">Блог</a>
<a href="#">Контакты</a>
<a href="#">О проекте</a>
</div>
<p class="menu_head">Публикации</p>
<div class="menu_body">
<a href="#">Новости</a>
<a href="#">Статьи</a>
<a href="#">Закачки</a>
</div>
<p class="menu_head">Профиль</p>
<div class="menu_body">
<a href="#">Мои друзья</a>
<a href="#">Мои сообщения</a>
<a href="#">Мои файлы</a>
<a href="#">Выйти</a>
</div>
</div>
</div>

Шаг 2. Дизайн меню в CSS:

После того, как создали основу меню, приступим к стилям. CSS-коды для объектов навигации, которые мы к ним привязали, прописываем между тегами <head> и </head> в файле шаблона. Ниже приведен код этих стилей:

CSS:

<style type="text/css">
body {
margin: 10px auto;
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {
width: 150px;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #333 url(images/left.png) center right no-repeat;
color:#fff;
}
.menu_body {
display:none;
}
.menu_body a{
display:block;
color:#555;
background-color:#999;
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color: #333;
text-decoration:underline;
}
</style>

Шаг 3. Прикручиваем фреймворк jQuery.

А теперь, пожалуй, самое главное — не забыть привязать важнейший фреймворк jQuery между тегами <head> и </head>:

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

Шаг 4. Последний момент нашего урока - вставка необходимых JavaScript'ов.

Придадим меню различные эффекты: выпадение разделов по нажатию, улучшение выпадающих элементов. Чтобы получить их, вставляем перед тегом </body> нижеприведенный код:

<script type="text/javascript">
$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(images/down.png)"}).next("div.menu_body")

.slideToggle(300)

.siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(images/left.png)"});
});
});
</script>

Вот и все. Проверяем результат проделанной работы.

Дискуссия по теме