В сегодняшнем уроке мы создадим полупрозрачный фиксированный блок, который остается всегда на виду.
При прокрутке страницы вниз он всегда остается вверху и немного тускнеет. При наведении мышки на блок он становится активным.
В данном блоке мы разместим несколько ссылок меню, форма поиска, а также ссылки "Вверх" и "Вниз", с помощью которых можно быстро перемещаться в начало или конец документа.
Начнем!
1. HTML
Разметка очень простая. У нас есть div со списком. Элементы списка будут нашими ссылками.
<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 - это стрелочки, которые будут переносить пользователя в начало или конец страницы. Якоря в этих ссылках ведут на элементы с id top или bottom. Убедитесь, что Вы правильно выберите элементы для этих id.
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, так как хотим, чтобы этот блок был поверх всех элементов.
Неупорядоченный список и элементы списка будут иметь следующие стили:
#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 пикселей, и он позиционирован строго по центру. Чтобы выровнять относительно позиционированный элемент достаточно указать правый и левый отступ (margin) - auto.
Элементы списка идут друг за другом благодаря 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;
}
У ссылок также будет полупрозрачный фон. Опять же тут можно поэкспериментировать с цветом фона.
При наведении на элемент ссылки, мы убираем фон и изменяем фоновый цвет.
Давайте еще взглянем на стили стрелок:
#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;
}
Обычно при указании input[type="text"] Вы убеждаетесь, что не поменяете стили других вводов на странице. Это хорошая практика оформляем некоторых типов полей ввода.
Кнопка поиска:
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;
}
Вот и все со стилями!
3. JavaScript (jQuery)
Теперь нам необходимо проделать следующее: когда мы вверху страницы - оставить меню как есть, при начале скролла блок должен потускнеть и стать почти прозрачным. При наведении на него все должно вернуться на свои места.
$(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);
}
}
);
});
Вот и все готово! Пользуйтесь :).