» »

Вертикальное меню блога для uCoz


Вертикальное меню блога для uCoz

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

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

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

Визуально при установке:

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

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

Нужно подключить шрифтовые иконки, а это копируем и ставим в верх сайта:

Код
<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>

CSS:

Код
#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; /* Отступ у иконки пунктов меню */
}

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

Также даю стили, которые, возможно, больше по дизайну понравятся... в общем, есть выбор - здесь смотрим, что дописать еще в CSS:

Код
/* Дополнительные стили (можно не применять) */
#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;
}
/* --- */

То так визуально будет:

Вертикальное меню со знаками.

Чтобы посмотреть DEMO, скачиваем прикрепленный файл. Код и стили также можно скачать с текстового файла.
19.04.2017 Загрузок: 7 Просмотров: 633 Комментарий: (10)

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

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

Комментарий: 10
Kosten
Kosten 19.04.2017 03:111
+3
Спасибо пользователю -SAM-, который помог по стилям и лишнее убрал.
Kosten
Kosten 19.04.2017 03:122
0
По самому вертикальному меню, пока не убрал с тестового сайте, это здесь вы можете посмотреть в работе.
Brung
Brung 19.04.2017 03:213
0
Почему именно для блога, на многие темы подойдет, если в разделе много категорий.
Brung
Brung 19.04.2017 15:534
0
Второй дизайн больше нравится, немного углы закруглить и все как нужно.
Марковичь
Марковичь 19.04.2017 18:225
0
Хорошо изменили, это больше будет востребовано, а обоих вариациях.
Kosten
Kosten 19.04.2017 22:556
+1
Демонстрация красиво сделано по цветам, хотя там яркие оттенки, но можно на свои вывести.

Смотреть DEMO на кнопке скачать.
Brung
Brung 19.04.2017 23:007
+1
Подход оригинален, кнопки одним цветом, шрифт другим, согласен, красива, а что по цвету, то каждый вебмастер в любом случай будет добивать под свой дизайн.
1 2 »
avatar