Горизонтальное меню с эффектом выпадения (jQuery)

И так приступим.

1. Подключение библиотек jQuery

Для начала нужно подключить библиотеку перед закрывающимся тегом head/ Если ранее вы уже это делали для вывода другого плагина, то лучше пропустить этот шаг во избежания проблем.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2. Подключение jQuery Easing

Также для работы меню нужен плагин jQuery Easing. Он подключается сразу после библиотек jQuery.

<script src="easing.js" type="text/javascript"></script>

Данный файл находится в архиве, который вы можете скачать, нажав на кнопку "Скачать" внизу статьи.

3. Скрипт анимационного меню.

Можно использовать готовый файл, который есть в архиве. Для его подключения нужно вставить следующий код сразу под теми, что мы уже подключили.

<script src="animated-menu.js" type="text/javascript"></script>

Сам код выглядит следующим образом.

$(document).ready(function(){
	
	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
	
	//Remove outline from links
	$("a").click(function(){
		$(this).blur();
	});
	
	//When mouse rolls over
	$("li").mouseover(function(){
		$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
	
	//When mouse is removed
	$("li").mouseout(function(){
		$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
	
})

4. HTML код.

Далее для работы меню - нужно вставить следующий код в нужное место вашего сайта, где вы хотите вывести меню.

<ul class="menu_top">
<li class="green">
<p class="name_b"><a href="#">Главная</a></p>
<p class="subtext">Первая страница</p>
</li>
<li class="yellow">
<p class="name_b"><a href="#">О нас</a></p>
<p class="subtext">Вторая страница</p>
</li>
<li class="red">
<p class="name_b"><a href="#">Контакты</a></p>
<p class="subtext">Наши контакты</p>
</li>
<li class="blue">
<p class="name_b"><a href="#">Прайс</a></p>
<p class="subtext">Наши товары</p>
</li>
<li class="purple">
<p class="name_b"><a href="#">Новости</a></p>
<p class="subtext">Новости компании</p>
</li>
</ul>

5. Стили CSS.

Следующие стили отвечают за внешний вид меню. Вы можете изменить их и настроить под себя.

ul.menu_top{margin:0;padding:0;position: absolute; z-index: 50;}
ul.menu_top li{width:100px;height:50px;float:left;color:#191919;text-align:center;overflow:hidden;}
.name_b a{color:#FFF;text-decoration:none;padding:0px 5px; }
.subtext{padding-top:15px;padding:0px 5px;}
.green{background:#6AA63B url(images/green-item-bg.jpg) top left no-repeat;}
.yellow{background:#FBC700 url(images/yellow-item-bg.jpg) top left no-repeat;}
.red{background:#D52100 url(images/red-item-bg.jpg) top left no-repeat;}
.purple{background:#5122B4 url(images/purple-item-bg.jpg) top left no-repeat;}
.blue{background:#0292C0 url(images/blue-item-bg.jpg) top left no-repeat;}

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

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