Плавно исчезающая панель навигации на CSS и jQuery

В сегодняшней статье я расскажу Вам, как создать верхнюю панель навигации, которая становится полупрозрачной при прокрутке страницы вниз.

Идея заключается в фиксированной панели навигации, которая следует за пользователем и плавно становится полупрозрачной, когда он прокручивает страницу.  Когда пользователь наводит курсор на эту панель навигации, она становится непрозрачной.

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

Выглядеть все это будет так

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  - это стрелки, при клике на которые пользователь перейдет в начало или в конец страницы. В качестве адреса ссылки (HREF) используются якоря, которые ведут на некоторые элементы, имеющие идентификатор top и bottom. Это может быть блок комментариев внизу страницы. В этом случае вам нужно будет сослаться на якорь комментариев  #comments вместо #bottom.

Span, которые находятся внутри ссылок с классом top и bottom содержат фактические стрелки в качестве фонового изображения.

Кнопка поиска не будет  иметь значения «Отправить», поскольку мы зададим ей фоновое изображение.

Теперь давайте посмотрим на стили панели навигации.

2. CSS

Давайте сначала определим основные стили блока навигации:

#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. Фоновое изображение будет полупрозрачным.

Установим 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;

  }
    

Маркированный список имеет фиксированную ширину 600px и будет позиционироваться в центре навигации. Центрирование элементов может быть достигнуто, заявив, что отступы с левого и правого края будут изменяться автоматически (margin:6px auto 0px auto;).

Элементы списка должны быть приведены в соответствие друг рядом с другом. Для этого мы определим  display:inline. Также прижмем все элементы к левому краю и зададим отступ в 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(../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;

  }

Отступ margin - слева будет немного больше, потому что мы хотим разделить другие ссылки от поиска.

Кнопка "Отправить"  будет иметь следующий стиль:

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 не будет иметь никакого значения. Вместо этого, мы будем иметь икону как фоновое изображение.

Теперь давайте добавим обработчик 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);

  }

  }

  );

});

Скачать исходники можно здесь!

И это все! Наслаждайтесь!

Источник статьи: http://tympanus.net/