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

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

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

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

demoскачать

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


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

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

	
	
	
	

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

#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

jQuery.preloadImages = function()
{
for(var i = 0; i jQuery("").attr("src", arguments[i]);
}
jQuery.preloadImages("key.gif", "keyo.gif", "rss.gif", "rsso.gif", "sel.gif", "selo.gif");
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").

Мой блог находят по следующим фразам
ссылка ведущая в спам
dicim.net
малолетки в порно
html плавное перемещение к якорю
шрифты для html
фон для сайта большой фон






2 комментария

  • 8 лет назад Ответить

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

  • 8 лет назад Ответить

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

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

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

Перед отправкой формы:

Метки: