Горизонтальное меню для сайта на jQuery

Здравствуйте, друзья. Хочу поделиться с вами интересным вертикальным jQuery меню с плавной анимацией. Я уже писал о том, как сделать вертикальное jQuery меню, но теперь настало время именно для горизонтального. 🙂 (На чистом CSS есть здесь.) Получилось довольно красивое jQuery меню. При наведении на пункт, плавно загораются лампочки и подсвечивают его. Что из этого получилось, можно посмотреть в примере.

Демо

Это jQuery меню можно реализовать на своем сайте или же использовать скрипт этого меню и создать на его основе что-то свое. С помощью CSS можно сделать картинку, меняющуюся при наведении курсора, но, к сожалению, нельзя сделать плавную смену изображений. А этот скрипт меню как раз позволяет это сделать. Кода в нем самый минимум, можно не беспокоиться о том, что он будет нагружать сайт. не будем тянуть кота за хвост, вот этот jQuery скрипт меню:

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
	$("ul#menu li a").wrapInner("< span>< /span>");
	$("ul#menu li a span").css({"opacity" : 0});
	$("ul#menu li a").hover(function(){
		$(this).children("span").animate({"opacity" : 1}, 400);
	}, function(){
		$(this).children("span").animate({"opacity" : 0}, 400);
	});
});

Если вы планируете сделать jQuery меню самостоятельно, то вам потребуется подготовить для него изображение. В данном меню оно выглядит вот так:

А вот и CSS код, который необходим для нормального функционирования этого меню.

1
2
3
4
5
6

<ul id="menu">
	<li id="home"><a href="#"></a></li>
	<li id="about"><a href="#"></a></li>
	<li id="services"><a href="#"></a></li>
	<li id="contact"><a href="#"></a></li>
   </ul>

И в завершении посмотрите, на HTML разметку jQuery меню:

1
2
3
4
5
6

<ul id="menu">
	<li id="home"><a href="#"></a></li>
	<li id="about"><a href="#"></a></li>
	<li id="services"><a href="#"></a></li>
	<li id="contact"><a href="#"></a></li>
   </ul>

Скачайте это jQuery меню и разберите подробнее каждый элемент. Это послужит началом вашего вдохновения, чтобы вы могли придумать что-то более красивое и индивидуальное. Читайте также: Как создать мобильное меню. Желаю удачи.

СКАЧАТЬ