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