Красивая навигация на CSS и JQuery

Сегодня я хочу показать вам, как создавать выдвижное меню для вашего сайта. Навигация будет почти скрыта - элементы выскользнут только, когда пользователь наведёт на чуть выступающую с краю площадку. Это дает прекрасный эффект и к тому же данная техника не займёт много места на вашем сайте. Пункты будут полупрозрачными, это означает, что содержание под ними не будет полностью скрыто.

Установка : 

Файл style.css в папку css, изображения в папку images.
Между тегами <head></head> пишем :

Code
<link rel="stylesheet" href="/css/style.css">


На странице которой мы хотим видеть меню ставим :

Code

  <ul id="navigation">  
  <li class="home"><a href="" title="Домой"></a></li>  
  <li class="about"><a href="" title="Обо мне"></a></li>  
  <li class="search"><a href="" title="Поиск"></a></li>  
  <li class="photos"><a href="" title="Фото"></a></li>  
  <li class="rssfeed"><a href="" title="Rss лента"></a></li>  
  <li class="podcasts"><a href="" title="Подкасты"></a></li>  
  <li class="contact"><a href="" title="Контакт"></a></li>  
  </ul>  

<script>  
  $(function() {  
  $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);  

  $('#navigation > li').hover(  
  function () {  
  $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);  
  },  
  function () {  
  $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);  
  }  
  );  
  });  
  </script>

  • FalleN

  • 6230

  • 1

  • 264

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!