Загрузка...

Анимированное вертикальное меню

Анимированное вертикальное меню
[center]Сегодня мы будем создавать анимированное вертикальное меню с круглыми кнопками. Анимация будет очень простая, при наведении шрифт заголовка будет увеличиватся, меняя цвет.

Начнем традиционно — со структуры HTML:

<nav class="menu">
 <ul>
  <li>
   <a href="#">         
   <h3 class="headline">главная</h3>
   <h4 class="description">это ясно...</h4>
   </a>  
  </li>
  <li>
   <a href="#">
   <h3 class="headline">Работы</h3>
   <h4 class="description">посмотреть...</h4>
   </a>
  </li>
  <li>
   <a href="#">
   <h3 class="headline">блог</h3>
   <h4 class="description">почитать...</h4>
   </a>
  </li>
 </ul>
</nav>


Перейдем к стилям, там самое интересное:

.menu{
  width:200px;
  margin:60px 0 0 30px; /* двигаем меню, 60 сверху и 30 слева */
  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; /* текст по центру */}


Я комментирую свой код, чтобы потом было легче разбираться.Собственно, этим кодом мы задаем общие стили для элементов списка. Сначала задаем ширину и высоту, потом превращаем квадраты в круги, используя border-radius.

Перейдем к формированию «каскада» из элементов:

.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);
}


Используя псевдокласс ntn-child, мы можем применять стили к элементам, на основе их нумерации в дереве элементов. Допустим, наше вертикальное меню — список из 5 элементов. Используя ntn-child(even), мы назначаем стиль каждому четному элементу, nth-child(odd) — соответственно, нечетному. Код выше как раз это демонстрирует. Псевдокласс имеет достаточно гибкие и мощные «настройки», если будет интересно — дайте знать, расскажу подробнее об этом.

Закончили с элементами списка, перейдем к заголовку и описанию:

.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 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;
}


Вот и все ссылка на исходники ниже! шаблоны для dle 11.2



    Как сделать всплывающие подсказки на CSS

    Как сделать всплывающие подсказки на CSS
    В этой статье я расскажу вам о том, как сделать красивые и слегка анимированные всплывающие подсказки на своем сайте или блоге. Для того что бы подсказки работали в любом браузере и не зависимо от его настроек я решил делать их с помощью CSS.

    Как сделать вертикальное меню для сайта

    Как сделать вертикальное меню для сайта
    При создании сайта многие сталкиваются с вопросом создания меню для сайта, где будут располагаться ссылки на различные разделы вашего сайта. Так что сегодняшний урок о том, как создать простое, но красивое вертикальное меню для сайта с помощью CSS и

    Как правильно закрыть сайт от старых версий IE 5.5-6

    Как правильно закрыть сайт от старых версий IE 5.5-6
    В этой теме поговорим о том, как закрыть сайт от просмотра браузером старых версий IE 5.5-6. Ведь многим надоело верстать под них. Так что самый лучший метод в такой ситуации вывести человеку, зашедшему на сайт сверху подсказку, что его браузер устарел

    Как уменьшить размер CSS файла? Оптимизация CSS кода.

    Как уменьшить размер CSS файла? Оптимизация CSS кода.
    В этой статье я расскажу вам об оптимизация CSS кода. Как вы знаете, уменьшение времени загрузки сайта - это одна из самых важных тем веб дизайна. А что бы сократить это время мы уменьшить размер CSS файла, чтобы он быстрее грузился!

    Урок по созданию установщика  install.php

    Урок по созданию установщика install.php
    Многие из вебмастеров кто сталкивался с установкой различных PHP скриптов для создания своего сайта, а так же известных CMS движков, наверное, заметили, что для облегчения установки и запуска используется автоматический установщик install. Так что в этом


Просмотров: 1 974
Добавлено: 13-04-2013, 18:19
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Наверх
[X]
Добро пожаловать на сайт!

Войти | Зарегистрироваться

контекстная реклама сайта цена