—»     —»   Разработка округлого вращающегося меню на CSS
  Раздел: CSS/Style Sheets   Комментариев: 3  

Разработка округлого вращающегося меню на CSS



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

На пути нам нужно будет преодолеть несколько преград, состоящих из того, как лучше структурировать наш HTML-код таким образом, чтобы мы могли управлять им удаленно, и как расположить все элементы так, чтобы все работало. Этим довольно интересно заниматься, поэтому давайте приступать!

Посмотреть демо | Скачать файлы

Этап 1: Структурируем HTML

Перед тем, как написать хоть что-то на HTML, нам нужно определить структуру того, что мы собираемся создать. Для этого мы можем открыть Photoshop и создать простенький набросок того, как мы хотим, чтобы выглядело наше меню. Вот что у нас получилось:

Разработка округлого вращающегося меню на CSS

Каждый прямоугольник сверху привязан к одной из 4 окружностей внутри большого круга. Когда курсор мыши наводится на прямоугольник, соответствующая ему маленькая окружность будет перемещена к верху меню. Опять же, мы используем идеи «удаленного» наведения, в которой пользователь взаимодействует с одной областью, и это отражается в другой.

Каждый раз, когда я занимался разработкой удаленного наведения, все правильно структурировать у меня выходило лишь с третьего раза. Это происходит из-за того, как работают CSS-селекторы и, что более важно, из-за того, как ведет себя псевдо класс hover. Давайте рассмотрим следующий код:

<div class="item-1">
<a href="#">anchor</a>
</div>

<div class="item-2">
<p>target</p>
</div>

Давайте предположим, что мы все расположили таким образом, чтобы при наведении на анкорную ссылку изменялся цвет параграфа. Если вы понимаете, как работает удаленное наведение, то можете воспользоваться следующим CSS:

a:hover p {
color: blue;
}

Как выясняется, это не сработало! В нашем CSS-селекторе нам нужно связать анкорную ссылку, на которую будет наводиться курсор мыши, с параграфом, но ведь наши элементы находятся в двух разных div-элементах. И у нас нет возможности быстро и просто так высоко взобраться на древо DOM.

Так что же нам делать? Ответ заключается в реструктуризации HTML. На этот раз мы связываем два элемента на одном и том же уровне дерева.

<div class="item-1">
<a href="#">anchor</a>
<p>target</p>
</div>

Теперь наш элемент параграфа является родственным нашей анкорной ссылке, что означает, что у нас есть простой способ связать их вместе в нашем CSS-коде. Давайте посмотрим, как это работает:

a:hover + p {
color: blue;
}

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

Приложение

Если мы применим наши знания к этому сценарию, то мы можем заставить структуру работать. Начните с создания трех div-элементов: оболочки, меню и окружности. Вложите меню внутрь оболочки, а окружность внутрь меню.

<div class="wrapper">
<div class="menu">
<div class="circle">
</div>
</div>
</div>

Внутри div’а меню разместите 4 наши анкорные ссылки – каждую с уникальным классом. Внутрь div’а окружности поместите неупорядоченный список, содержащий числа от 1 до 4.

<div class="wrapper">
<div class="menu">
<a href="#" class="one">One</a>
<a href="#" class="two">Two</a>
<a href="#" class="three">Three</a>
<a href="#" class="four">Four</a>

<div class="circle">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

</div>
</div>

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

Разработка округлого вращающегося меню на CSS

Этап 2: CSS-код оболочки

Вышеприведенный код представляет весь HTML, который нам нужен для нашего маленького проекта. Большая часть нашей работы располагается в CSS. Чтобы начать, давайте используем основной и позиционирующий код:

* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}

/*WRAPPER*/
.wrapper {
position: relative;
margin: 20px auto;
width: 370px;
}

Здесь, в принципе, нет ничего сложного, так как мы просто расчерчиваем оболочку. Обратите внимание, что здесь -webkit-backface-visibility используется для предотвращения бага, который возникает и приводит к мерцанию CSS-переходов при работе в браузерах семейства WebKit.

Этап 3: CSS окружности

Далее давайте перейдем к разработке кода большой окружности. Создать окружность при помощи CSS довольно просто, просто не забудьте вставить равные значения параметров ширины и высоты, а параметр border-radius выставляйте на, как минимум, 50%. Все остальное здесь просто помогает все правильно расставить.

/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #093b62;
}

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

/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #093b62;

box-shadow: inset 0px 0px 30px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0,0,0,0.3);

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

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

Разработка округлого вращающегося меню на CSS

Этап 4: CSS меню

В этом этапе мы займемся оформлением пунктов меню. Чтобы сделать это, укажите анкорные ссылки, добавьте поля и отступы, выставите параметр ширины и цвета, укажите text-decoration и оформите шрифт. Затем укажите положение при наведении и добавьте фоновый цвет. Наш код будет таким:

.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}

.menu a:hover {
background: #eee;
}

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

Разработка округлого вращающегося меню на CSS

Этап 5: CSS маленькой окружности

