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

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

Шаг 1. HTML

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

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

Шаг 2. CSS

Первым делом мы зададим общие правила. Данная навигация будет содержать абсолютное позиционирование.

Главное меню в большом круге будет достигнуто с помощью CSS-спрайтов. Осуществим это с помощью следующих параметров:

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

Далее мы зададим правила стилей для маленьких кругов.

Следует заметить, что параметры text-shadow и box-shadow - являются свойствами CSS3, которые не будут работать  браузере IE.

Шаг 3. JavaScript

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

  • center x = абсолютная левая координата circleBig + радиус circleBig;
  • center y = абсолютная верхняя координата circleBig + радиус circleBig;
  • radius r = ширина circleBig / 2.

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

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

Читайте также: