Показать Меню
falbar Меню для лейдинга

Меню для лейдинга

Меню для лейдинга

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

Скрестить меню с полоской загрузки лоудера, да ещё и эффект скроллинга снизу добавить – как Вам такое? Страница получается символичной, особенно если это лейдинг – кликаем по меню и опускаемся все ниже и ниже.

Скачав архив, Вы вместе с интересным дизайном получите ещё и плавную прокрутку по пунктам меню. При помощи jQuery и CSS3 сделана плавная смена цвета шкалы и изменение размера в зависимости от расположения пользователя на странице.

Вот ещё несколько статей по теме, которые возможно будут Вам интересны:

Подключаем скрипты и стили:

<link href="main.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="init.js" type="text/javascript"></script>

CSS файл содержит стили, относящиеся именно к отображению меню. Я не стал добавлять их в статью, так как при просмотре файла и так понятно - что происходит. В другом файле init.js находится скрипт, отвечающий за плавную прокрутку и смену сладов на экране.

HTML:

<div class="menu">
	<div class="slider">
		<ul>
			<li class="category active">
				<a href="#home">HOME</a>
			</li>
			<!--
				Тут указываем нам
				необходимые пункты меню
			-->
		</ul>
		<div class="bar">
			<div class="before"></div>
			<a class="knob"></a>
			<div class="after"></div>
		</div>
		<!--
			В элементе с классом .bar
			реализована изменяющаяся школа
		-->
	</div>
</div>

Далее следует оставшаяся разметка:

<div id="home" class="container">
	<!--
		Сюда добавляем контент
		для каждого экрана, а id элемента меняем
		на соответствующий href пункт меню
	-->
</div>

Вот и всё - меню готово, делая маленький вывод по данному решению: оно подойдёт там, где важно чем-то зацепить пользователя.

Источник
www.webdesigncrowd.com

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

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