Хаки и Скрипты Next Generation CMS

Меню с векторными иконками

irbees2008 irbees2008 Опубликовано - 6 - февраля Меню и навигация
2608 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Немного спрятанные изначально иконки, выезжают при наведении на них курсора мыши.
1.Скачиваем архивВы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. и заливаем в папку с шаблоном
2.Разметка меню

Код:
 <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>
3. Стили нашего меню
Иконки, как и в нашем недавнем примере, также заключены в файл шрифта font-awesome.css.
Код:
@import "../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;
}
Все смотрим демо и качаем исходник

Можешь почитать и вот эту статейку " STICKY FOOTER - СКОЛЬЗЯЩЕЕ ФУТЕР МЕНЮ "

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4374 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [6]
  • Гости: [6]
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 34
  • Генерация страницы: 0.37сек
  • Потребление памяти: 5.162 Mb 
  •   Яндекс.Метрика