Все для веб-дизайнера
Навигация для сайта с круговым движением
Наверняка каждый из наших читателей хочет создать и оформить свой ресурс в оригинальном стилизовать свой блог, при этом использовать новые, уникальные элементы дизайна, которые еще не встречались на других сайтах. Несомненно, качественный дизайн привлечет пользователей, ведь если администратор уважает своих посетителей, то и сайт свой будет делать качественным. Одним из важнейших элементов сайта является навигация, с помощью которой пользователь с легкостью может найти необходимую информацию.
Но как оформить навигацию должным способом. В данном уроке мы рассмотрим пример создания навигации для сайта с круговым движением элементов. И так, приступим.
Шаг 1. HTML
Первым шагом будет разметка контейнера wrapper, который содержит изображения для области контента и элемент большого круга. Элементы кругового меню будут находиться в середине большого круга. Также мы создадим разметку для маленьких круговых элементов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<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
Первым делом мы зададим общие правила. Данная навигация будет содержать абсолютное позиционирование.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.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-спрайтов. Осуществим это с помощью следующих параметров:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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 со значением, в половину ширины или высоты.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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); } |
Далее мы зададим правила стилей для маленьких кругов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<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> |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 23.07.2012 в 21:15, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
