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

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

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

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

Шаг 1. HTML

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

</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;

}

Главное меню в большом круге будет достигнуто с помощью 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. Следующая формула дает нам координаты центра: