Круглое меню с анимацией

круглое меню
Здравствуйте, сегодня вы узнаете как делать анимированное круглое вертикальное меню для сайта. У данного меню круглые вращающиеся кнопки. Недостаток – некорректное отображение в IE.
Для того, чтобы вставить меню на сайт, нужно прописать стили в таблицу стилей. Если это касается блога Blogger, то вставить нижеуказанный код перед отрезком кода ]]></b:skin> в редакторе html (Шаблон –> Изменить html):

.menuContainer{
background: transparent;
display: block;
float: left;
height: 100%;
margin-left: 10px;
width: 60px;
}
.menuOptContainer{
display: block;
float: left;
width: 60px;
background: -moz-linear-gradient(left center , #B49AC1 1%, #474054 100%) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(left center , #B49AC1 1%, #474054 100%) repeat scroll 0 0 transparent;
background: linear-gradient(left center , #B49AC1 1%, #474054 100%) repeat scroll 0 0 transparent;
border-bottom:1px solid #a3a3a3;
border-radius: 30px;
box-shadow: 0 -2px 5px #603462;
color: #21082F;
text-shadow:1px 1px 0px #B49AC1;
height:60px;
margin-top:15px;
transition: 500ms ease 0ms;
animation-name: animation1;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction:alternate;

-moz-transition: 500ms ease 0ms;
-moz-animation-name: animation1;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction:alternate;

-webkit-transition: 500ms ease 0ms;
-webkit-animation-name: animation1;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction:alternate;
}
.menuOptContainer:hover{
background: -moz-linear-gradient(left center , #A6C19A 1%, #474054 100%) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(left center , #A6C19A 1%, #474054 100%) repeat scroll 0 0 transparent;
background: linear-gradient(left center , #A6C19A 1%, #474054 100%) repeat scroll 0 0 transparent;
box-shadow: 0 -1px 3px #426945;
color: #091F10;
text-shadow:1px 1px 0px #A6C19A;
animation-name: none;
transform: rotate(360deg) scale(1.4);
-moz-animation-name: none;
-moz-transform: rotate(360deg) scale(1.4);
-webkit-animation-name: none;
-webkit-transform: rotate(360deg) scale(1.4);
}
.menuOptContainer:active{

}
.menuTitle{
display: block;
float: left;
font-family: calibri;
font-size: 11pt;
font-weight: bold;
padding-bottom: 10px;
padding-top: 21px;
width: auto;
padding-left:12px;
}
.menuContent{
display: none;
position: relative;
top: -35px;
width: auto;

Теперь вставляем код html в виджет (для блога wordpress), или в гаджет HTML / Javascrit (если у вас блог на Blogspot):

<div class="menuContainer">
<div class="menuOptContainer first" style="width:130%;">
<div class="menuTitle"><a href="ссылка на страницу1">Название страницы 1</a></div>
</div>
<div class="menuOptContainer second" style="width:130%;">
<div class="menuTitle"><a href="Ссылка 2">Название 2<a/></a></a></div>
</div>
<div class="menuOptContainer third" style="width:130%;">
<div class="menuTitle"><a href="Ссылка 3">Название 3</a></div>
</div>
<div class="menuOptContainer fourth" style="width:130%;">
<div class="menuTitle"><a href="Ссылка 4">Название 4</a></div>
</div>
</div>

Вам могут понравится статьи:

Рубрика: CSSМетки:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *