Раздвижное меню при помощи jQuery
2 марта 2010 года, Размещено в категории: jQuery / MooTools
Сегодня мы будем разбираться в замечательном раздвижном меню, которое работает на основе нашей любимой библиотеки JavaScript, JQuery.
Исходники меню можно скачать, а за ценить меню можно на демо:
Шаг 1: HTML код
Делаем каркас нашему раздвижному меню из списка <ul></ ul>.
Каркас у нас будет из списка в котором будут элементы меню. Между тегами <li> </ li> мы пишем текст и ссылки кнопки меню. Присмотритесь в код:
Ваш password
Подпишитесь на RSS!
Options!
Как видите, это простой список с <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
• фон для сайта большой фон
10 лет назад
Красивое меню. Последнее время увлекся я jQuery и на одном проекте уже 5 различных меню перепробовал. Сначала вроде нравиться, но после установки уже нет. А на jQuery их десятки 😉
10 лет назад
Интересное меню. Надо будет реализовать где-нибудь.