Все для веб-дизайнера
Стильное меню при помощи jQuery
Создавая сайт мы хотим сделать его более удобным и стильным, по этому сегодня мы будем разбираться в замечательном раздвижном меню, которое работает на основе нашей любимой библиотеки JavaScript, JQuery. Благодаря этой навигации можно замечательно скрасить наш сайт, при этом привлечь взгляд посетителя.Давайте посмотрим что у нас с этого получилось.. К началу работы исходники меню можно скачать, а просмотреть меню можно в демонстрации:
Первым шагом будет создание 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 |
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»).
Интересно:
| Опубликовал admin 07.06.2011 в 21:16, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта. |
Загрузка ...