Стильное вертикальное меню сайта на 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 | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
