» »

Горизонтальное меню из кнопок при помощи CSS

Горизонтальное меню из кнопок при помощи CSS

Это горизонтальное меню со стильными кнопками по своему строению, отлично подойдет под блог или для ресурсов с фиксированной шириной. Здесь сильно отличается наведение клика, так как если у стандартных идет простая замена цвета или подчеркивание, то в нашей навигаций создано так, что появляется два оттенка палитры цвета, которые появляются одновременно. Что все очень оригинально смотрится, так как знаки с иконками аналогично меняют темную гамму на светло-синею.

Если строить под портал, то здесь нужно увеличить ширину, так как по умолчанию больше подойдет на одно страничные сайты или блоги, где заданная ширина не на весь экран. Сама навигация идет в светлом виде, но здесь проверяя его на тестовой площадке, немного вывел на серый, чтоб сильно с фоном не сливалось.

Другой вопрос, что с фоном оно отлично сливается и совершенно по другому уже смотрится, а точнее, это не видно каркаса, а выставлены в горизонталь кнопки, что по своему уникально. Где под разные форматы можно самостоятельно выставить, где в стилях в самом верху идет класс, что отвечает за основной фон, что не стал убирать, так как возможно под настройку будет полезен. Но если у вас свой уже поставлен, то просто убираем самый первый стиль, который отвечает за этот функционал сайта.

Так на темном цвете можно выставить.

Светлое горизонтальное меню для сайта

Приступаем к установке:

HTML

Код
<body>
<header>
  <div class="kacopyrigsumed-menu">
  <ul class="kacopyrigsumed-ul">
  <li class="kacopyrigsumed-li"><a href="http://zornet.ru"><i class="fa fa-home" aria-hidden="true"></i>Главная</a></li>
  <li class="kacopyrigsumed-li"><a href="http://zornet.ru"><i class="fa fa-shopping-cart" aria-hidden="true"></i>Магазин</a></li>
  <li class="kacopyrigsumed-li"><a href="http://zornet.ru"><i class="fa fa-server" aria-hidden="true"></i>Услуги</a></li>
  <li class="kacopyrigsumed-li"><a href="http://zornet.ru"><i class="fa fa-folder-open" aria-hidden="true"></i>Портфолио</a></li>
  <li class="kacopyrigsumed-li"><a href="http://zornet.ru"><i class="fa fa-newspaper-o" aria-hidden="true"></i>Новости</a></li>
  </ul>
  </div>
</header>
</body>

CSS


Чтоб изначально понять как работают функций, для этого вы можете посмотреть до установки.

Демонстрация
2018-05-05 Просмотров: 312 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar