Хаки и Скрипты Next Generation CMS : Меню и навигация : Меню с векторными иконками

irbees2008 Опубликовано - 6 - февраля Меню и навигация

Адаптировал: irbees2008
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Демо:

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

Код:

01<div class="menu">
02     <i class="icon-cloud-download azul"></i>
03     <i class="icon-camera-retro verde"></i>
04     <i class="icon-envelope-alt vermelho"></i>
05     <i class="icon-truck laranja"></i>
06     <i class="icon-gift roxa"></i>
07     <i class="icon-frown azul"></i>
08     <i class="icon-linux vermelho"></i>
09     <i class="icon-windows verde"></i>
10   </div>

3. Стили нашего меню
Иконки, как и в нашем недавнем примере, также заключены в файл шрифта font-awesome.css.

Код:

01@import "../css/font-awesome.css";
02 
03*, *::before, *::after{
04  box-sizing: border-box;
05  -webkit-box-sizing: border-box;
06  -moz-box-sizing: border-box;
07  -o-box-sizing: border-box; 
08}
09 
10.azul {
11  color: #0F6698;
12}
13 
14.verde {
15  color: #669900; 
16}
17 
18.vermelho {
19  color: #cc3333;
20}
21 
22.laranja {
23  color: #ff6600;
24}
25 
26.roxa {
27  color: #663399;
28}
29 
30.verde-claro {
31  color: #cccc33;
32}
33 
34.menu {
35  border-bottom: 1px solid #000;
36  text-align: center;
37  height: 60px;
38  overflow: hidden;
39  margin: 20px auto;
40  width: 480px;
41  font-size: 3em;
42  cursor: default;
43}
44 
45.menu i {
46  position: relative;
47  top: 30px;
48  transition: .2s ease;
49}
50 
51.menu i:hover {
52  top: 13px;
53}

Все смотрим демо и качаем исходник

Можешь почитать и вот эту статейку "Бегущая строка на Jquery с эффектом набора текста"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.