2013-07-03

Textual description of firstImageUrl

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

круглое меню
Здравствуйте, сегодня вы узнаете как делать анимированное круглое вертикальное меню для сайта. У данного меню круглые вращающиеся кнопки. Недостаток – некорректное отображение в 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>
Вам могут понравится статьи:

Комментариев нет :

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности