Актуальное и понятное вертикальное меню в светлой гамме, которое построено на шрифтовых иконках, хорошо подойдет под каталог блога. До этого эта навигация размещалась на сайте и можно найти ее
здесь, но эта было полностью перестроенной и переделанной. Здесь убраны нарисованные кнопки и поставлены на стилях.
Tеперь у вас есть возможность под каждый запрос поставить соответственную кнопку, которая соответствовала тематическому наклонению. Основной код выставляется в блок сайта, а вот стили потом нужно настроить как вам нужно, так как ранее там был эффект цветовой при наведении на любой запрос, что прописан в навигации.
Этот вид немного переделан, это при наведении просто запись немного на пару пикселей отходит, это отлично заметно, на какой раздел был клик наведен. Был установлен на светлую стилистику, но это не означает, что на темный не подойдет, просто нужно в стилях все вывести по цветовой гамме, чтоб смотрелось корректно и главное понятно для пользователя.
Приступаем к установке: Нужно подключить
шрифтовые иконки, а это копируем и ставим
в верх сайта:
Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
Это основной код
в блок:
Код
<div id="menu_l">
<ul>
<li><a href="zornet.ru"><i class="fa fa-bullhorn" aria-hidden="true"></i>Скрипты для uCoz</a></li>
<li><a href="zornet.ru/load/81"><i class="fa fa-sign-out" aria-hidden="true"></i>Шаблоны на zornet.ru</a></li>
<li><a href="zornet.ru/load/142"><i class="fa fa-hand-o-right" aria-hidden="true"></i>Графика на zornet</a></li>
<li><a href="zornet.ru/load/145"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Раскрутка на zornet.ru</a></li>
<li><a href="zornet.ru/load/85"><i class="fa fa-share-square" aria-hidden="true"></i>Заработок на zornet.ru</a></li>
<li><a href="#"><i class="fa fa-pie-chart" aria-hidden="true"></i>Блог на zornet.ru</a></li>
<li><a href="#"><i class="fa fa-diamond" aria-hidden="true"></i>Видео уроки</a></li>
<li><a href="#"><i class="fa fa-check-square" aria-hidden="true"></i>Форум на zornet.ru</a></li>
<li><a href="#"><i class="fa fa-camera" aria-hidden="true"></i>Платные услуги сайта</a></li>
<li><a href="#"><i class="fa fa-bell" aria-hidden="true"></i>Предложить материал на сайте</a></li>
</ul>
</div>
Код
#menu_l {
max-width: 250px; /* Должно быть меньше ширины контейнера */
}
#menu_l ul, #menu_l ul li {
margin:0;
padding:0;
list-style:none;
}
#menu_l ul li {
overflow:hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#menu_l ul li a {
color: #545252;
font-size: 13px;
font-family: sans-serif;
line-height: 35px;
display:inline;
white-space:nowrap;
overflow:hidden;
padding-left: 8px; /* Отступ слева основной */
text-decoration:none;
}
#menu_l ul li a:hover {
padding-left: 10px; /* Эффект отступа при наводке */
text-decoration:none;
}
#menu_l ul li i {
padding-right: 8px; /* Отступ у иконки пунктов меню */
}
Код
/* Дополнительные стили (можно не применять) */
#menu_l ul {
border:1px solid #a7a6a6;
}
#menu_l ul li {
border-bottom:1px solid #a7a6a6;
}
#menu_l ul li:nth-child(odd) {
background-color:#ffffff;
}
#menu_l ul li:nth-child(even) {
background-color:#f1f1f1;
}
#menu_l ul li:last-child {
border-bottom:none;
}
#menu_l ul li a {
display:block;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
/* Еще стили на цвет при наводке */
#menu_l ul li a:hover {
background-color: #F5F6FA;
-webkit-transition: 200ms;
-moz-transition: 200ms;
-o-transition: 200ms;
transition: 200ms;
color:#ff0000;
}
#menu_l ul li a:hover i {
color:#0000ff;
}
/* --- */
:
Здесь нет такого, чтоб автоматически в каркас встало, так как контейнеры и блоки разные по ширине, то вам придется самим подогнать по размеру, но и эффект отступа можете больше сделать.
Также код и стили скачать с текстового файла
Не выводит сообщения в чат.
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
