Навигация для сайта с круговым движением с помощью jQuery

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

Первым шагом будет разметка контейнера wrapper, который содержит изображения для области контента и элемент большого круга. Элементы кругового меню будут находиться в середине большого круга. Также мы создадим разметку для маленьких круговых элементов.

<div id="wrapper">

	<div id="content">
		<div class="wrapper">

			<div id="images" class="images">
<img id="image_about" src="images/1.png" alt="1" style="display:block;" />
<img id="image_portfolio" src="images/2.png" alt="2" />
<img id="image_contact" src="images/3.png" alt="3" />
			</div>
			<div class="circleBig">
				<div id="menu" class="menu">
	<a id="about" class="about" href="#">Обо мне</a>
	<a id="portfolio" class="portfolio" href="#">Портфолио</a>
	<a id="contact" class="contact" href="#">Контакты</a>
				</div>
			</div>

		</div>

		<div id="circle_about" class="circle">
			<div class="description">
				<ul>
					<li><a href="#">Информация</a></li>
					<li><a href="#">Мои работы</a></li>
					<li><a href="#">Мое резюме</a></li>
				</ul>
			</div>
		</div>
		<div id="circle_portfolio" class="circle">
			<div class="description">
				<div class="thumbs">
<a href="#"><img src="thumbs/1.jpg" alt="" /></a>
<a href="#"><img src="thumbs/2.jpg" alt="" /></a>
<a href="#"><img src="thumbs/3.jpg" alt="" /></a>
<a href="#"><img src="thumbs/4.jpg" alt="" /></a>
<a href="#"><img src="thumbs/5.jpg" alt="" /></a>
<a href="#"><img src="thumbs/6.jpg" alt="" /></a>
<a href="#"><img src="thumbs/7.jpg" alt="" /></a>
<a href="#"><img src="thumbs/8.jpg" alt="" /></a>
<a href="#"><img src="thumbs/9.jpg" alt="" /></a>
				</div>
			</div>
		</div>
		<div id="circle_contact" class="circle">
			<div class="description">
				<ul>
					<li><a href="#">Email</a></li>
					<li><a href="#">Twitter</a></li>
					<li><a href="#">Facebook</a></li>
				</ul>
			</div>
		</div>

	</div>

</div>

<a id="portfolio" class="portfolio" href="#">Портфолио</a>

<a id="contact" class="contact" href="#">Контакты</a>

</div>

<ul>

<li><a href="#">Информация</a></li>

<li><a href="#">Мои работы</a></li>

<li><a href="#">Мое резюме</a></li>

</ul>

</div>

</div>

<ul>

<li><a href="#">Email</a></li>

<li><a href="#">Twitter</a></li>

<li><a href="#">Facebook</a></li>

</ul>

</div>

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

Шаг 2. CSS

Первым делом мы зададим общие правила. Данная навигация будет содержать абсолютное позиционирование.

.wrapper {
	font-family: Verdana;
	font-size: 11px;
	width: 600px;
	height: 600px;
	position: relative;
	top: 150px;
	left: 200px;
}

.images img { display: none; position: absolute; left: 6px; top: 6px; }

.circleBig {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 418px;
	height: 418px;
	background: transparent url('images/circlebg.png') no-repeat top left;
}

.wrapper {

font-family: Verdana;

font-size: 11px;

width: 600px;

height: 600px;

position: relative;

top: 150px;

left: 200px;

}

.images img { display: none; position: absolute; left: 6px; top: 6px; }

.circleBig {

position: absolute;

top: 0px;

left: 0px;

width: 418px;

height: 418px;

background: transparent url('images/circlebg.png') no-repeat top left;

}

Главное меню в большом круге будет достигнуто с помощью CSS-спрайтов. Осуществим это с помощью следующих параметров:

.menu {
	position: absolute;
	width: 101px;
	height: 74px;
	top: 240px;
	left: 260px;
	z-index: 999;
}

a.about, a.portfolio, a.contact {
	float: left;
	clear: both;
	height: 23px;
	margin-bottom: 10px;
	width: 105px;
	text-indent: -2000000px;
	opacity: 0.8;
	background: transparent url('images/menu.png') no-repeat top left;
}

a.portfolio { width: 90px; background-position: -105px 0px; }
a.contact { width: 88px; background-position: -199px 0px; }
a.about:hover, a.portfolio:hover, a.contact:hover { opacity: 1.0; }

.menu {

position: absolute;

width: 101px;

height: 74px;

top: 240px;

left: 260px;

z-index: 999;

}

a.about, a.portfolio, a.contact {

float: left;

clear: both;

height: 23px;

margin-bottom: 10px;

width: 105px;

text-indent: -2000000px;

opacity: 0.8;

background: transparent url('images/menu.png') no-repeat top left;

}

a.portfolio { width: 90px; background-position: -105px 0px; }

a.contact { width: 88px; background-position: -199px 0px; }

a.about:hover, a.portfolio:hover, a.contact:hover { opacity: 1.0; }

Чтобы маленькие круги пришли к заданной траектории нам необходимо задать позиционирование. Для этого мы будем использовать отрицательного margin со значением, в половину ширины или высоты.

