Как создать круглое меню для сайта на CSS3

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

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

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

Шаг 1. HTML

По обычаю начнем с разметки. Мы будем использовать чеки и ратио-кнопки, которые с помощью css, будут реагировать на вращение. Получаем такую разметку.

<div id="menu">
 <input type="checkbox" id="on-check" name="on-check" />
 <label id="on-button" for="on-check">
 <span><span class="ss-plus">..</span></span>
 <span><span class="ss-hyphen">...</span></span>
 </label>

 <input type="radio" id="info-home" name="radio-check" />
 <input type="radio" id="info-compass" name="radio-check" checked />
 <input type="radio" id="info-heart" name="radio-check" />
 <input type="radio" id="info-rss" name="radio-check" />
 <input type="radio" id="info-refresh" name="radio-check" />
 <input type="radio" id="info-star" name="radio-check" />

 <div id="menu-items">
 <div class="middle">
 <div class="top">
 <span class="bg-piece"> </span>
 <label class="ss-home" for="info-home">...</label>
 <span class="bg-piece"> </span>
 <label class="ss-compass" for="info-compass">..</label>
 <span class="bg-piece"> </span>
 <label class="ss-heart" for="info-heart">...</label>
 </div>
 <div class="bottom">
 <span class="bg-piece"> </span>
 <label class="ss-rss" for="info-rss">...</label>
 <span class="bg-piece"> </span>
 <label class="ss-refresh" for="info-refresh">...</label>
 <span class="bg-piece"> </span>
 <label class="ss-star" for="info-star">...</label>
 </div>
 </div>
 </div>
 <div class="info home-info">На главную</div>
 <div class="info compass-info">Куда передвигаемся?</div>
 <div class="info heart-info">Избранное</div>
 <div class="info rss-info">Канал RSS</div>
 <div class="info star-info">В закладки</div>
 <div class="info refresh-info">Обновить</div>

 <div class="faux-shadow"> </div>
</div>

</label>

</div>

</div>

<div class="info home-info">На главную</div>

<div class="info compass-info">Куда передвигаемся?</div>

<div class="info heart-info">Избранное</div>

<div class="info rss-info">Канал RSS</div>

<div class="info star-info">В закладки</div>

<div class="info refresh-info">Обновить</div>

</div>

С разметкой закончили, перейдем к следующему шагу.

Шаг 2. СSS

Нам необходимо, чтобы кнопки реагировали на нажатия, и были рабочими при этом, для этого мы будем использовать псевдо-класс :checked. Также будут применяться 3D трансформации, чтобы кнопка переворачивалась при включении.

/* Для правильного позиционирования меню */
#menu {
 position: relative;
 width: 230px;
 margin: 0px auto;
 top: 100px;
 left: 37px;
}

/* Используем свойство overflow: hidden;, поэтому надо создать имитацию тени */
.faux-shadow {
 position: absolute;
 content: " ";
 width: 150px;
 height: 150px;
 top: 0px;
 left: 0px;
 box-shadow: 0 0 50px rgba(0,0,0,0.3);
 border-radius: 300px;
 -webkit-transition: all 0.4s linear;
 -moz-transition: all 0.4s linear;
 -ms-transition: all 0.4s linear;
 -o-transition: all 0.4s linear;
 transition: all 0.4s linear;
 z-index: -9999;
}

/* Кнопка в центре меню служит для активации меню */
#on-button {
 border-radius: 100px;
 width: 150px;
 height: 150px;
 color: #fff;
 float: left;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 cursor: pointer;
 background-color: #313b3d;
 pointer-events: none;
 font-size: 5em;
 text-shadow: 0 1px 1px rgba(0,0,0,0.3);
 box-shadow: inset 0 -125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2);
}

/* При наведении курсора мыши */
#on-button:hover {
 box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2);
}

/* При нажатии кнопки мыши*/
#on-button:active {
 box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2),
 inset 0 0 30px rgba(0,0,0,0.3);
}

/* Элемент spans внутри кнопки будет вращаться */
#on-button > span {
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 -webkit-transition: -webkit-transform 0.2s linear;
 -moz-transition: -moz-transform 0.2s linear;
 -ms-transition: -moz-transform 0.2s linear;
 -o-transition: -moz-transform 0.2s linear;
 transition: -moz-transform 0.2s linear;
 display: block;
 width: 122px;
 height: 122px;
 background: #313b3d;
 border-radius: 120px;
 pointer-events: auto;
 position: absolute;
 z-index: 3;
 top: 0;
 left: 0;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 padding: 34px;
 margin: 14px;
 box-shadow: inset 0 -112px 100px -100px rgba(0, 0, 0, 0.5);
}

