Анимированное меню на основе jQuery
Скрипты
Будем создавать вертикальное меню, работающее на основе фреймворка jQuery с анимацией при разворачивании и сворачивании. Вложенность - 2 уровня: пункты и подпункты. Количество пунктов и подпунктов неограничено. Это меню не занимает много места и подойдет для сайтов, где большая вложенность, но нет желания занимать ссылками много места.
Для начала нужно подключить jQuery к странице. Для этого в теле блока HEAD нужно прописать следующий код:
Если ваш сайт сделан на основе CMS UCOZ, то подключать jQuery не нужно.
Теперь создаем само меню. Его сделаем на основе DIV блоков. Код выглядит так:
<div class="item">
<a href="javascript://" class="itemopen" title="Развернуть"> + </a> <a href="#">Пункт 1</a>
<div class="subitem">
<a href="#">Подпункт 1</a>
<a href="#">Подпункт 2</a>
<a href="#">Подпункт 3</a>
</div>
</div>
<div class="item">
<a href="javascript://" class="itemopen" title="Развернуть"> + </a> <a href="#">Пункт 2</a>
<div class="subitem">
<a href="#">Подпункт 1</a>
<a href="#">Подпункт 2</a>
</div>
</div>
<div class="item">
<a href="javascript://" class="itemopen" title="Развернуть"> + </a> <a href="#">Пункт 3</a>
<div class="subitem">
<a href="#">Подпункт 1</a>
<a href="#">Подпункт 2</a>
</div>
</div>
<div class="item">
<a href="javascript://" class="itemopen" title="Развернуть"> + </a> <a href="#">Пункт 4</a>
<div class="subitem">
<a href="#">Подпункт 1</a>
<a href="#">Подпункт 2</a>
<a href="#">Подпункт 3</a>
<a href="#">Подпункт 4</a>
<a href="#">Подпункт 5</a>
</div>
</div>
</div>
В меню меняете ссылки и текст ссылки на свои. Классы не меняем! На одной странице можно разместить любое количество таких менюшек. При этом код будет работать в любом случае.
Теперь нужно задать для нашего меню стили. Для этого прописываем в теле HEAD следующий код:
div.menu a{
font-family: tahoma;
text-decoration: none;
}
div.menu div.item a.itemopen{
display: inline-block;
text-align: center;
width: 15px;
}
div.menu div.subitem a{
display: block;
}
div.menu div.item{
font-size: 12pt;
width: 140px;
border: 1px solid #77DAFF;
background: #C6EEFD;
padding: 1px 3px;
overflow: visible;
}
div.menu div.item div.subitem{
font-size: 10pt;
width: 110px;
height: 20px;
padding: 1px 5px 1px 25px;
display: none;
background: #C6EEFD;
}
</style>
Я привел лишь пример. Окончательный внешний вид вы можете подогнать сами.
Теперь нужно вставить код самого скрипта, который будет сворачивать и разворачивать меню. Этот коднужно разместить прямо перед закрывающим тегом BODY в конце страницы. Код скрипта:
$(document).ready(function(){
$('div.subitem').hide();
var speed='fast';
$('div.menu a.itemopen').click(function(){
if($(this).parent().find('div').css('display')=='none'){
$(this).parent().parent().find('div.subitem').hide(speed);
$(this).parent().parent().find('a.itemopen').html(' + ');
$(this).parent().parent().find('a.itemopen').attr('title','Развернуть');
$(this).parent().find('div.subitem').show(speed);
$(this).parent().find('a.itemopen').html(' - ');
$(this).parent().find('a.itemopen').attr('title','Свернуть');
}else{
$(this).parent().parent().find('div.subitem').hide(speed);
$(this).parent().parent().find('a.itemopen').html(' + ');
$(this).parent().parent().find('a.itemopen').attr('title','Развернуть');
}
});
});
</script>
Теперь меню на основе jQuery полностью работоспособно. Рабочий пример можно увидеть тут:
На этом заканчиваю. Удачи в ваших свершениях!
Анимированное меню на основе jQuery
Скрипты
SzenProgs.ru
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 5096 |
| Рейтинг: | 4.9/8 |
| Дата добавления: | 22.04.2010 03:08, Четверг |
| Добавил: | Szen |
| Теги: | jQuery, меню |
Рекомендуем
Дополнительно к Анимированное меню на основе jQuery
Прочная пэт-бутылка очень практична.
Выкуп квартир! Быстрые деньги: выкуп комнат в подмосковье.
биметаллические радиаторы sira
