Фиксированное, полупрозрачное меню - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Папка это?
Всего ответов: 1108
Статистика


Онлайн всего: 3
Гостей: 2
Пользователей: 1

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Меню для сайта

Фиксированное, полупрозрачное меню

Хочешь сказать спасибо? Кликни на рекламный баннер.

31.05.2015, 15:25
При прокрутке страницы вниз - меню всегда остается вверху и немного тускнеет. При наведении мышки на меню он становится активным.
В данном меню мы разместим несколько ссылок меню, форму поиска, а также ссылки "Вверх" и "Вниз", с помощью которых можно быстро перемещаться в начало или конец сайта/документа.

Давайте начнём!

HTML разметка очень простая. У нас есть div со списком. Элементы списка будут нашими ссылками.

Код
<div id="nav">
<ul>
<li><a class="top" href="#top" id="scrollBottom"><span></span></a></li>
<li><a class="bottom" href="#bottom" id="scrollTop"><span></span></a></li>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
<li><a href="#">Ссылка 5</a></li>
<li><a href="#">Ссылка 6</a></li>
<li class="search">
<input type="text" name="search" maxlength="20"
alt="Поиск" size="20" value="Поиск..."
onblur="if(this.value=='') this.value='Поиск...';"
onfocus="if(this.value=='Поиск...') this.value='';"/>
<input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>


CSS стиль

Код
#nav {
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0px;
left:0px;
right:0px;
background:#fff url(http://megascripts.ru/demo/fiks_menu/images/nav.png) repeat-x center left;
z-index:999999;}

#nav ul {
height:25px;
list-style:none;
margin:6px auto 0px auto;
width:690px;}

#nav ul li {
display:inline;
float:left;
margin:0px 2px;}

#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(http://megascripts.ru/demo/fiks_menu/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(http://megascripts.ru/demo/fiks_menu/images/top.png) no-repeat center center;}
#nav a.bottom span {background:transparent url(http://megascripts.ru/demo/fiks_menu/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.searchbutton {
border:1px solid #ccc;
padding:1px;
cursor:pointer;
width:30px;
height:22px;
background:#E8E9EA url(http://megascripts.ru/demo/fiks_menu/images/search.png) no-repeat center center;}

input.searchbutton:hover {background-color:#D9D9DA;}


Навигация всегда будет в самом верху, так как мы ее "приклеиваем" с помощью position:fixed и top:0px. Фоновое изображение будет полупрозрачный фон в стиле кнопки с небольшим 3D-эффектом. Поскольку он полностью прозрачен, вы можете попробовать изменить цвет фона по умолчанию вместо белого (#ffffff).

Мы выставляем также высокий z-index, так как хотим, чтобы этот блок был поверх всех элементов.

У списка фиксированная ширина 690 пикселей, и он позиционирован строго по центру. Чтобы выровнять относительно позиционированный элемент достаточно указать правый и левый отступ (margin) - auto.

Элементы списка идут друг за другом благодаря display:inline.

У ссылок также будет полупрозрачный фон. Опять же тут можно поэкспериментировать с цветом фона.

При наведении на элемент ссылки, мы убираем фон и изменяем фоновый цвет.

Вот и все со стилями!

JavaScript (jQuery)

Код
$(document).ready(function(){
//Обработка нажатия на кнопку "Вверх"
$("#scrollBottom").click(function(){
//Необходимо прокрутить в начало страницы
var curPos=$(document).scrollTop();
var scrollTime=curPos/1.73;
$("body,html").animate({"scrollTop":0},scrollTime);
});

//Обработка нажатия на кнопку "Вниз"
$("#scrollTop").click(function(){
//Необходимо прокрутить в конец страницы
var curPos=$(document).scrollTop();
var height=$("body").height();
var scrollTime=(height-curPos)/1.73;
$("body,html").animate({"scrollTop":height},scrollTime);
});
});

$(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);
}
}
);
});


Вот и все готово! Пользуйтесь smile





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Похожие материалы :
Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 2171 | Загрузок: 150 | Рейтинг: 4.3/3
Теги: скрипт, фиксированное меню, меню
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Корову можно заставить подняться по лестнице, но невозможно заставить спуститься.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта