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

    Один комментарий 396

Меню jQuery

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

Телеграм-канал serblog.ru

Демо

Это 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 меню самостоятельно, то вам потребуется подготовить для него изображение. В данном меню оно выглядит вот так:

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

СКАЧАТЬ

Любая сумма на развитие сайта

1 комментарий
  1. Здравствуйте. Подскажите пожалуйста куда вставлять код и стиль в коде блога. Конкретно сам код HTML (разметку), а то яеще не очень разбираюсь в кодах. Спасибо.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *