Показать Меню
falbar Плавающие меню

Плавающее горизонтальное меню на JQuery

Плавающие меню

Сейчас на многих сайтах можно увидеть плавающие меню, но, как бы оно сложно не выглядело, скрипт, в основном, один и тот же. В этой статье я разберу, как создать такое меню, без лишнего кода и 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);
	});
});

Вот и всё, плавающие горизонтальное меню готово.

Подписаться на обновления

Комментариев еще не оставлено