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

6 августа 2014 Антон Кулешов 1773 0

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

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Lightbox от falbar или falbox

20 октября 2015 Антон Кулешов

Совсем недавно, занимаясь внутренним обновлением сайта, я заметил, что в некоторых статьях есть картинки большей ширины, чем сам блок с контентом. Конечно, визуальному восприятию это не мешало, тем более что, я заранее старался подгонять картинки так, чтобы текст на них оставался читаемым. Однако, заглядывая в будущее, я решил, что возможность увеличения изображения для детального его рассмотрения будет весьма кстати даже на моём скромном сайте. Поэтому я написал функциональный lightbox с элементами слайдера и галереи, которым и решил поделиться в этой статье.

Простой lightbox на JavaScript без jQuery

30 июля 2014 Антон Кулешов

Если порыться по интернету, то можно найти кучу вариаций по созданию lightbox. В основном их делают при помощи библиотек (jQuery). Когда сайт большой и скрипта много, это правильное решение. Зачем тратить время на всякие проверки, к тому же ещё и для ie придётся пол кода дописывать. Но если сайт не значительных размеров или вы не ориентируетесь на старые версии браузеров, то, тут я думаю, нет смысла тянуть библиотеку в десять тысяч строк кода, а то и больше, для реализации всплывающей подсказки или формы обратной связи.

Плавная кнопка прокрутки «Наверх»

19 ноября 2014 Антон Кулешов

В этой статье я хочу уделить внимание такому вопросу: как сделать кнопку прокрутки «Наверх»? После прочтения вы получите готовый скрипт, который без труда установите себе на сайт.