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

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

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

Можешь почитать и вот эту статейку "Скрипт галереи от Google"

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйту: 3317 дней
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [15]
  • Гости: [15]
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 35
  • Генерация страницы: 0.101сек
  • Потребление памяти: 4.939 Mb 
  •   яндекс.ћетрика