меню в виде аккордеона
http://www.ruseller.com/lessons/les306/example/index.html#
Здравствуйте, дорогие друзья! Сегодня мы будем делать боковое выпадающее меню на jQuery. Для начала, посмотрите демонстрацию и скачайте исходники файлов, которые мы будем использовать в ходе данного урока:
Шаг 1. 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. Дизайн меню
Отлично! Теперь те стили, которые мы привязывали к объектам нашего меню, мы пропишем между тегами <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>