Доброго времени суток, друзья. Давно не публиковала коды меню и вот сегодня для вас сделала ещё 3 варианта вертикального меню для блога. Установить их не составит труда даже если вы совсем новичок.
Для удобства пользователей и для лучшей навигации меню является одним из основных элементов любого сайта.
У меня уже достаточно много постов с разными менюшками, которые вы можете посмотреть в разделе <<категории>> вкладке <<меню>>. Выбирайте любое.
И вернёмся к сегодняшним. Сразу оговорюсь, в посте только внешний вид каждого меню. Для того, чтобы увидеть его наглядно, скопируйте нужный код и поместите его в этот редактор для просмотра результата.
Во всех кодах устанавливайте адреса своих страниц и их названия. Я их выделила везде разным цветом. В двух кодах зелёным отмечены иконки в пунктах меню размером 16 x16 пикселей. Можно подобрать свои. Скопируйте себе в блокнот нужное, сделайте необходимые изменения и уже готовое тоже можно проверить в редакторе, ссылка на который выше.
Простое вертикальное меню со стрелочками
Код
Синее вертикальное меню с красивым эффектом
<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>

Для удобства пользователей и для лучшей навигации меню является одним из основных элементов любого сайта.
У меня уже достаточно много постов с разными менюшками, которые вы можете посмотреть в разделе <<категории>> вкладке <<меню>>. Выбирайте любое.
И вернёмся к сегодняшним. Сразу оговорюсь, в посте только внешний вид каждого меню. Для того, чтобы увидеть его наглядно, скопируйте нужный код и поместите его в этот редактор для просмотра результата.
Во всех кодах устанавливайте адреса своих страниц и их названия. Я их выделила везде разным цветом. В двух кодах зелёным отмечены иконки в пунктах меню размером 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>
<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>
Синее вертикальное меню с красивым эффектом

Код
<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 и установите в нужном месте боковой панели макета блога. Оно всегда будет перед взором читателя.
Получайте новые сообщения с блога прямо на почту
Интересно! Спасибо! С праздником!
ОтветитьУдалитьОдним из ранее предложенных вариантов, Вика, я и воспользовалась. Спасибо. Работает. С наступившим Новым годом и Рождеством! https://otkritkiok.ru/prazdniki/rozhdestvo-khristovo/novaia-otkritka-s-rojdestvom
ОтветитьУдалитьСпасибо, Люба и Ирина. Вас с праздником, девчата.
ОтветитьУдалитьОгромное спасибо, все работает прекрасно
ОтветитьУдалитьПожалуйста, Приятно слышать что пригодилось.
УдалитьВика, замечательные идеи! Благодаря вашим урокам, можно оформить блог сказочной красоты! С праздником, с Рождеством Хритовым!
ОтветитьУдалитьАлла, и Вас с праздником. Спасибо за внимание к моим шпаргалкам.
ОтветитьУдалить