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



 

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

 

ДЕМО
ИСХОДНИКИ

 

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

Шаг 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>

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

Шаг 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;
}

Главное меню в большом круге будет достигнуто с помощью 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; }

Чтобы маленькие круги пришли к заданной траектории нам необходимо задать позиционирование. Для этого мы будем использовать отрицательного 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);
}

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

.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.

<script type="text/javascript">
$(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>

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

Материал взят из зарубежного источника - tympanus.net/codrops/2010/05/07/stunning-circular-motion-effect и представлен исключительно в ознакомительных целях.


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!