/* Изменение тени при наведении курсора мыши, что бы она соответствовала тени контейнера */
#on-button:hover > span {
 box-shadow: inset 0 112px 100px -100px rgba(0, 0, 0, 0.5);
}

/* Вращение последнего элемента span, чтобы он был перевернутым */
#on-button > span:last-of-type {
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
 -ms-transform: rotateY(180deg);
 transform: rotateY(180deg);
}

/* Добавляем псевдо элемент с белым фоном, который будет создавать
 иллюзию, что кнопка имеет отверстие */
#on-button:after {
 position: absolute;
 content: " ";
 top: 0;
 left: 0;
 width: 120px;
 height: 120px;
 margin: 15px;
 border-radius: 120px;
 background: #fff;
 z-index: 2;
}

100

101

102

103

104

105

106

107

108

109

110

111

/* Для правильного позиционирования меню */

#menu {

position: relative;

width: 230px;

margin: 0px auto;

top: 100px;

left: 37px;

}

/* Используем свойство overflow: hidden;, поэтому надо создать имитацию тени */

.faux-shadow {

position: absolute;

content: " ";

width: 150px;

height: 150px;

top: 0px;

left: 0px;

box-shadow: 0 0 50px rgba(0,0,0,0.3);

border-radius: 300px;

-webkit-transition: all 0.4s linear;

-moz-transition: all 0.4s linear;

-ms-transition: all 0.4s linear;

-o-transition: all 0.4s linear;

transition: all 0.4s linear;

z-index: -9999;

}

/* Кнопка в центре меню служит для активации меню */

#on-button {

border-radius: 100px;

width: 150px;

height: 150px;

color: #fff;

float: left;

box-sizing: border-box;

-moz-box-sizing: border-box;

cursor: pointer;

background-color: #313b3d;

pointer-events: none;

font-size: 5em;

text-shadow: 0 1px 1px rgba(0,0,0,0.3);

box-shadow: inset 0 -125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2);

}

/* При наведении курсора мыши */

#on-button:hover {

box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2);

}

/* При нажатии кнопки мыши*/

#on-button:active {

box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2),

inset 0 0 30px rgba(0,0,0,0.3);

}

/* Элемент spans внутри кнопки будет вращаться */

#on-button > span {

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

-o-backface-visibility: hidden;

-webkit-transition: -webkit-transform 0.2s linear;

-moz-transition: -moz-transform 0.2s linear;

-ms-transition: -moz-transform 0.2s linear;

-o-transition: -moz-transform 0.2s linear;

transition: -moz-transform 0.2s linear;

display: block;

width: 122px;

height: 122px;

background: #313b3d;

border-radius: 120px;

pointer-events: auto;

position: absolute;

z-index: 3;

top: 0;

left: 0;

box-sizing: border-box;

-moz-box-sizing: border-box;

padding: 34px;

margin: 14px;

box-shadow: inset 0 -112px 100px -100px rgba(0, 0, 0, 0.5);

}

/* Изменение тени при наведении курсора мыши, что бы она соответствовала тени контейнера */

#on-button:hover > span {

box-shadow: inset 0 112px 100px -100px rgba(0, 0, 0, 0.5);

}

/* Вращение последнего элемента span, чтобы он был перевернутым */

#on-button > span:last-of-type {

-webkit-transform: rotateY(180deg);

-moz-transform: rotateY(180deg);

-o-transform: rotateY(180deg);

-ms-transform: rotateY(180deg);

transform: rotateY(180deg);

}

/* Добавляем псевдо элемент с белым фоном, который будет создавать

иллюзию, что кнопка имеет отверстие */

#on-button:after {

position: absolute;

content: " ";

top: 0;

left: 0;

width: 120px;

height: 120px;

margin: 15px;

border-radius: 120px;

background: #fff;

z-index: 2;

}

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

/* Когда элемент ввода отмечен, поворачиваем элементы span вокруг на 180 градусов */
#on-check:checked + #on-button > span:first-of-type {
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
 -ms-transform: rotateY(180deg);
 transform: rotateY(180deg);
}
#on-check:checked + #on-button > span:last-of-type {
 -webkit-transform: rotateY(0deg);
 -moz-transform: rotateY(0deg);
 -ms-transform: rotateY(0deg);
 -o-transform: rotateY(0deg);
 transform: rotateY(0deg);
}

/* Также изменяем ширину и высоту тени */
#on-check:checked ~ .faux-shadow {
 width: 300px;
 height: 300px;
 top: -75px;
 left: -75px;
}

/* Элементы div с информацией не выводятся для неотмеченных кнопок */
#menu #on-check:not(:checked) ~ .info {
 opacity: 0;
}

/* Выводим дополнительную информацию с задержкой 0.4s, чтобы пункты меню закончили анимацию растягивания */
#menu #on-check:checked ~ .info {
 -webkit-transition: all 0.2s linear 0.4s;
 -moz-transition: all 0.2s linear 0.4s;
 -ms-transition: all 0.2s linear 0.4s;
 -o-transition: all 0.2s linear 0.4s;
 transition: all 0.2s linear 0.4s;
}

/* Растягиваем пункты меню, когда кнопка нажата */
#on-check:checked ~ #menu-items {
 width: 300px;
 height: 300px;
 left: -75px;
 top: -75px;
}

/* Когда элемент ввода отмечен, поворачиваем элементы span вокруг на 180 градусов */

#on-check:checked + #on-button > span:first-of-type {

-webkit-transform: rotateY(180deg);

-moz-transform: rotateY(180deg);

-o-transform: rotateY(180deg);

-ms-transform: rotateY(180deg);

transform: rotateY(180deg);

}

#on-check:checked + #on-button > span:last-of-type {

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

transform: rotateY(0deg);

}

/* Также изменяем ширину и высоту тени */

#on-check:checked ~ .faux-shadow {

width: 300px;

height: 300px;

top: -75px;

left: -75px;

}

/* Элементы div с информацией не выводятся для неотмеченных кнопок */

#menu #on-check:not(:checked) ~ .info {

opacity: 0;

}

/* Выводим дополнительную информацию с задержкой 0.4s, чтобы пункты меню закончили анимацию растягивания */

#menu #on-check:checked ~ .info {

-webkit-transition: all 0.2s linear 0.4s;

-moz-transition: all 0.2s linear 0.4s;

-ms-transition: all 0.2s linear 0.4s;

-o-transition: all 0.2s linear 0.4s;

transition: all 0.2s linear 0.4s;

}

/* Растягиваем пункты меню, когда кнопка нажата */

#on-check:checked ~ #menu-items {

width: 300px;

height: 300px;

left: -75px;

top: -75px;

}

Теперь реализуем контейнер для меню который растягивается из-за кнопки, когда кнопка нажата. Элемент div в сочетании с 3D-трансформацией работает только в Chrome, поэтому эффект реализуется старым трюком с рамкой.

/* Стили для контейнера пунктов меню */
#menu-items {
 width: 150px;
 height: 150px;
 border-radius: 250px;
 background: #aaa;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -99;
 overflow: hidden;
 -webkit-mask-image: url(data:image/png;);
 box-shadow: 0 0 15px rgba(0,0,0,0.3);
 -webkit-transition: all 0.4s linear;
 -moz-transition: all 0.4s linear;
 -ms-transition: all 0.4s linear;
 -o-transition: all 0.4s linear;
 transition: all 0.4s linear;
}

/* Меню разделено на две части: верх и низ. */
#menu-items .top, #menu-items .bottom {
 width: 100%;
 float: left;
 z-index: 1;
 height: 50%;
}

#menu-items .bottom {
 top: 50%;
}

/* Средняя часть увеличивается для фиксации ошибки, выражающейся в
 выходе содержания за рамки при установленном свойстве overflow: hidden; */

#menu-items .middle {
 height: 100%;
 white-space: nowrap;
}

/* Стили для фонового элемента. Данный контейнер ничего не делает. */

#menu-items .middle .bg-piece {
 width: 33.3%;
 height: 100%;
 text-align: center;
 display: inline-block !important;
 background: #eee;
 font-size: 2.5em;
 position: absolute;
 display: block;
}

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

#menu-items .middle > div .bg-piece:nth-of-type(2) {
 position: absolute;
 width: 0;
 height: 0;
}
#menu-items .middle .bottom .bg-piece:nth-of-type(2):after, #menu-items .middle .top .bg-piece:nth-of-type(2):after {
 content: " ";
 position: absolute;
 border-color: transparent transparent #eee transparent;
 border-width: 148px;
 border-style: solid;
 top: -142px;
 left: 0px;
 z-index: 999;
}

#menu-items .middle .top .bg-piece:nth-of-type(2):after {
 border-color: #eee transparent transparent transparent;
 top: -5px;
 left: 0;
}

