» »

Стильное вертикальное меню сайта на CSS

Стильное вертикальное меню сайта на CSS

Красиво созданное вертикальное меню на применение шрифтовых иконок Font Awesome на CSS под разный формат сайта в светло-голубом оттенке цвета. Отличное решение на светлый сайт, так как оно на стилях, что можно поставить и на темный фон. Здесь все очень просто, это настройка гаммы цвета под ваш дизайн сайта. Но и сами иконки, которые можно выставить как под тематику разделов или категорий, что вы выставите в навигации.

Безусловно идет эффект, что будет как только наведете на любой раздел меню. В изготовление меню нет не чего сложного всё делается стандартно и для этого ссылка заключается в теге li а уже все ссылки вместе оборачиваются в теге ul, ну а далее всё ещё легче просто при помощи стилей настраиваем дизайн который нам нужен. Остается поставить в блок портала и слили выставить в CSS на сайте. Как правильно поставить или сделать больше кнопки, то на форуме по этой теме все подробно написано.

Так примерно будет смотреться после установке, что идет по настройкам по умолчанию в материале.

Вертикальное меню для сайта

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

Ставим там где считаете, что оно отлично смотреться будет.

Код
<ul class="menu-demo">
  <li><a href="/"><span><i class="fa fa-home" aria-hidden="true"></i>ZORNET.RU</span></a><li>
  <li><a href="/"><span><i class="fa fa-film" aria-hidden="true"></i>Скрипты</span></a><li>
  <li><a href="/"><span><i class="fa fa-heart-o" aria-hidden="true"></i>Шаблоны</span></a><li>
  <li><a href="/"><span><i class="fa fa-picture-o" aria-hidden="true"></i>Форум</span></a><li>
  <li><a href="/"><span><i class="fa fa-life-ring" aria-hidden="true"></i>Блог</span></a><li>
</ul>

CSS:

Код
ul.menu-demo {-webkit-padding-start: 0; list-style: none;}
ul.menu-demo {padding: 0 20px;}
ul.menu-demo i {padding: 5px; margin-right: 10px; color: #191717;}
ul.menu-demo li a {text-decoration: none; display: block; background-color: #8ed2ec; margin: 0 0 10px 0; color: #4e4675; padding: 10px 10px; font-size: 17px; border-radius: 50px; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); border-bottom: solid #ccc;}
ul.menu-demo li a:hover {background-color: #b9e0ef;}
ul.menu-demo span {display: block; border: solid 2px #fff; border-radius: 50px; padding: 5px;}

Как видите вся стилистика цвета настраивается в стилях, что по кнопкам, то их меняем в HTML коде, где прописан класс на них.

Источник: d-melochi.ru
03.09.2017 Просмотров: 487 Комментарий: (3)

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

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

Комментарий: 3
ДимДимыч
ДимДимыч 03.09.2017 09:061
0
Ещё прикольно смотрится когда box-shadow делаешь немного темнее к примеру тёмно синий
Kosten
Kosten 03.09.2017 17:342
0
ДимДимыч, так в описание написал, что можно под любой дизайн это меню подогнать, что большой плюс, не говоря о шрифтовых иконках, которые также по теме можно поменять.
ДимДимыч
ДимДимыч 03.09.2017 17:353
0
Да шрифтовые иконки удобно и в работе и вообще.
avatar