thumb-kak-sdelat-plavaushuu-shapku-dlya-saita

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

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

1. Для того чтобы плавающее меню работало у вас в IE, необходимо чтобы на сайте присутствовала следующая строчка:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. Эффект плавающего меню использует библиотеку Jquery, скачать последнюю версию можно со страницы: http://jquery.com/download/ . Скачиваем последнюю версию JQuery и подключаем ее на страницу, где будет использоваться плавающее меню или шапка сайта. Если вы используете CMS WordPress, вам необходимо вставить следующий код в файл темы header.php, между тегами <head> и </head>.


<script type="text/javascript" src="имя_файла_вашей_версии_jquery.js"></script>

3. Вставляем стили CSS в файл. Также прописываем их в шапке файла, между тегами <head> и </head>.


<style type="text/css">

#content {margin:0px auto;margin-top:100px;width:80%;text-align:left;}

#header-menu { margin:0px auto;width:450px;background:#000;} //- стиль шапки или меню(содержимого), которое будет перемещаться в плавающем блоке

</style>

4. Вставляем div-блоки, которые будут отвечать за меню. Плавающее меню основывается на 2 блоках DIV.


<div id="content"> <!-- Содержит весь текст и плавающий блок. Плавающий блок перемещается в рамках блока content -->

<div id="float"></div> <!-- Плавающий блок, изначально пуст-->
<div id="header-menu"> <!-- содержимое плавающего блока-->

<a href='#'>Главная</a><a href='#'>Блог</a><a href='#'>Новости</a><a href='#'>Обо мне</a><a href='#'>Контакты</a>
</div>

5. Вставляем Jquery-скрипт, который и будет все делать. Скрипт основывается на изменении свойства position, для плавающего блока. Постараюсь объяснить: изначально в скрипте считывается информация о начальном положении блока содержимого относительно краев окна браузера, запоминает их.

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

Пример Jquery кода:


<script language="javascript">
$(document).ready(function(){
var headermenu = $("#header-menu");
var offset = headermenu.offset();
var left = offset.left;
var top = offset.top;
var width = $("#header-menu").width();
var height = $("#header-menu").height();

$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > top) {
$('#float').css({
width:width+'px',
height:height+'px'
});
$('#header-menu').css({
left:left+'px',
position:'fixed',
top:"0px",
width:width+"px"
});
} else {
$('#float').css({
width:'0px',
height:'0px'
});
$('#header-menu').css({
position:'static',
});
}
});
});
</script>

Данный код необходимо вставить между тегами <head> и </head>, но после кода подключения библиотеки Jquery(2 этап, данного руководства). Соответственное если вы вместо блока с содержимым header-menu будете использовать, блок с другим ID, не забудьте переименовать соответствующие переменные, в коде приведенном выше.

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

Надеюсь, что данный скрипт и данная статья украсит, при помощи ваших сил украсит не один сайт. В общем пользуйтесь друзья. Спасибо за внимание, всем пока!

С уважением, . Google+