Наверняка каждый из наших читателей хочет создать и оформить свой ресурс в оригинальном стилизовать свой блог, при этом использовать новые, уникальные элементы дизайна, которые еще не встречались на других сайтах. Несомненно, качественный дизайн привлечет пользователей, ведь если администратор уважает своих посетителей, то и сайт свой будет делать качественным. Одним из важнейших элементов сайта является навигация, с помощью которой пользователь с легкостью может найти необходимую информацию.
Но как оформить навигацию должным способом. В данном уроке мы рассмотрим пример создания навигации для сайта с круговым движением элементов. И так, приступим.
Шаг 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 и представлен исключительно в ознакомительных целях.