Чтобы создать маленькие кружочки, мы сначала определяем пункты списка, и делаем все примерно так же, как и в случае с большим кругом: делаем ширину и высоту равными, и выставляем border-radius на 50%. Также не забудьте убрать табуляцию списка, установить белый фон, и оформить шрифт по образу, который вы можете видеть ниже.

/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
}

Здесь начинается сложный момент. Выше вы задали каждой окружности абсолютное позиционирование, и теперь нам нужно расставить их по местам. Мы можем выбрать каждую отдельную окружность при помощи nth-child, затем использовать top и left, чтобы расположить их там, где нам угодно. Наконец, нам нужно сделать так, чтобы верхняя часть каждой цифры соприкасалась с внешней границей большого круга. Таким образом, когда весь элемент вращается, число в самом верху всегда будет нужной стороной вверх. Это можно реализовать при помощи css-трансформации.

.circle li:nth-child(1) {
top: 15px;
left: 125px;
}

.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

.circle li:nth-child(3) {
top: 235px;
left: 125px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

.circle li:nth-child(4) {
top: 125px;
left: 15px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}

Если мы посмотрим на превью, все должно выглядеть довольно привлекательно. Но все же есть кое-что, что еще нужно исправить.

Разработка округлого вращающегося меню на CSS

Этап 6: CSS внутренней окружности

Изначально наша идея заключалась не в том, чтобы у нас была одна большая окружность, - в ней также был еще один маленький круг. Мы можем сделать это без какого-либо дополнительного HTML-кода, вместо этого мы воспользуемся нашим старым другом – before. Создайте элемент до оболочки, выставите значение контента на DS, сделайте из него окружность, как мы это уже делали ранее (только на этот раз используйте значение 130 пикселей), выровняйте и оформите текст, переместите его поверх остальных при помощи z-index, и задайте ему место расположения при помощи абсолютного позиционирования.

/*INNER CIRCLE*/
.wrapper:before {
content: "DS";
text-align: center;
font: 70px/135px Georgia, Times, serif;
color: #efefef;
position: absolute;
top: 140px;
left: 110px;
z-index: 10;
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;

-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}

Теперь все выглядит намного лучше! На этом визуальное оформление готово. Теперь нам нужно «оживить» наше чадо!

Разработка округлого вращающегося меню на CSS

Этап 7: CSS окружности при наведении

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

Самая сложная часть заключается в настройке селектора. Мы начинаем с самого высшего уровня, который содержит как div circle, так и пункты меню (то есть, div menu). Затем мы сокращаем наши опции в отдельный дочерний элемент меню и определяем его при наведении. Наконец, мы сообщаем браузеру, что нам нужно запустить этот механизм при наведении курсора мыши по одному из родственных элементов с классом circle. Вот как это выглядит на практике:

.menu > .two:hover ~ .circle {
}

Это довольно сложный селектор, но он отлично выполняет работу, и позволяет нам повеселиться и поэкспериментировать. Теперь, так как мы указывали окружность под цифрой 2, нам нужно прокрутить весь div на 90 градусов. Также, учитывая тот факт, что нам нужно вращать элемент против часовой стрелки, число будет отрицательным:

.menu > .two:hover ~ .circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}

И на этом все! Теперь мы просто используем тот же механизм для всех четырех окружностей. Начинаем вращение с 0, затем переходим к -90, затем к -180 и, наконец, к -270.

/*HOVER STATES*/
.menu > .one:hover ~ .circle {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

.menu > .two:hover ~ .circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}

.menu > .three:hover ~ .circle {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}

.menu > .four:hover ~ .circle {
-webkit-transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}

Вот и все

Поздравляем, вы закончили! Теперь пришло время пожать плоды нашего труда! Давайте перейдем к просмотру демо.

Демо: кликните, чтобы запустить.

Разработка округлого вращающегося меню на CSS

Как обычно, хочу поблагодарить вас за то, что стерпели, и дошли до конца такого сложного и объемного руководства! Надеюсь, что вам понравится этот эксперимент, и что вы обязательно выскажете свое мнение или пожелания в комментариях! Хотели бы вы и дальше видеть подобные эксперименты?
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 10628   |   Оставлено комментариев: 3
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 13 февраля 2013 @ 15:06
Написал: mrnobody — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А ширина враппера в 3670px — это не опечатка?
И зачем автор статьи задавал ширину в 50px элементу a, ведь он строчный элемент.
Комментарий #2: 13 февраля 2013 @ 15:15
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
mrnobody, да, по врапперу опечатка. Должно быть 370 пикселов. Исправлено.
Комментарий #3: 6 марта 2013 @ 10:23
Написал: Vatrych — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Мне нравятся такие эксперименты, узнал много нового. Спасибо, буду ждать новых.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Скачать кс 1.6
Очистка системы от мусора, исправление ошибок в реестре. Скачать программу
cs-dl777.ru
Многофункциональный гриль
Многофункциональные инструменты
grillstore.ru
Двери рязани
Форум о дверях и замках. Производство дверей. Производство дверей и мебели
oknadveri62.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930