Воодушевленный панелью навигации Дэвида Уолша, которая становится полупрозрачной при пролистывании страницы вниз, я решил написать статью на эту тему.
Цель – это создать фиксированное навигационное меню, которое будет следовать за пользователем при прокрутке страницы, затухая при этом и становясь практически незаметным. Когда пользователь наводит курсор мыши на него, то оно вновь становится непрозрачным.
Навигационное меню будет представлять собой набор нескольких ссылок, поиска, кнопок быстрого перехода в нижнюю и верхнюю часть страницы.
И так, начнем!
1. HTML
Код довольно прост: мы имеем блочный элемент div, в котором заключены теги элементов списка li. Внутри тегов li будут находиться те самые пункты меню
<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
<li><a>Link 4</a></li>
<li><a>Link 5</a></li>
<li><a>Link 6</a></li>
<li class="search">
<input type="text">
<input class="searchbutton" type="submit" value="">
</li>
</ul>
</div>Классы top и bottom являются теми самыми стрелками, которые перекидывают пользователей в начало или конец страницы. Атрибуты href в данном случае ссылаются на элементы с id вверху и внизу страницы. Убедитесь, что вы ссылаетесь на правильный, существующий элемент. Внизу страницы это может быть секция комментариев в вашем блоге WordPress. В этом случае, вам нужно указать следующее – href=”#comments”.
Теперь, давайте обратимся к CSS
2. CSS
Зададим стиль для элемента div:
#nav{
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0px;
left:0px;
right:0px;
background:#fff url(../images/nav.png) repeat-x center left;
z-index:999999;
}
Теперь навигационное меню всегда будет находиться в самом верху нашей страницы, благодаря параметру position:fixed и top:0px. Фоновое изображение будет полупрозрачным с небольшим 3D эффектом. Поскольку оно практически полностью прозрачно, вы можете поэкспериментировать с цветами и заменить белый цвет (#ffffff). Мы присвоили z-index большое значение, потому что не хотим, чтобы наши другие элементы с абсолютной позицией оказались выше нашего навигационного меню.
Для нашего неупорядоченного списка ul и его элементов li мы задаем следующие параметры:
#nav ul{
height:25px;
list-style:none;
margin:6px auto 0px auto;
width:600px;
}
#nav ul li{
display:inline;
float:left;
margin:0px 2px;
}
Наш ненумерованный список имеет фиксированную ширину 600 пикселей и расположен в центре меню. Добиться такого же эффекта можно, если присвоить величину auto для отступа (margin) слева и справа.
Элементы списка должны быть выстроены один за другим, и мы добиваемся этого с помощью display:inline. Выравнивание по левому краю необходимо, чтобы задать отступ, который обеспечивает небольшое расстояние между пунктами меню.
Ко всем ссылкам навигационного меню мы применяем следующий стиль:
#nav a{
font-size:11px;
font-weight:bold;
float:left;
padding: 2px 4px;
color:#999;
text-decoration: none;
border:1px solid #ccc;
cursor: pointer;
background:transparent url(../images/overlay.png) repeat-x center left;
height:16px;
line-height:16px;
}
#nav a:hover{
background:#D9D9DA none;
color: #fff;
}
Несмотря на то, что совсем не обязательно указывать форму курсора, я советую прописывать cursor: pointer для адекватной работы во всех браузерах. Теперь наши ссылки также имеют полупрозрачный фон, как и сама навигация. При наведении на одну из ссылок, мы убираем изображение и изменяем цвет фона.
Давайте рассмотрим стиль, применяемый к навигационным стрелкам:
#nav a.top span, #nav a.bottom span{
float:left;
width:16px;
height:16px;
}
#nav a.top span{
background:transparent url(../images/top.png) no-repeat center center;
}
#nav a.bottom span{
background:transparent url(../images/bottom.png) no-repeat center center;
}
Теперь определимся с поиском и вводом текста:
#nav ul li.search{
float:right;
}
#nav input[type="text"]{
float:left;
border:1px solid #ccc;
margin:0px 1px 0px 50px;
padding:2px 2px 2px 2px;
}
Используя nav input[ type= «text» ] вы убеждаетесь, что не измените стили для других элементов с тегом input. Это хороший прием, который позволяет разграничивать различные стили ввода данных.
Отступ на 50 пикселей влево необходим, чтобы отделить поиск от других элементов меню.
Для кнопки поиска необходимо применить следующие параметры:
input.searchbutton{
border:1px solid #ccc;
padding:1px;
cursor:pointer;
width:30px;
height:22px;
background:#E8E9EA url(../images/search.png) no-repeat center center;
}
input.searchbutton:hover{
background-color:#D9D9DA;
}
Это отличный пример использования классов вместо особых стилей, например input[ type= «submit» ]. Здесь же мы задаем иконку для поиска и фоновый рисунок.
Вот, мы и закончили с CSS! Осталось дело за малым, JavaScript.
3. JavaScript
В первую очередь мы хотим сделать так, чтобы при заходе на страницу меню было непрозрачным, а при первом же движении вниз страницы, оно становилось практически незаметным. При наведении, мы хотим, чтобы оно появлялось вновь. Все это мы сейчас воплотим с помощью JavaScript:
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#nav').stop().animate({'opacity':'0.2'},400);
else
$('#nav').stop().animate({'opacity':'1'},400);
});
$('#nav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'0.2'},400);
}
}
);
});
Итак, если мы не наверху страницы, то движение скроллом незамедлительно приводит к потуханию меню. Этот эффект осуществляется всего за 400 миллисекунд (выставите свое время при желании). Если мы наверху страницы, значение прозрачности будет 1, то есть навигационное меню будет совершенно непрозрачно. По такой же системе работает меню при наведении на него.
Вот и все! Комментируйте!