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

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

irbees2008 irbees2008 Опубликовано - 6 - февраля Меню и навигация
2540 - 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;
}
Все смотрим демо и качаем исходник

Можешь почитать и вот эту статейку "HTML теги address"

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйту: 4189 дней
  • Новостей: 565
  • Комменты: 257
  • Зарегистрированно : 648
  • Онлайн всего: [5]
  • Гости: [4]
  • Поисковики: [1] Google
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 30
  • Генерация страницы: 0.399сек
  • Потребление памяти: 5.157 Mb 
  •   Яндекс.Метрика