Сайт в режиме реконструкции.

Выпадающее меню в jQuery

Метки : HTML, javascript, jQuery

Мы уже делали выпадающее меню на CSS, но гораздо приятней использовать на сайте меню с анимацией. Эта самая анимация очень просто реализовывается при помощи библиотеки jQuery.

Как обычно, делаем HTML-разметку нашего меню


Далее прописываем стили.

		/*
Обнуляем отступы для всех элементов на странице
*/
*{
	margin: 0;
	padding: 0;
}
/*
Задаем ллавные переходы для изменяющихся свойств ссылок
*/
a{
	transition: all 150ms linear;
	-o-transition: all 150ms linear;
	-moz-transition: all 150ms linear;
	-webkit-transition: all 150ms linear;
}
/*
Дальше должно быть понятно ))
*/
.nav {
	margin: 50px auto;
	width: 980px;
}
.nav > ul {
	display: block;
	height: 30px;
}
.nav > ul > li {
	float:left;
	display: block;
	list-style: none;
	height: 30px;
	margin: 0 5px;
}
.nav > ul > li > a {
	display: block;
	background: #ccc;
	height: 30px;
	line-height: 30px;
	font-size: 15px;
	color: #000;
	padding: 0 12px;
	text-decoration: none;
}
.nav > ul > li > a:hover,
.nav > ul > li:hover > a {
	background: #909090;
}
.nav ul li ul {
	position: absolute;
	padding-top: 4px;
	display: none;
}
.nav ul li ul li {
	list-style: none;
	display: block;
	margin: 2px 0;
}
.nav ul li ul li a {
	display: block;
	padding: 4px 15px;
	text-decoration: none;
	color: #000;
	font-size: 15px;
	background: #ccc;
}
.nav ul li ul li a:hover {
	background: green;
	color: #fff;
}
#triangle {
	height: 0;
	line-height: 0;
	font-size: 0;
	padding: 0;
	margin: 70px;
	width: 0;
	border-bottom: 30px solid green;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
}
	

Теперь подключаем библиотеку jQuery.


Ну и осталось написать маленький скрипт, который будет заставлять при наведении на пункт меню плавно выезжать его дочернее субменю

$(document).ready(function(){
		$('.nav ul li').hover(function(){
			$(this).children('ul').stop(false,true).slideDown(200)
		},function(){
			$(this).children('ul').stop(false,true).slideUp(200)
		})
	})

Ну и можно посмотреть демо того, что у нас получилось

Просмотров 2897

Комментарии (0)







Добавить новый комментарий: