Вертикальное меню для BLOGGER (3 варианта)

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

Для удобства пользователей и для лучшей навигации меню является одним из основных элементов любого сайта.

У меня уже достаточно много постов с разными менюшками, которые вы можете посмотреть в разделе <<категории>> вкладке <<меню>>. Выбирайте любое.

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

Во всех кодах устанавливайте адреса своих страниц и их названия. Я их выделила везде разным цветом. В двух кодах зелёным отмечены иконки в пунктах меню размером 16 x16 пикселей. Можно подобрать свои. Скопируйте себе в блокнот нужное, сделайте необходимые изменения и уже готовое тоже можно проверить в редакторе, ссылка на который выше.

Простое вертикальное меню со стрелочками

Код

<ul class="block_menu">
<a href="http://www.shpargalochki.ru" title="Главная страница">Главная</a>
<a href="http://www.shpargalochki.ru/p/blog-page.html" title="Карта ">Карта блога</a>
<a href="http://www.shpargalochki.ru/p/blog-page_84.html" title="Вопросы">Вопрос - ответ</a>
<a href="http://www.shpargalochki.ru/p/blog-page_84.html" title="Вопросы">Вопрос - ответ</a>
<a href="http://www.shpargalochki.ru/p/blog-page_34.html" title="Связь">Форма связи</a>

</ul>
<style>
.block_menu {margin:0; padding:0; list-style:none;}
.block_menu a:link,
.block_menu a:active,
.block_menu a:visited {width:169px; height:18px; padding:2px 0 0 21px; display:block; margin:0 0 1px 0; color:#747475; text-decoration:none; overflow:hidden; background:url(https://gdeposylka.ru/img/shiptor.png) no-repeat 0 0;}
.block_menu a:hover {color:#ea7609; background-position:0 -20px;}
</style>

Синее вертикальное меню с красивым эффектом

Код

<ul class="HBru">
<li><br /></li>
<li><br /></li>
<li><a href="http://www.shpargalochki.ru" title="Главная страница">Главная</a>  </li>
<li><a href="http://www.shpargalochki.ru/p/blog-page.html" title="Карта ">Карта блога</a>  </li>
<li><a href="http://www.shpargalochki.ru/p/blog-page_84.html" title="Вопросы">Вопрос - ответ</a> </li>
<li><a href="http://www.shpargalochki.ru/p/blog-page_84.html" title="Вопросы">Вопрос - ответ</a> </li>
<li><a href="http://www.shpargalochki.ru/p/blog-page_34.html" title="Связь">Форма связи</a>
</li>

</ul>
<style>
ul.HBru{-webkit-margin-before: 0;-webkit-margin-after: 0;-webkit-padding-start: 0;padding: 0px;}
ul.HBru li {list-style: none;}
ul.HBru li a {text-decoration: none;background-color: #fff;display: block;font-size: 15px;margin-bottom: 3px;border-left: solid 5px #4766b9;padding: 12px 0 12px 15px;color: #ffffff;background-size: 200.22% auto;-webkit-background-size: 200.22% auto;-moz-background-size: 200.22% auto;background-position: -0 0;background-image: linear-gradient(to right,rgb(1, 1, 8) 20%,rgb(69, 142, 195) 50%);transition: background-position .5s ease-out;-webkit-transition: background-position .5s ease-out;width: 250px;}
ul.HBru li a:hover {background-position: -99.99% 0;color: #fff;text-shadow: 0 1px 0 #171616;}
</style>

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

Код

<div class="block-cont">
<ul class="bnav">

<li><a class="mgreen" href="http://www.shpargalochki.ru/"><span><i class="ico ico_green"></i> Главная страница</span></a></li>
<li><a class="mgreen" href="http://www.shpargalochki.ru/p/blog-page.html"><span><i class="ico ico_green"></i>Карта блога</span></a></li>
<li><a class="mgreen" href="http://www.shpargalochki.ru/p/blog-page_84.html"><span><i class="ico ico_green"></i>Вопросы - ответы</span></a></li>
<li><a class="mgreen" href="http://www.shpargalochki.ru/p/blog-page_29.html"><span><i class="ico ico_green"></i>Об авторе</span></a></li>
<li><a class="mgreen" href="http://www.shpargalochki.ru/p/blog-page_34.html"><span><i class="ico ico_green"></i>Форма связи</span></a></li>

</ul>

<style>
.bnav {
  margin: 0;
  padding: 0;
  width: 238px;
  margin: auto;
  display: block;
  list-style: none;
}

.bnav li {
  margin: 0;
  border-bottom: 1px solid #e4e2e0;
}

.bnav li:last-child {
  border-bottom: 0;
}

.bnav li a {
  display: block;
  color: #747474;
  text-decoration: none;
}

.bnav li a span {
  height: 36px;
  line-height: 36px;
  display: block;
  color: #747474;
  padding: 0 0 0 36px;
  position: relative;
}

.bnav li a.mgreen:hover span {
  color: #ffffff;
  text-shadow: 0 1px 1px #3d9510;
  background: #6eb521;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}


.ico {
  display: inline-block;
  vertical-align: middle;
  background-position: 0 0;
  width: 16px;
  height: 16px;
}

.ico_green {
  background: url(http://www.knclub.ru/f/images/buttons/folder_user.png) no-repeat 0 0;
  position: absolute;
  left: 12px;
  top: 10px;
}

</style>

Разместите код вертикального меню в гаджет HTML и установите в нужном месте боковой панели макета блога. Оно всегда будет перед взором читателя.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email