.circle {
	margin-top: -88px;
	margin-left: -88px;
	width: 176px;
	height: 176px;
	position: absolute;
	left: 0;
	top: 0;
	background: transparent url('images/circle.png') no-repeat top left;
	z-index: 10;
	opacity: 0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

.circle {

margin-top: -88px;

margin-left: -88px;

width: 176px;

height: 176px;

position: absolute;

left: 0;

top: 0;

background: transparent url('images/circle.png') no-repeat top left;

z-index: 10;

opacity: 0;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);

}

Далее мы зададим правила стилей для маленьких кругов.

.description { width: 120px; margin: 40px auto; text-align: center; }
.description ul { list-style: none; text-align: center; }

.description ul a {
	line-height: 30px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 11px;
	text-shadow: 1px 1px 1px #aaa;
}
.description ul a:hover { color: #f0f0f0; }

.thumbs a img {
	border: 3px solid #f9f9f9;
	-moz-box-shadow: 1px 1px 2px #999;
	-webkit-box-shadow: 1px 1px 2px #999;
	box-shadow: 1px 1px 2px #999;
}

.description { width: 120px; margin: 40px auto; text-align: center; }

.description ul { list-style: none; text-align: center; }

.description ul a {

line-height: 30px;

font-weight: bold;

color: #fff;

text-decoration: none;

text-transform: uppercase;

font-size: 11px;

text-shadow: 1px 1px 1px #aaa;

}

.description ul a:hover { color: #f0f0f0; }

.thumbs a img {

border: 3px solid #f9f9f9;

-moz-box-shadow: 1px 1px 2px #999;

-webkit-box-shadow: 1px 1px 2px #999;

box-shadow: 1px 1px 2px #999;

}

Следует заметить, что параметры text-shadow и box-shadow - являются свойствами CSS3, которые не будут работать браузере IE.

Шаг 3. JavaScript

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

center x = абсолютная левая координата circleBig + радиус circleBig;
center y = абсолютная верхняя координата circleBig + радиус circleBig;
radius r = ширина circleBig / 2.

&lt;script type="text/javascript"&gt;
$(function() {

	/* при загрузке страницы анимируем секцию about по умолчанию */
	// move( $('#about'), 2000, 2 );

	$('#menu &gt; a').mouseover( function() {
		var $this = $(this);
		move( $this, 800, 1 );
	});

	/*
		функция для анимации / показа одного круга.
		speed  - это время, которое занимает показ круга
		turns - это время, которое занимает поворот малого круга вокруг большого
	*/
	function move( $elem, speed, turns )
	{
		var id = $elem.attr('id');
		var $circle = $('#circle_'+id);

		/* если мышь над тем же элементом, то ничего не делаем */
		if( $circle.css('opacity') == 1 ) return;

		/* меняем изображение */
		$('#image_'+id).stop(true,true).fadeIn(650).siblings().not(this).fadeOut(650);

		/*
			если круг уже есть, то его следует убрать:
			либо анимировать его круговое движение либо просто загасить,
			в зависимости от его текущей позиции
		*/
		$('#content .circle').each( function(i)
		{
			var $theCircle = $(this);

			if( $theCircle.css('opacity') == 1 )
				$theCircle.stop().animate({
					path : new $.path.arc({
					center  : [409,359],
					radius  : 257,
					start   : 65,
					end     : -110,
					dir : -1
					}), opacity: '0'
				},1500);
			else
				$theCircle.stop().animate({opacity: '0'},200);
		});

		/* сделаем появление круга в круговом движении */
		var end = 65 - 360 * (turns-1);
		$circle.stop().animate({
			path : new $.path.arc({
			center  : [409,359],
			radius  : 257,
			start   : 180,
			end     : end,
			dir     : -1
			}), opacity: '1'
		},speed);
	}
});
&lt;/script&gt;

$(function() {

/* при загрузке страницы анимируем секцию about по умолчанию */

// move( $('#about'), 2000, 2 );

$('#menu > a').mouseover( function() {

var $this = $(this);

move( $this, 800, 1 );

});

функция для анимации / показа одного круга.

speed - это время, которое занимает показ круга

turns - это время, которое занимает поворот малого круга вокруг большого

function move( $elem, speed, turns )

{

var id = $elem.attr('id');

var $circle = $('#circle_'+id);

/* если мышь над тем же элементом, то ничего не делаем */

if( $circle.css('opacity') == 1 ) return;

/* меняем изображение */

$('#image_'+id).stop(true,true).fadeIn(650).siblings().not(this).fadeOut(650);

если круг уже есть, то его следует убрать:

либо анимировать его круговое движение либо просто загасить,

в зависимости от его текущей позиции

$('#content .circle').each( function(i)

{

var $theCircle = $(this);

if( $theCircle.css('opacity') == 1 )

$theCircle.stop().animate({

path : new $.path.arc({

center : [409,359],

radius : 257,

start : 65,

end : -110,

dir : -1

}), opacity: '0'

},1500);

else

$theCircle.stop().animate({opacity: '0'},200);

});

/* сделаем появление круга в круговом движении */

var end = 65 - 360 * (turns-1);

$circle.stop().animate({

path : new $.path.arc({

center : [409,359],

radius : 257,

start : 180,

end : end,

dir : -1

}), opacity: '1'

},speed);

}

});

</script>

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Навигация для сайта с круговым движением

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JavaScript

Вот и все. Готово!

Читайте также:

Интересно:

Опрос блога

Наши партнеры

Популярные статьи

Навигация для сайта с круговым движением

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JavaScript

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Опрос блога

Наши партнеры

Популярные статьи