#menu-items .middle .top .bg-piece:nth-of-type(1) {
 box-shadow: inset -125px 0 36px -35px rgba(0, 0, 0, 0.1), inset -7px -161px 72px rgba(0, 0, 0, 0.1);
}

#menu-items .middle .top .bg-piece:nth-of-type(3) {
 box-shadow: inset 125px 0 36px -35px rgba(0, 0, 0, 0.1), inset -7px -161px 72px rgba(0, 0, 0, 0.1);
}

#menu-items .middle > div .bg-piece:nth-of-type(1) {
 width: 50%;
 box-shadow: inset -125px 0 36px -35px rgba(0, 0, 0, 0.1);
}

#menu-items .middle > div .bg-piece:nth-of-type(3) {
 width: 50%;
 right: 0;
 box-shadow: inset 125px 0 36px -35px rgba(0, 0, 0, 0.1);
}

/* Стили для контейнера пунктов меню */

#menu-items {

width: 150px;

height: 150px;

border-radius: 250px;

background: #aaa;

position: absolute;

top: 0;

left: 0;

z-index: -99;

overflow: hidden;

-webkit-mask-image: url(data:image/png;);

box-shadow: 0 0 15px rgba(0,0,0,0.3);

-webkit-transition: all 0.4s linear;

-moz-transition: all 0.4s linear;

-ms-transition: all 0.4s linear;

-o-transition: all 0.4s linear;

transition: all 0.4s linear;

}

/* Меню разделено на две части: верх и низ. */

#menu-items .top, #menu-items .bottom {

width: 100%;

float: left;

z-index: 1;

height: 50%;

}

#menu-items .bottom {

top: 50%;

}

/* Средняя часть увеличивается для фиксации ошибки, выражающейся в

выходе содержания за рамки при установленном свойстве overflow: hidden; */

#menu-items .middle {

height: 100%;

white-space: nowrap;

}

/* Стили для фонового элемента. Данный контейнер ничего не делает. */

#menu-items .middle .bg-piece {

width: 33.3%;

height: 100%;

text-align: center;

display: inline-block !important;

background: #eee;

font-size: 2.5em;

position: absolute;

display: block;

}

/* Очень важно, чтобы все части фона находились в правильном положении.

Ниже привденный код служит для указанной цели. */

#menu-items .middle > div .bg-piece:nth-of-type(2) {

position: absolute;

width: 0;

height: 0;

}

#menu-items .middle .bottom .bg-piece:nth-of-type(2):after, #menu-items .middle .top .bg-piece:nth-of-type(2):after {

content: " ";

position: absolute;

border-color: transparent transparent #eee transparent;

border-width: 148px;

border-style: solid;

top: -142px;

left: 0px;

z-index: 999;

}

#menu-items .middle .top .bg-piece:nth-of-type(2):after {

border-color: #eee transparent transparent transparent;

top: -5px;

left: 0;

}

#menu-items .middle .top .bg-piece:nth-of-type(1) {

box-shadow: inset -125px 0 36px -35px rgba(0, 0, 0, 0.1), inset -7px -161px 72px rgba(0, 0, 0, 0.1);

}

#menu-items .middle .top .bg-piece:nth-of-type(3) {

box-shadow: inset 125px 0 36px -35px rgba(0, 0, 0, 0.1), inset -7px -161px 72px rgba(0, 0, 0, 0.1);

}

#menu-items .middle > div .bg-piece:nth-of-type(1) {

width: 50%;

box-shadow: inset -125px 0 36px -35px rgba(0, 0, 0, 0.1);

}

#menu-items .middle > div .bg-piece:nth-of-type(3) {

width: 50%;

right: 0;

box-shadow: inset 125px 0 36px -35px rgba(0, 0, 0, 0.1);

}

Теперь нам необходимо определить стили для наших информационных блоков и меток.

/* Метки, которые содержат иконки. */
#menu-items label {
 position: absolute;
 z-index: 9999999;
 font-size: 2em;
 border-radius: 5px;
 cursor: pointer;
 text-shadow: 1px 1px 0 rgba(255,255,255,0.1);
}

/* при наведении курсора они подсвечиваются синим. */
#menu-items label:hover {
 text-shadow: 0 0 15px #a6d8f4;
}

/* Блок информации, который появляется при выборе меню. */
#menu .info {
 opacity: 0;
 position: absolute;
 left: 55px;
 top: -136px;
 display: inline-block;
 background-color: #d2d2d2;
 padding: 10px;
 color: #343434;
 z-index: 9999999;
 font: normal normal 1.5em Arial, sans-serif;
 background: #eee;
 border: 1px solid #ddd;
 font-weight: bold;
 border-radius: 8px;
 box-shadow: inset 0px 40px 200px -30px rgba(255, 255, 255, 1), 0px 0px 20px rgba(0, 0, 0, 0.1);
}

/* маленькая стрелка для блока меню. */
#menu .info:after {
 position: absolute;
 content: " ";
 top: 37px;
 left: 8px;
 border-color: #f3f3f3 transparent transparent transparent;
 border-width: 10px;
 border-style: solid;

}

/* Рамка для стрелки. */
#menu .info:before {
 position: absolute;
 content: " ";
 top: 38px;
 left: 8px;
 border-color: #ddd transparent transparent transparent;
 border-width: 10px;
 border-style: solid;
}

/* Скрываем ради кнопки и чекбоксы. */
#menu input[type='checkbox'], input[type='radio'] { display: none; }

/* Позиционируем иконки. */
#menu-items .top .ss-home { top: 90px; left: 34px; }
#menu-items .top .ss-heart { top: 90px; left: 241px; }
#menu-items .top .ss-compass { top: 21px; left: 137px; }
#menu-items .bottom .ss-rss { top: 181px; left: 35px; }
#menu-items .bottom .ss-star { top: 181px; left: 243px; }
#menu-items .bottom .ss-refresh { top: 249px; left: 139px; }

/* Метки, которые содержат иконки. */

#menu-items label {

position: absolute;

z-index: 9999999;

font-size: 2em;

border-radius: 5px;

cursor: pointer;

text-shadow: 1px 1px 0 rgba(255,255,255,0.1);

}

/* при наведении курсора они подсвечиваются синим. */

#menu-items label:hover {

text-shadow: 0 0 15px #a6d8f4;

}

/* Блок информации, который появляется при выборе меню. */

#menu .info {

opacity: 0;

position: absolute;

left: 55px;

top: -136px;

display: inline-block;

background-color: #d2d2d2;

padding: 10px;

color: #343434;

z-index: 9999999;

font: normal normal 1.5em Arial, sans-serif;

background: #eee;

border: 1px solid #ddd;

font-weight: bold;

border-radius: 8px;

box-shadow: inset 0px 40px 200px -30px rgba(255, 255, 255, 1), 0px 0px 20px rgba(0, 0, 0, 0.1);

}

/* маленькая стрелка для блока меню. */

#menu .info:after {

position: absolute;

content: " ";

top: 37px;

left: 8px;

border-color: #f3f3f3 transparent transparent transparent;

border-width: 10px;

border-style: solid;

}

/* Рамка для стрелки. */

#menu .info:before {

position: absolute;

content: " ";

top: 38px;

left: 8px;

border-color: #ddd transparent transparent transparent;

border-width: 10px;

border-style: solid;

}

/* Скрываем ради кнопки и чекбоксы. */

#menu input[type='checkbox'], input[type='radio'] { display: none; }

/* Позиционируем иконки. */

#menu-items .top .ss-home { top: 90px; left: 34px; }

#menu-items .top .ss-heart { top: 90px; left: 241px; }

#menu-items .top .ss-compass { top: 21px; left: 137px; }

#menu-items .bottom .ss-rss { top: 181px; left: 35px; }

#menu-items .bottom .ss-star { top: 181px; left: 243px; }

#menu-items .bottom .ss-refresh { top: 249px; left: 139px; }

Теперь нам необходимо определить, становится ли меню правильно при нажатии и возврате назад. Снова используется селектор родственников и псевдо-класс :checked.

/* Вращаем пункты меню в нужное полжение, когда нажата кнопка мыши. */
#info-home:checked ~ #menu-items, #menu-items .top .ss-heart {
 -webkit-transform: rotateZ(66deg);
 -moz-transform: rotateZ(66deg);
 -ms-transform: rotateZ(66deg);
 -o-transform: rotateZ(66deg);
 transform: rotateZ(66deg);
}

#info-heart:checked ~ #menu-items, #menu-items .top .ss-home {
 -webkit-transform: rotateZ(-66deg);
 -moz-transform: rotateZ(-66deg);
 -ms-transform: rotateZ(-66deg);
 -o-transform: rotateZ(-66deg);
 transform: rotateZ(-66deg);
}

#info-rss:checked ~ #menu-items, #menu-items .bottom .ss-star {
 -webkit-transform: rotateZ(114deg);
 -moz-transform: rotateZ(114deg);
 -ms-transform: rotateZ(114deg);
 -o-transform: rotateZ(114deg);
 transform: rotateZ(114deg);
}

#info-star:checked ~ #menu-items, #menu-items .bottom .ss-rss {
 -webkit-transform: rotateZ(-114deg);
 -moz-transform: rotateZ(-114deg);
 -ms-transform: rotateZ(-114deg);
 -o-transform: rotateZ(-114deg);
 transform: rotateZ(-114deg);
}

#info-refresh:checked ~ #menu-items, #menu-items .bottom .ss-refresh {
 -webkit-transform: rotateZ(180deg);
 -moz-transform: rotateZ(180deg);
 -ms-transform: rotateZ(180deg);
 -o-transform: rotateZ(180deg);
 transform: rotateZ(180deg);
}

/* --------------------------------------------------------------- */

/* Выделяем выбранный пункт. */
#info-home:checked ~ #menu-items .ss-home,
#info-heart:checked ~ #menu-items .ss-heart,
#info-rss:checked ~ #menu-items .ss-rss,
#info-star:checked ~ #menu-items .ss-star,
#info-refresh:checked ~ #menu-items .ss-refresh,
#info-compass:checked ~ #menu-items .ss-compass {
 text-shadow: 0 0 15px #3facf2;
 color: #24434f;
}

/* Делаем видимым блок информации по нажатию кнопки мыши. */
#info-home:checked ~ .home-info,
#info-heart:checked ~ .heart-info,
#info-rss:checked ~ .rss-info,
#info-star:checked ~ .star-info,
#info-refresh:checked ~ .refresh-info,
#info-compass:checked ~ .compass-info {
 opacity: 1;
}

/* Вращаем пункты меню в нужное полжение, когда нажата кнопка мыши. */

#info-home:checked ~ #menu-items, #menu-items .top .ss-heart {

-webkit-transform: rotateZ(66deg);

-moz-transform: rotateZ(66deg);

-ms-transform: rotateZ(66deg);

-o-transform: rotateZ(66deg);

transform: rotateZ(66deg);

}

#info-heart:checked ~ #menu-items, #menu-items .top .ss-home {

-webkit-transform: rotateZ(-66deg);

-moz-transform: rotateZ(-66deg);

-ms-transform: rotateZ(-66deg);

-o-transform: rotateZ(-66deg);

transform: rotateZ(-66deg);

}

#info-rss:checked ~ #menu-items, #menu-items .bottom .ss-star {

-webkit-transform: rotateZ(114deg);

-moz-transform: rotateZ(114deg);

-ms-transform: rotateZ(114deg);

-o-transform: rotateZ(114deg);

transform: rotateZ(114deg);

}

#info-star:checked ~ #menu-items, #menu-items .bottom .ss-rss {

-webkit-transform: rotateZ(-114deg);

-moz-transform: rotateZ(-114deg);

-ms-transform: rotateZ(-114deg);

-o-transform: rotateZ(-114deg);

transform: rotateZ(-114deg);

}

#info-refresh:checked ~ #menu-items, #menu-items .bottom .ss-refresh {

-webkit-transform: rotateZ(180deg);

-moz-transform: rotateZ(180deg);

-ms-transform: rotateZ(180deg);

-o-transform: rotateZ(180deg);

transform: rotateZ(180deg);

}

/* --------------------------------------------------------------- */

/* Выделяем выбранный пункт. */

#info-home:checked ~ #menu-items .ss-home,

#info-heart:checked ~ #menu-items .ss-heart,

#info-rss:checked ~ #menu-items .ss-rss,

#info-star:checked ~ #menu-items .ss-star,

#info-refresh:checked ~ #menu-items .ss-refresh,

#info-compass:checked ~ #menu-items .ss-compass {

text-shadow: 0 0 15px #3facf2;

color: #24434f;

}

/* Делаем видимым блок информации по нажатию кнопки мыши. */

#info-home:checked ~ .home-info,

#info-heart:checked ~ .heart-info,

#info-rss:checked ~ .rss-info,

#info-star:checked ~ .star-info,

#info-refresh:checked ~ .refresh-info,

#info-compass:checked ~ .compass-info {

opacity: 1;

}

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

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

Как создать круглое меню для сайта на CSS3

Шаг 1. HTML

Шаг 2. СSS

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

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

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Как создать круглое меню для сайта на CSS3

Шаг 1. HTML

Шаг 2. СSS

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

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

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи