Товаров: 0 (0р.)

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

Содержание

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

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

#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;

}

Меню для сайта в виде колеса