Раздвижное меню при помощи jQuery

2 марта 2010 года, Размещено в категории: jQuery / MooTools

Раздвижное меню при помощи jQuery

Сегодня мы будем разбираться в замечательном раздвижном меню, которое работает на основе нашей любимой библиотеки JavaScript, JQuery.
Исходники меню можно скачать, а за ценить меню можно на демо:

demoскачать

Шаг 1: HTML код
Делаем каркас нашему раздвижному меню из списка <ul></ ul>.
Каркас у нас будет из списка в котором будут элементы меню. Между тегами <li> </ li> мы пишем текст и ссылки кнопки меню. Присмотритесь в код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<ul id="iconbar">
	<li><a href="#">
<img src="key.gif" alt="" />
Ваш password
</a></li>
	<li><a href="http://feeds.feedburner.com/ilovecolors" target="_blank">
<img src="rss.gif" alt="" />
Подпишитесь на RSS!
</a></li>
	<li><a href="#">
<img src="sel.gif" alt="" />
Options!
</a></li>
</ul>

Как видите, это простой список с <img> и <span> тегами вложенных в тег ссылки <a>. Когда мы наводим курсор на ссылку, тег span реагируе и открывается в заданную нами ширину.

Между тегами <head></head> подключаем CSS файл, плагин jQuery и файл с фрейморком jQuery. Посмотрите код:

1
2
3
4

	<link rel="stylesheet" type="text/css" href="borrar.css"/>
	<link rel="stylesheet" type="text/css" href="estilos.css"/>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="general.js"></script>

Шаг 2: CSS код
Для того чтобы span появится рядом со значком, мы будем его позиционировать, абсолютно. Чтобы это сделать, мы добавим relative позиционирование тегу <li>. Мы дадим ссылке ширину 24px, которая является шириною нашего значка.

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

#iconbar li{
float:left;
position:relative;
margin-right:20px;
background:#E8E8F9;
border: 1px dashed #ffc0ff;
overflow:hidden;
}
 
#iconbar a {
text-decoration: none;
outline: none;
color:#d00000;
display: block;
width: 24px;
padding: 10px;
cursor:pointer;
}
 
#iconbar span	{
width: 100px;
height: 35px;
position: absolute;
display: none;
line-height:110%;
color:#409BED;
padding-left: 10px;
}

Шаг3: jQuery

1
2
3
4
5

jQuery.preloadImages = function()
{
for(var i = 0; i jQuery("<img alt="" />").attr("src", arguments[i]);
}
jQuery.preloadImages("key.gif", "keyo.gif", "rss.gif", "rsso.gif", "sel.gif", "selo.gif");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

jQuery(document).ready(function(){
 
$("#iconbar li a").hover(
function(){
var iconName = $(this).children("img").attr("src");
var origen = iconName.split(".gif")[0];
$(this).children("img").attr({src: "" + origen + "o.gif"});
$(this).animate({ width: "140px" }, {queue:false, duration:"normal"} );
$(this).children("span").animate({opacity: "show"}, "fast");
},
function(){
var iconName = $(this).children("img").attr("src");
var origen = iconName.split("o.")[0];
$(this).children("img").attr({src: "" + origen + ".gif"});
$(this).animate({ width: "24px" }, {queue:false, duration:"normal"} );
$(this).children("span").animate({opacity: "hide"}, "fast");
});
});

Иконки под загружаются при помощи Javascript. Поэтому нам нужно заранее указать путь к иконкам "key.gif", "keyo.gif".
Первая иконка будет показываться в спокойному состоянии кнопки, а другая будет под загружаться когда на кнопку наведут курсор (для второй иконки в конце имени добавьте "o" у вас получиться "keyo.gif").



Интересно будет почитать:



  1. blogavod Сказал:
    2 марта 2010

    Красивое меню. Последнее время увлекся я jQuery и на одном проекте уже 5 различных меню перепробовал. Сначала вроде нравиться, но после установки уже нет. А на jQuery их десятки ;)

    Ответить
  2. fenris Сказал:
    7 марта 2010

    Интересное меню. Надо будет реализовать где-нибудь.

    Ответить

Прокомментировать

Метки: