» »

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

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

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

Здесь сделаны отступы, где можно самому задавать, также можно заметить под раздел, это для самых актуальных материалов. Реализовать его можно на официальные порталы, также на софт и очень много тем, где создано маркированным списком с различным оттенком.

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

Все проверели на тестовом:

Так если не подключая под разделы:

Навигация на сайта

Здесь видим уже настроенную навигацию, где палитра цвета идет разнообразная.

Вертикальная навигация для сайта

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

В блок устанавливаем это HTML код:

Код
<div class="varunim zornet_ru_berkan">
<ul>
  <li class="zn-1"><a href="http://zornet.ru/load/"><span><i class="fa fa-bell"></i></span> Блог новостей</a></li>
  <li class="zn-2"><a href="http://zornet.ru/forum/"><span><i class="fa fa-cloud-download"></i></span> Скачать файлы</a></li>
  <li class="zn-3"><a href="http://zornet.ru/news/"><span><i class="fa fa-coffee"></i></span> ZorNet Перекур</a></li>
  <li class="zn-4"><a href="#"><span><i class="fa fa-shopping-basket"></i></span> Магазин сети</a></li>
  <li class="zn-5"><a href="#"><span><i class="fa fa-tumblr-square"></i></span> Ваш Твиттер</a></li>
<li class="zn-liren"></li>
<li class="zn-6"><a href="#"><span><i class="fa fa-comments-o"></i></span> Форум сайта</a></li>
  <li class="zn-7"><a href="#"><span><i class="fa fa-pencil-square-o"></i></span> Блог портала</a></li>
</ul>
</div>

CSS

Код
.zornet_ru_berkan ul, .zornet_ru_berkan li{
margin:0px;
padding:0px;
list-style-type:none}

.zornet_ru_berkan li a{
color: #252e44;
text-decoration:none;
display:block;
padding:9px 0px;
font-size: 17px;
}

.zornet_ru_berkan li a span{
width:22px;
display:inline-block;
text-align:center;
float:right}

.zornet_ru_berkan li a:hover{
color:#17317A;
}

.zornet_ru_berkan .zn-liren{
border-top:1px solid #dedede;
margin-top:20px;
padding-bottom:20px}

.zn-1 span{
color:#cc2e17}

.zn-2 span{
color:#529eca}

.zn-3 span{
color:#8ce175}

.zn-4 span{
color:#d05175}

.zn-5 span{
color:#814ad4}

.zn-6 span{
color:#d49988}

.zn-7 span{
color:#5a8dab}

.varunim li{
list-style-type:none !important}

.varunim li a:before{
display:none !important}

Установка проста, что нужно заметить, изначально шли маркеры, что сейчас без них идет код.
20.11.2017 Просмотров: 368 Комментарий: (7)

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

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

Комментарий: 7
Kosten
Kosten 21.11.2017 16:171
0
Можно сделать, так чтоб при наведение не просто цвет изменялся, а эффект производился, что немного отъезжали категорий.
waak
waak 22.11.2017 02:562
+1
Запросто!

.zornet_ru_berkan li:hover{
Padding-left:20px;
}
Kosten
Kosten 22.11.2017 03:303
0
waak, а можно скорость задать, но слишком резко берут со старта. Сделать медленнее реально.
waak
waak 22.11.2017 15:144
0
Запросто просто добавь

transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-webkit-transition: 2s;

2s время = 2 сек
Kosten
Kosten 22.11.2017 17:345
0
waak, благодарю, уже запилил 3 навигаций, темную и светлую, только один вопрос остался, а можно задать длину, на сколько бы выезжал запрос.
waak
waak 22.11.2017 17:446
0
Вот тут
Padding-left:20px;

20px меняй
Kosten
Kosten 22.11.2017 18:107
0
Но это для пользователей и гостей, как дополнительная информация, то все уже залил вертикальное меню в двух оттенках.
avatar