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

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

Адаптировал: 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;
}

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

Можешь почитать и вот эту статейку "Ставим вертикальное выпадающие меню на CSS"

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

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