Главная страница » jQuery » Стильное меню при помощи jQuery

Стильное меню при помощи jQuery

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Ваш password

</a></li>

Подпишитесь на RSS!

</a></li>

Options!

</a></li>

</ul>

Как видите, это простой список с <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

1	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");

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»).

На главную