Немного спрятанные изначально иконки, выезжают при наведении на них курсора мыши.
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;
}
Можешь почитать и вот эту статейку "Раздвижное меню"
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
