• ДОБРО ПОЖАЛОВАТЬ В КЛУБ ПО WORDPRESS

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

    Присоединяйтесь к нам, вам обязательно понравится - Присоединится

Совет Вертикальное меню с эффектом анимации

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Если Вы умеете добавлять меню в WP то вот вам маленькая штучка для оформления.
Правим CSS для себя любимого и наслаждаемся

[CSS]body{margin:0;}
.logo{display: block;margin: 10px 20px;}
.menu {width:200px;
margin:60px 0 0 30px; /* двигаем меню, 60px сверху и 30px слева */
float:left; /* обтекание слева */}
.menu ul{list-style:none;margin:0;padding:0;}
.menu ul li{
width:140px; /* ширина ссылок */
height:140px; /* высота ссылок */
margin-bottom:-40px;
border-radius:100%; /* круглим, лучше в % */
overflow:hidden;
position:relative;
-webkit-box-shadow:0 1px 2px #999;
-moz-box-shadow:0 1px 2px #999;
box-shadow:0 1px 2px #999;
text-align:center; /* текст по центру */
}
.menu ul li:nth-child(even){
float:left;
-webkit-box-shadow:0 1px 2px #666;
-moz-box-shadow:0 1px 2px #666;
box-shadow:0 1px 2px #666;
background:#000;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2B2B2B), to(#000));
background:-webkit-linear-gradient(top, #2B2B2B, #000);
background:-moz-linear-gradient(top, #2B2B2B, #000);
background:-ms-linear-gradient(top, #2B2B2B, #000);
background:-o-linear-gradient(top, #2B2B2B, #000);
}
.menu ul li:nth-child(odd){
float:right; /* следующий - справа */
background:#FFF;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#EEE));
background:-webkit-linear-gradient(top, #FFF, #EEE);
background:-moz-linear-gradient(top, #FFF, #EEE);
background:-ms-linear-gradient(top, #FFF, #EEE);
background:-o-linear-gradient(top, #FFF, #EEE);
}
.menu ul li a{
display:block;
width:100%;
height:100%;
text-decoration:none;
}
.menu .headline, .menu .description{
margin:0;
padding:0;
font-weight:normal;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.menu .headline{
padding-top:45px; /* отступ сверху */
font-family: 'Ubuntu', sans-serif;
font-size:1em; /* размер для заголовков */
color:#333; /* цвет заголовков */
text-transform:uppercase; /* Все в верхний регистр */
text-shadow:0 0 1px #CCC;
}
.menu ul li:nth-child(even) .headline{
color:#FFF;
}
.menu .description{
font-family: 'Ubuntu', sans-serif;
font-size:16px; /* размер для подзаголовков */
color:#999; /* цвет */
text-shadow:1px 1px 1px #CCC;
}
.menu ul li:nth-child(even) .description{
color:#CCC;
text-shadow:none;
}
.menu ul li:hover .headline{
font-size:20px; /* размер при наведении*/
color:#888; /* Цвет при наведении */
text-shadow:none;
}
.menu ul li:active .headline{
color:#FFF; /* Цвет при клике */
}
.menu ul li:hover .description{
filter:alpha(opacity=0);
opacity:0;
}[/CSS]
 
Сверху