Вертикальное меню для Блоггер
Коды на css, лёгкие, не утяжеляют сайт. 
Проверяйте все коды на работоспособность в визуальном редакторе. Добавьте код в первое окно и нажмите кнопку Показать результат.
Если поменять цвет:
Меню № 1
<ul class="vertical-menu-1">
<li><a href="#">Главная</a></li>
<li><a href="#">Все статьи</a></li>
<li><a href="#">О блоге</a></li>
<li><a href="#">Контакты</a></li>
</ul>
<style>
.vertical-menu-1 *{
transition:all 0.4s;
-webkit-transition:all 0.4s;
font-family:'Open Sans', sans-serif;
}
.vertical-menu-1{
box-shadow: 0px 0px 10px black;
list-style-type:none;
margin:0px;
padding:0px;
display:block;
margin:0 auto;
max-width:300px;
width:100%;
}
.vertical-menu-1 li{
text-align:center;
}
.vertical-menu-1 li a{
text-decoration:none;
color:white;
background-color:#1a1a1a;
display:block;
width:calc(100% - 40px);
padding:20px;
left:0px;
}
.vertical-menu-1 li a:hover{
padding:30px;
margin-left:-10px;
background-color:black;
box-shadow:0px 0px 10px black;
}</style>
Красным выделила в коде названия пунктов, пишите свои. Синим — адреса страниц.
Оранжевым выделила цвет меню.
Зелёным — цвет меню при наведении мыши.
Если нужно добавить новый пункт, добавляем в первую часть кода отрезок
<li><a href="#">Ещё строка</a></li>, что бы получилось:
<ul class="vertical-menu-1">
<li><a href="#">Главная</a></li>
<li><a href="#">Все статьи</a></li>
<li><a href="#">О блоге</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Ещё строка</a></li>
<li><a href="#">Ещё строка</a></li>
</ul>
Меню №2
<ul class="vertical-menu-2">
<li><a href="#">Главная</a></li>
<li><a href="#">Все статьи</a></li>
<li><a href="#">О блоге</a></li>
<li><a href="#">Контакты</a></li>
</ul>
<style>
.vertical-menu-2 *{
transition:all 0.4s;
-webkit-transition:all 0.4s;
font-family:'Arial';
}
.vertical-menu-2{
list-style-type:none;
margin:0px;
padding:0px;
display:block;
margin:0 auto;
max-width:300px;
width:100%;
position:relative;
}
.vertical-menu-2 li{
text-align:center;
overflow:hidden;
display:block;
position:relative;
}
.vertical-menu-2 li a{
text-decoration:none;
color:black;
display:block;
width:calc(100% - 42px);
padding:20px;
left:0px;
border:1px solid #749eff;
border-top:none;
overflow:hidden;
z-index:2;
}
.vertical-menu-2 li:first-child a{
border-top:1px solid #749eff;
display:block;
position:relative;
}
.vertical-menu-2 li a:after{
content:' ';
width:100%;
height:100%;
top:0px;
position:absolute;
background-color:#d6a379;
left:0px;
z-index:-1;
display:block;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transition:all 0.4s;
transition:all 0.4s;
}.vertical-menu-2 li a:hover:after{
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color:white;
}
.vertical-menu-2 li a:hover{
color:white;
}
</style>
Красный в коде — меняем название пунктов.Синий — добавляем адреса страниц пунктов.
Оранжевый — цвет меню, при наведении курсора.
Зелёный — окаёмка меню.
Добавить пункты можно так же, как в первом варианте.
Меню №3
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О блоге</a></li>
<li><a href="#">Карта сайта</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
<style>nav{
float: left;
clear: both;
width: 20%;
margin: 10% auto;
background: #eff;
box-shadow:2px 2px 2px;
font-family: 'Shadows Into Light', cursive;
font-size:24px;
}
nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
nav li{
float: none;
width: 100%;
}
nav li a{
display: block;
width: 100%;
padding: 20px;
border-left: 5px solid;
position: relative;
z-index: 2;
text-decoration: none;
color: #444;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li a:hover{ border-bottom: 0px; color: #fff;}
nav li:first-child a{ border-left: 10px solid #3498db; }
nav li:nth-child(2) a{ border-left: 10px solid #ffd071; }
nav li:nth-child(3) a{ border-left: 10px solid #f0776c; }
nav li:last-child a{ border-left: 10px solid #1abc9c; }
nav li a:after {
content: "";
height: 100%;
left: 0;
top: 0;
width: 0px;
position: absolute;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
z-index: -1;
}
nav li a:hover:after{ width: 100%; }
nav li:first-child a:after{ background: #1C699C; }
nav li:nth-child(2) a:after{ background: #B87A00; }
nav li:nth-child(3) a:after{ background: #FF311F; }
nav li:last-child a:after{ background: #149077; }
}
</style>
Красным выделила в коде названия пунктов, пишите свои.
Синим — адреса страниц.
Оранжевым выделила цвет меню.
Зелёным — цвета боковой полоски (4 цвета).
Розовым — цвета фона меню при наведении курсора (4 цвета).
Добавляем ещё пункты так: вписываем строку <li><a href="#">Новая</a></li>перед </ul> (отметила в коде коричневым).
Автор кода:
Комментарии со спамом удаляются.