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

  Александр Маврин   Один комментарий

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

jQuery меню

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
ul#menu li {
    display: inline;
}
ul#menu li a {
    background: url("images/menu3.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    float: left;
    height: 169px;
    width: 229px;
    text-indent: -9999px;
}
ul#menu li#home a {
    background-position: -49px -190px;
}
ul#menu li#about a {
    background-position: -278px -190px;
}
ul#menu li#services a {
    background-position: -507px -190px;
}
ul#menu li#contact a {
    background-position: -736px -190px;
}
ul#menu li a span {
    background: url("images/menu3.png") repeat scroll 1px 0 rgba(0, 0, 0, 0);
    display: block;
    height: 167px;
}
ul#menu li#home a span {
    background-position: -49px 0px;
}
ul#menu li#about a span {
    background-position: -278px 0;
    width: 226px;
}
ul#menu li#services a span {
    background-position: -507px 0;
    width: 227px;
}
ul#menu li#contact a span {
    background-position: -736px 0;
}

И в завершении посмотрите, на 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 не будет опубликован. Обязательные поля помечены *