Плавающее меню на сайте с помощью css

Думаю, многие видели на современных сайтах верхнее меню, которое при прокрутки мыши прилипает (фиксируется) сверху экрана. Рассмотрим способ реализации данной задачи.

Проще всего сделать такое меню с помощью обычного css.

Рассмотрим на живом примере. Допустим у нас такая структура меню (горизонтальное, сверху экрана).

<div class="menuskived defaultskived"><ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Joolma</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>

Для того, чтобы оно автоматически прилипало к верху страницы достаточно добавить стиль:
<style>.menuskived {position:fixed;top:0px;left:0px; width:100%;padding:5px 0;}</style>

position:fixed; - позволяет прокручивать меню сверху страницы
top:0px; - указывает, что меню начинается с самого верха страницы.
left:0px; - сдвигает меню в левую часть экрана

Таким не хитрым методом мы можем зафиксировать любое меню сверху экрана.

Полный код примера со стилями:

<style>
.menuskived {position:fixed;top:0px;left:0px;width:100%;padding:5px 0;text-transform: uppercase; text-align: center; line-height: 50px; background: #69c; }
.menuskived ul {padding:0; margin:0;}
.menuskived li{display: inline;}
.menuskived li a {padding: 5px 20px; color: #fff;text-decoration: none;}
</style>
<div class="menuskived defaultskived"><ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Joolma</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>

Останется только сдвинуть основной контент сайта на величину, равную высоте меню. Так как если после такого меню вывести какой-либо контент, то меню будет закрывать его. Чтобы избежать данной проблемы поставьте отступ сверху на body или div с вашим контентом. Например так: body {margin-top: 100px;}.

На заметку.

Свойство fixed часто используется для создания плавающего фона. Например, когда нужно, чтобы при прокрутки страницы фон оставался на месте, а сайт прокручивался. Для этого вы можете использовать следующий стиль:

<style>
background: url('ссылка_на_картинку_фона') fixed no-repeat;
background-size: cover;
</style>