14
Горизонтальное меню “Лифт” с помощью CSS и jQuery
0 коммент. » | Автор admin, рубрики JavaScript, Верстка
В связи с тем, что меню с использованием JavaScript требуют большего описания процесса создания, я решил прекратить серию статей “Меню для сайта” и публиковать каждую менюшку в отдельном посте.
В этом посте на базе предыдущех покажу как создать красивую менюшку добавив эффекты с помощью замечательной библиотеки jQuery.
Горизонтальное меню “Лифт”
Думаю, взглянув на схему расположения блоков и рабочий пример, Вам сразу станет понятно почему я решил назвать меню «лифтом».
По сути при возникновении событий mouseover и mouseout – это как события нажатия кнопки вызова лифта. Кабиной лифта можно считать тэг …, который подымается на наш этаж, когда мы наводим мышью на “лифт”. Когда же возникает событие mouseout, то лифт уезжает на нижний этаж. При таком подходе тэг … желательно подставлять JavaScript’ом, чтобы поисковики лишний раз не пугались.
Таблица стилей (CSS)
Итак, CSS:
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | html, body{ background:#C0C0C0; /* фон страницы */ margin:0px auto; /* выравнивание по центру */ padding:0px; /* обнуление полей */ } #navbar{ border:1px solid white; /* бордюр вокруг всего списка */ border-right:0; /* убираем лишний бордюр сверху*/ display:block; height:30px; /* высота списка */ list-style:none; /* отменяем маркер для списка */ margin:20px auto; /* выравниваем меню на странице */ padding:0px; /* обнуление полей */ text-transform:uppercase; width:500px; /* задаем ширину меню */ } ul#navbar li{ display:block; /* как блочный элемент */ float:left; /* обтекание */ height:30px; overflow:hidden; /* отображаем только то, что умещается по высоте */ } ul#navbar li a{ display:block; /* как блочный элемент */ float:left; /* обтекание */ height:30px; } ul#navbar li span{ background:#1b64dc url(bg.png) repeat-x 0 0; clear: both; display: none; float: left; } ul#navbar li a, ul#navbar li span{ border-right:1px solid white; /* бордюр сверху */ clear: both; color:white; /* цвет текста */ font:normal 16px arial; /* описываем шрифт */ height:20px; /* задаем высоту для элемента */ margin:0px; padding:5px 0; overflow:hidden; text-align:center; /* текст в ячейке "по центру" */ text-decoration:none; /* отмена декораций */ width:99px; } ul#navbar li a{ background:#FF0084 url(bg.png) repeat-x 0px -30px;/* фон для "подсвеченной" ссылки */ } |
Главное в этом обновленном CSS – это overflow:hidden; для тэгов li. Благодаря этому мы не видим весь блок сразу, а только половину.
Используем jQuery
В шапке страницы подключаем библиотеку и допишем следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#navbar li').prepend('<span></span>'); $('#navbar li').each(function() { var link = $(this).find('a').html(); $(this).find('span').show().html(link); }); $('#navbar li').hover(function() { $(this).find('span').stop().animate({ marginTop: '-30' }, 250); } , function() { $(this).find('span').stop().animate({ marginTop: '0'}, 250); }); }); </script> |
Рассмотрим код подробней.
$(‘#navbar li’).prepend(‘‘); – отбираем элементы меню и дописываем внутрь пустой тэг span.
$(‘#navbar li’).each(function() {} – для набора $(‘#navbar li’) в цикле перебираем каждый элемент.
var link = $(this).find(‘a’).html(); – для текущего элемента ищем текст внутри тэга a и присваиваем это значение переменной link.
$(this).find(’span’).show().html(link); – в текущем элементе находим элемент span и вставляем в него значение переменной link.
$(‘#navbar li’).hover() – при возникновении события hover над элементом списка, задаем margin-top:-30px;, после выхода курсора за пределы элемента, возвращаем значение отступа в исходное состояние margin-top:0;.
HTML-разметка страницы
Вот так стала выглядить разметка после дописания скрипта:
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 29 30 31 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Делаем меню вместе с web4develop</title> <link type="text/css" rel="stylesheet" href="style.css"> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#navbar li').prepend('<span></span>'); $('#navbar li').each(function() { var link = $(this).find('a').html(); $(this).find('span').show().html(link); }); $('#navbar li').hover(function() { $(this).find('span').stop().animate({ marginTop: '-30' }, 250); } , function() { $(this).find('span').stop().animate({ marginTop: '0'}, 250); }); }); </script> </head> <body> <ul id="navbar"> <li><a href="#">Блог</a></li> <li><a href="#">Уроки</a></li> <li><a href="#">Скачать</a></li> <li><a href="#">Примеры</a></li> <li><a href="#">Форум</a></li> </ul> </body> </html> |
Как обычно, рабочий пример можно скачать нажав здесь.
P.S.
Идею и код подсмотрел www.sohtanaka.com.
Кроссбраузерно, но в IE6 вознинкают небольшие “подергивания”.
