Сейчас на многих сайтах можно увидеть плавающие меню, но, как бы оно сложно не выглядело, скрипт, в основном, один и тот же. В этой статье я разберу, как создать такое меню, без лишнего кода и CSS строк.
Первым делом необходимо нанести HTML разметку на странице. Структура будет состоять из дива, в котором находиться список с пунктами меню:
<!-- Структура скролмени -->
<div class="scrollmenu">
<ul>
<li>Пункт №1</li>
<li>Пункт №2</li>
<li>Пункт №3</li>
<li>Пункт №4</li>
<li>Пункт №5</li>
<li>Пункт №6</li>
</ul>
</div>
<!-- Структура скролмени -->
Далее мы наметим несколько блоков для теста:
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
И так, структура нашего плавающего горизонтального меню готова, стилизуем его:
/*****Оформление*****/
/*****Оформление*****/
body{margin: 0; padding: 0;}
.block1,
.block2,
.block3{
border: 2px solid red;
width: 800px;
height: 300px;
margin: 15px auto;
}
.block1{background-color: #8EC1DA;}
.block2{background-color: #420100;}
.block3{background-color: #6CE26C;}
div.scrollmenu{
background-color: #3187D0;
margin: 0 auto;
}
div.scrollmenu ul{
width: 70%;
margin: 0 auto;
padding: 15px 0 0px;
text-align: justify;
overflow: hidden;
}
div.scrollmenu ul:after{
content: "";
width: 100%;
display: inline-block;
}
div.scrollmenu ul li{
display: inline-block;
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
/*****END Оформление*****/
/*****END Оформление*****/
div.scrollmenu{
width: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.3;
z-index: 999;
display: none;
}
div.scrollmenu:hover{
opacity: 1;
}
Общие стили, как видно, я отделил от основных комментариями. После того, как мы написали HTML и CSS, осталось написать сам скрипт, не забываем подключить библиотеку jQuery и приступаем к написанию. Для того что бы реализовать плавающие горизонтальное меню, нам потребуется повесить обработчик прокрутки на окно. Далее в зависимости от величины прокрутки мы показываем или прячем меню.
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 250)
$("div.scrollmenu").fadeIn();
else
$("div.scrollmenu").fadeOut(400);
});
});
Вот и всё, плавающие горизонтальное меню готово.