В этом примере я покажу как создать "эффект аккордеона", который можно использовать как для меню, так и для любых других целей. Раньше для этих целей использовался Flash, но теперь можно воспользоваться и jQuery.

accordion

Чтобы использовать 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>

Первым делом мы установливаем несколько переменных:
lastBlock представляет блок, который уже раскрыт,
maxWidth - ширина, которую мы хотим установить для блока, когда он раскрыт,
minWidth - ширина свернутого блока.
Затем мы просто вешаем функцию на событие hover для всех ссылок, содержащихся в пределах всех пунктов списка. Здесь мы дважды вызываем функцию animate(): первый раз, чтобы закрыть lastBlock, и другой раз, чтобы раскрыть блок на который мы навели мышь. Затем мы устанавливаем lastBlock равный блоку, который мы только что раскрыли. Это для того, чтобы jQuery "знал", какой закрыть блок в следующий раз. Функция animate() позволяет создавать различную анимацию, устанавливая разные значения для различных свойств, но в данном случае мы только "анимируем" ширину.
Подробнее о функии animate() Вы можете прочить в официальной документации.


Пример



Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

    You have no rights to post comments