Фиксированное горизонтальное меню вверху сайта на jQuery

Разберем способ создания меню, зафиксированного вверху сайта. Для этого есть несколько способов – используя каскадные таблицы стилей либо jQuery. Используя CSS, можно просто закрепить меню в определенном положении. Однако такой способ недостаточно гибок, поэтому лучше прибегнуть к jQuery. При использовании jQuery меню имеет различные виды в начальном состоянии и во время прокрутки. Во время прокрутки оно будет закреплено вверху страницы.

Как создать фиксированное меню вверху сайта

До начала всех действий подключаем jQuery между тегами <head> </head>:

1	<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

После этого сделаем обычный макет страницы:

<h1>Название сайта</h1>

<ul>

<li><a href="#">Главная</a></li>

<li><a href="#">Уроки</a></li>

<li><a href="#">Статьи</a></li>

<li><a href="#">Информация</a></li>

<li><a href="#">Контакты</a></li>

</ul>

</nav>

</header>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa. Cum sociis

natoque penatibus et magnis dis parturient montes, nascetur

ridiculus mus. Donec quam felis, ultricies nec, pellentesque

eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

</div>

Копирайты

</footer>

Обратите внимание на то, что меню Nav присвоено состояние по умолчанию (класс default).

CSS-файл, отвечающий за оформление меню, выглядит так:

nav#menu{

text-transform:uppercase;

text-align:center;

line-height:50px;

background: #E6E6E6;

border-radius:5px;

padding:10px 10px 6px 10px;

margin:5px auto 0;

}

nav#menu ul li{

display:inline;

}

nav#menu ul li a{

text-decoration:none;

color:#7A828B;

font:16px verdana,sans-serif;

padding:15px 30px;

transition:0.5s;

}

nav#menu ul li a:hover{

background: rgb(22, 22, 22);

color: #FFF;

transition:0.5s;

}

.default {

width:920px;

}

.fixed {

position:fixed;

top:-5px; left:0;

width:100%;

padding:10px 0;

-moz-box-shadow: 5px 5px 20px #666;

-webkit-box-shadow: 5px 5px 20px #666;

box-shadow: 0px 5px 10px #666;

border-radius:0 !important;

transition:1s;

background: #E6E6E6; !important;

}

Классы .default и .fixed настраиваются исходя из текущей необходимости.

Создадим jQuery-функцию, которая заменяет в $menu класс default на класс fixed и добавляет функцию fadeIn, отвечающую за отображение элементов на скорости «fast». Функция должна вызываться только если scrollTop больше 120 пикселей, а $menu принадлежит классу default. Аналогичную процедуру функция выполняет с классом fixed.

Демо Скачать