Плавно открывающееся меню с помощью jQuery

Віталий

8 років ago

Доброго времени суток 🙂

Как и обещал в прошлой статье, сегодня покажу как добиться эффекта плавного открытия выпадающего меню, но уже не с помощью CSS, а благодаря jQuery. Способ тоже распространенный и в свое время я часто использовал его. Единственное но, что как и любой скрипт, данный метод создает хоть и минимальную но все же дополнительную нагрузку на сайт. Если же Вас это вообще не беспокоит, то давайте приступим к реализации нашего плавно выпадающего меню. Но перед этим давайте посмотрим на то что получится в итоге.

Так же кому интересно, можете посмотреть на предыдущий способ с помощью CSS, который описан в статье - Плавно открывающееся меню с помощью CSS

Теперь к делу. Как и в прошлой статье, первым делом, давайте напишем HTML код нашего меню. Код такойже как и в той статье, чтобы не было путаницы и было более понятным. Меню с двумя пунктами и оба имеют подменю.

<nav id="slow_nav">
	<ul>
		<li>
		<a href="#">пункт 1</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>
		<li>
		<a href="#">пункт 2</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>

	</ul>
</nav>

Далее приступаем к скриптам. И как обычно сначала подключаем библиотеку jQuery. В шапку перед закрывающимся head или в подвал перед закрывающимсяbody добавляем вот такой код.

Если у Вас есть такая строка или схожая, которая уже ранее подключила библиотеку, то вновь делать этого не стоит.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Далее сам скрипт который и будет совершать анимацию плавного открывания выпадающего меню. Данный код добавляем сразу после библиотеки.

<script type="text/javascript">
jQuery(document).ready(function($){  
$('#slow_nav  ul li').hover(
            function () {
                $('ul', this).stop().slideDown(400);
            }, 
            function () {
                $('ul', this).stop().slideUp(400);            
            }
        );
});
</script>

Во второй строке скрипта указываем айди нашего меню. Если Вы применяете данный способ к своему собственному меню, то естественно меняйте имя на свое. В данном случаи это - #slow_nav.

Еще можете настроить время анимации. В данном скрипте на открывание и закрывание стоит значение 400 миллисекунд, это 0,4 секунды. Если хотите можете сменить на большее значение или на меньшее.

Последний шаг, добавление стилей. Они очень схожи со стилями из прошлой статьи, только в них отсутствуют свойства CSS анимации.

#slow_nav > ul{
	width: 500px;
	margin:25px auto 0;
}

#slow_nav > ul > li{
	list-style: none;
	display: inline-block;
	position:relative;
	padding:0;
}

#slow_nav a{text-decoration:none;}

#slow_nav > ul > li > a{
	font-size:18px;
	padding:5px;
	background-color:#333;
	color:#fff;
}

#slow_nav li ul{
	position:absolute;
	list-style:none;
	text-align:center;
	top:15px;
	font-size:15px;
	left:0;
	margin:0;
	padding:0;
	display:none;
}

#slow_nav li ul li{
	background-color:#333;
	border-bottom:1px solid #888;
}

#slow_nav li ul li:last-child{
	border-bottom:none;
}

#slow_nav li ul li a{
	padding:5px 12px;
	color:#fff;
	display:block;
}

#slow_nav li ul li:hover{
	background-color:#444;
}

#slow_nav li ul li:first-child{
	margin-top:25px;
	position:relative;
}

#slow_nav li ul li:first-child:before{
	content:'';
	position:absolute;
	width:1px;
	height:1px;
	border:5px solid transparent;
	border-bottom-color:#333;
	left:10px;
	top:-10px;
}

Также к стилям добавлена одна новая строка, с помощью которой скрипт правильно работает. Для элемента - #slow_nav li ul задано свойство display:none;. Если его не добавить, то выпадающее меню будет изначально видно и исчезнет лишь после проведения по нему курсором. Все остальные же стили как предыдущей статье.

Как и прошлый способ, так и этот можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress. Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂

На этом все, спасибо за внимание. 🙂

Exit mobile version