ZorNet.Ru — сайт для вебмастера » Меню для сайта » Вертикальное меню с кнопками для сайта

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

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

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

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

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

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

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

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

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

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

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

Код

<div class="varunim zornet_ru_berkan">
<ul>
 <li class="zn-1"><a href="http://zornet.ru/load/"> Блог новостей</a></li>
 <li class="zn-2"><a href="http://zornet.ru/forum/"> Скачать файлы</a></li>
 <li class="zn-3"><a href="http://zornet.ru/news/"> ZorNet Перекур</a></li>
 <li class="zn-4"><a href="#"> Магазин сети</a></li>
 <li class="zn-5"><a href="#"> Ваш Твиттер</a></li>
<li class="zn-liren"></li>
<li class="zn-6"><a href="#"> Форум сайта</a></li>
 <li class="zn-7"><a href="#"> Блог портала</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 Ноября 2017 Просмотров: 2116 Комментариев: (10)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 10
Порядок вывода комментариев: Kosten 21 Ноября 2017 16:17¹ 0 Можно сделать, так чтоб при наведение не просто цвет изменялся, а эффект производился, что немного отъезжали категорий. waak 22 Ноября 2017 02:56² +1 Запросто! .zornet_ru_berkan li:hover{ Padding-left:20px; } Kosten 22 Ноября 2017 03:30³ 0 waak, а можно скорость задать, но слишком резко берут со старта. Сделать медленнее реально. waak 22 Ноября 2017 15:14⁴ 0 Запросто просто добавь transition: 2s; -moz-transition: 2s; -o-transition: 2s; -webkit-transition: 2s; 2s время = 2 сек Kosten 22 Ноября 2017 17:34⁵ 0 waak, благодарю, уже запилил 3 навигаций, темную и светлую, только один вопрос остался, а можно задать длину, на сколько бы выезжал запрос. waak 22 Ноября 2017 17:44⁶ 0 Вот тут Padding-left:20px; 20px меняй Kosten 22 Ноября 2017 18:10⁷ 0 Но это для пользователей и гостей, как дополнительная информация, то все уже залил вертикальное меню в двух оттенках. nikolay-ponomar1994 21 Июня 2018 00:29⁸ 0 Ребят, не могу вставить код CSS в Таблицу стилей css. Когда я копирую этот код и вставляю его в самом низу, сайт сразу начинает неправильно работать. Вы можете на примере мне показать куда вставлять этот код? Kosten 21 Июня 2018 02:15⁹ 0 Больше всего стили конфликтуют. точнее есть аналогичный класс в стилистике, вот и сносят друг друга. -SAM- 21 Июня 2018 06:27¹⁰ 0 Конфликт стилей тут маловероятен, ведь Kosten названия классов придумал для этого материала и исходя из домена этого сайта. Думаю, что просто не подключили шрифтовые иконки (как подключать - описано здесь, мало ли). Ну, а чтобы не гадать про то, как именно неправильно стало работать и почему - есть форум, что тему создать можно, указав сайт, на котором возникла проблема с установкой этого меню (или можете скинуть мне в личку, посмотрю в чём там дело).