2839
- 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>
Иконки, как и в нашем недавнем примере, также заключены в файл шрифта 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;
}
Можешь почитать и вот эту статейку "Оформляем поле поиска"
Это тоже интересно
08.11.13Адаптивное навигационное меню
15.01.15Верстаем на Twitter Bootstrap
29.11.14Справочник по HTML,CSS
29.06.17Будем фиксировать менюшку
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.