Автор

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

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


 

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

 

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

 

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

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

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

Шумиха по поводу CSS4 возникла абсолютно из ниоткуда, так как мы только привыкли к CSS3, и все планируют использовать эту технологию еще какое-то время. Разработчики браузеров усиленно работают над тем, чтобы их продукт поддерживал самые последние эффекты и свойства, а разработчики внешних интерфейсов создают все больше и больше инструментов для более эффективной работы с таблицами стилей. И сейчас довольно странно слышать что-либо о CSS4. Сразу навязывается вопрос: «А как же CSS3? Разве уже всё?».


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

Дорогие веб-мастера, хочу поделиться с вами очень хорошим решением создания календаря событий, так как при создании нового сайта заказчику нужен был именно ткого рода календарь мероприятий и я перелопатил весь инет в поисках чего-то приличного! И вот оно счастье!!! Я выкладываю уже перелапаченый мной вариант и в него забил даты до 28.01.2021.


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

Бывают такие ситуации, когда необходимо реализовать достаточно простые эффекты, но из-за упущенных элементарных знаний возникают сложности. Так мы сегодня решили Вам рассказать и показать процесс реализации простого hover-эффекта для изображений с эффектом параллакса. Идея достаточно проста и банальна, у нас есть изображение, которое мы помещаем в рамку и скрываем края, при наведении курсора мыши изображение будет оживать и следовать за курсором, что придаст эффект «живого» изображения для ваших картинок.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close