Ещё 3 варианта вертикального меню(http://www.shpargalochki.ru/2014/05/tri-vertikalnyh-menju.html) для блога.
Для удобства пользователей и для лучшей навигации меню является одним из основных элементов любого сайта.
Для того, чтобы увидеть его наглядно, скопируйте нужный код и поместите его в этот редактор(http://www.shpargalochki.ru/p/html.html) для просмотра результата.
Во всех кодах устанавливайте адреса своих страниц и их названия, выделинны везде разным цветом. В двух кодах зелёным отмечены иконки в пунктах меню размером 16 x16 пикселей. Можно подобрать свои. Скопируйте себе в блокнот нужное, сделайте необходимые изменения и уже готовое тоже можно проверить в редакторе, ссылка на который выше.
Простое вертикальное меню со стрелочками
Код
<ul class="block_menu">
<a href="[url]http://www.shpargalochki.ru[/url]" title="Главная страница">Главная</a>
<a href="[url]http://www.shpargalochki.ru/p/blog-page.html[/url]" title="Карта ">Карта блога</a>
<a href="[url]http://www.shpargalochki.ru/p/blog-page_84.html[/url]" title="Вопросы">Вопрос - ответ</a>
<a href="[url]http://www.shpargalochki.ru/p/blog-page_84.html[/url]" title="Вопросы">Вопрос - ответ</a>
<a href="[url]http://www.shpargalochki.ru/p/blog-page_34.html[/url]" 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([url]https://gdeposylka.ru/img/shiptor.png[/url]) 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="[url]http://www.shpargalochki.ru[/url]" title="Главная страница">Главная</a> </li>
<li><a href="[url]http://www.shpargalochki.ru/p/blog-page.html[/url]" title="Карта ">Карта блога</a> </li>
<li><a href="[url]http://www.shpargalochki.ru/p/blog-page_84.html[/url]" title="Вопросы">Вопрос - ответ</a> </li>
<li><a href="[url]http://www.shpargalochki.ru/p/blog-page_84.html[/url]" title="Вопросы">Вопрос - ответ</a> </li>
<li><a href="[url]http://www.shpargalochki.ru/p/blog-page_34.html[/url]" 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="[url]http://www.shpargalochki.ru/[/url]"><span><i class="ico ico_green"></i> Главная страница</span></a></li>
<li><a class="mgreen" href="[url]http://www.shpargalochki.ru/p/blog-page.html[/url]"><span><i class="ico ico_green"></i>Карта блога</span></a></li>
<li><a class="mgreen" href="[url]http://www.shpargalochki.ru/p/blog-page_84.html[/url]"><span><i class="ico ico_green"></i>Вопросы - ответы</span></a></li>
<li><a class="mgreen" href="[url]http://www.shpargalochki.ru/p/blog-page_29.html[/url]"><span><i class="ico ico_green"></i>Об авторе</span></a></li>
<li><a class="mgreen" href="[url]http://www.shpargalochki.ru/p/blog-page_34.html[/url]"><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([url]http://www.knclub.ru/f/images/buttons/folder_user.png[/url]) no-repeat 0 0;
position: absolute;
left: 12px;
top: 10px;
}
</style>
Разместите код вертикального меню в гаджет HTML и установите в нужном месте боковой панели макета блога. Оно всегда будет перед взором читателя.
источник:http://www.shpargalochki.ru/2018/01/vertikalnoe-menyu-dlya-blogger-3-varianta.html
0 коммент.:
Отправить комментарий