Главная » Файлы » Прочие скрипты » CSS
Простенькое анимированное меню с эффектом выезжания иконок на CSS3 для сайта
30.06.14, 20:37:44



Простенькое анимированное меню, которое использует шрифтовые иконки

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

В самый низ вашего css вставляйте:
Код
@import"http://pcvector.net/uploads/demo/scripts/menu_and_navigation/menu_slideup/css/font-awesome.css";  

  *, *::before, *::after {  
box-sizing: border-box;  
-webkit-box-sizing: border-box;  
-moz-box-sizing: border-box;  
-o-box-sizing: border-box;  
  }  

  .azul {  
color: #0F6698;
  }  

  .verde {
color: #669900;  
  }  

  .vermelho {  
color: #cc3333;  
  }  

  .laranja {  
color: #ff6600;  
  }  

  .roxa {  
color: #663399;  
  }  

  .verde-claro {  
color: #cccc33;  
  }  

  .menu {  
border-bottom: 1px solid #000;  
text-align: center;  
height: 60px;  
overflow: hidden;  
margin: 20px auto;  
width: 480px;  
font-size: 3em;  
cursor: default;  
  }  

  .menu i {  
position: relative;  
top: 30px;  
transition: .2s ease;  
  }  

  .menu i:hover {  
top: 13px;  
  }


Следующий код в то место, где должно быть само меню:
Код
<div class="menu">  
<i class="icon-cloud-download azul"></i>  
<i class="icon-camera-retro verde"></i>  
<i class="icon-envelope-alt vermelho"></i>  
<i class="icon-truck laranja"></i>  
<i class="icon-gift roxa"></i>  
<i class="icon-frown azul"></i>  
<i class="icon-linux vermelho"></i>  
<i class="icon-windows verde"></i>  
  </div>


Источник материала: КЛИК

Материал подготовлен Apocalypse
Категория: CSS | Добавил: Apocalypse | Теги: выезжания, анимированное, на, Иконок, эффектом, CSS3, Простенькое, сайта, для, Меню
Просмотров: 717 | Загрузок: 0 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: