В этом примере мы покажем как создать "эффект аккордеона", который можно использовать как для меню, так и для любых других целей. Раньше для этих целей использовался Flash, но теперь можно воспользоваться и jQuery.
Чтобы использовать jQuery на Вашем сайте, Вы сначала должны загрузить последнюю версию этой javascript-библиотеки, а затем подключить ее к Вашей странице.
<script src="javascript/jquery.js" type="text/javascript"></script>
Теперь позвольте представить html-код для этого примера. Я указал для первой ссылки id, чтобы мы могли установить начальную ширину и заставить его казаться раскрытым, когда страница загружается.
(0)
<ul class="list-unstyled d-flex">
<li id="a1">
<strong class="d-block">Хабрахабр</strong>
<p class="mb-0">Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec feugiat massa vitae ipsum ullamcorper interdum. Duis in eros quis magna faucibus malesuada vitae sit amet diam.</p>
</li>
<li>
<strong class="d-block">jQuery</strong>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis est at metus feugiat ultricies. Suspendisse arcu neque, lacinia id ultrices ut, condimentum non erat. Maecenas commodo auctor est, sit amet imperdiet erat hendrerit ut.</p>
</li>
<li>
<strong class="d-block">Firefox</strong>
<p class="mb-0">Vivamus tristique erat id vehicula faucibus. Etiam vel ligula ac felis efficitur blandit sollicitudin id nibh.</p>
</li>
</ul>
Вот CSS, который является довольно простым.
ul li { padding: 10px; width: 25%; }
#a1 { width: 50%; }
А вот и jQuery-скрипт, который заставляет все это работать. Это может быть размещено между тегами <head>:
<script type="text/javascript" >
$().ready(function() {
lastBlock = $('#a1');
maxWidth = '50%';
minWidth = '25%';
$("ul li").hover(
function() {
$(lastBlock).animate({width: minWidth}, {queue:false, duration:400});
$(this).animate({width: maxWidth}, {queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
Первым делом мы установливаем несколько переменных:
Затем мы просто вешаем функцию на событие hover для всех ссылок, содержащихся в пределах всех пунктов списка. Здесь мы дважды вызываем функцию animate(): первый раз, чтобы закрыть lastBlock, и другой раз, чтобы раскрыть блок на который мы навели мышь. Затем мы устанавливаем lastBlock равный блоку, который мы только что раскрыли. Это для того, чтобы jQuery "знал", какой закрыть блок в следующий раз. Функция animate() позволяет создавать различную анимацию, устанавливая разные значения для различных свойств, но в данном случае мы только "анимируем" ширину.
Подробнее о функии animate() Вы можете прочить в официальной документации.
Демо© 2008 - 2024 Все права защищены