В данной статье Вы узнаете, как построить горизонтальное меню с таким красивым эффектом.
Смотрите пример на сайте киношка в самом низу.
На рисунке, приведенном ниже изображена подробная схема работы такого меню.
Как видно из данной схемы, наше меню для своей работы использует технологию спрайтов - достаточно новая технология, пользующаяся большой популярностью среди вебмастеров из-за своей эффективности и быстродействия. Чтобы получить эффект используемый в меню, мы используем совместно технологию спрайтов и JavaScript. В данной работе нам нужно применить три момента: CSS, JavaScript, HTML. Начнем с первого: Вот так нужно описать это в CSS
Code
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. Именно благодаря этому свойству видно не весь блок сразу, а только половину.
Дальше рассмотрим второй момент, применение JavaScript.
В шапке подключим библиотеку jQuery и напишем такой скрипт:
Code
<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 разметку документа содержащего такое меню:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Делаем меню вместе с postroyweb</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>
Параметры скриптов редактируете под себя.