Автор

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

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


 

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

 

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

 

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

Шаг 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 &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);
    }
});
</script>

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

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

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

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


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

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.


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

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


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

В данной заметке представляю весьма элегантный способ это сделать. Реализация с помощью небольшого скрипта jQuery, который позволяет плавно прокрутить страницу как вверх, так и вниз. Плюс простое решение на CSS для кнопок "Вверх" и "Вниз", без картинок.

Дынный скрипт хорош тем, как и плагин с предыдущей статьи на эту тему, что когда страница поднята вверх - кнопка "Вверх" скрыта, когда внизу - скрыта кнопка "Вниз", причем параметры высоты, на которой появляются кнопки регулируется.


75 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close