В этом примере я покажу как создать "эффект аккордеона", который можно использовать как для меню, так и для любых других целей. Раньше для этих целей использовался Flash, но теперь можно воспользоваться и jQuery.
Чтобы использовать jQuery на Вашем сайте, Вы сначала должны загрузить последнюю версию этой javascript-библиотеки, а затем подключить ее к Вашей странице.
<script src="javascript/jquery.js" type="text/javascript"></script>
Теперь позвольте, представить html-код для этого примера. Я указал для первой ссылки id, чтобы мы могли установить начальную ширину и заставить его казаться раскрытым, когда страница загружается.
<ul>
<li>
<a id="a1"><img src="habr.gif" />
<p><strong>Хабрахабр</strong><br/>
Лучший сайт Рунета.</p></a>
</li>
<li>
<a><img src="tut_thumb.jpg" />
<p><strong>jQuery</strong><br/>
JavaScript-фреймворк, фокусирующийся на взаимодействии JavaScript и HTML.
</p></a>
</li>
<li>
<a>
<img src="firefox.png" />
<p><strong>Firefox</strong><br/>
Лучший браузер, попробуйте и убедитесь.
</p></a>
</li>
</ul>
Вот CSS, который является довольно простым.
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}
ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}
#a1{
width: 210px;
}
ul li img{
position: absolute;
border: 3px solid #881212;
}
ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
} А вот и jQuery-скрипт, который заставляет все это работать. Это может быть размещено между тегами <head>.
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 210;
minWidth = 75;
$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 210;
minWidth = 75;
$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
Первым делом мы установливаем несколько переменных:
lastBlock представляет блок, который уже раскрыт,
maxWidth - ширина, которую мы хотим установить для блока, когда он раскрыт,
minWidth - ширина свернутого блока.
Затем мы просто вешаем функцию на событие hover для всех ссылок, содержащихся в пределах всех пунктов списка. Здесь мы дважды вызываем функцию animate(): первый раз, чтобы закрыть lastBlock, и другой раз, чтобы раскрыть блок на который мы навели мышь. Затем мы устанавливаем lastBlock равный блоку, который мы только что раскрыли. Это для того, чтобы jQuery "знал", какой закрыть блок в следующий раз. Функция animate() позволяет создавать различную анимацию, устанавливая разные значения для различных свойств, но в данном случае мы только "анимируем" ширину.
Подробнее о функии animate() Вы можете прочить в официальной документации.
Пример
ВКонтакте
Подробнее...