Как добавить вертикальное меню СSS в блог на Blogger (Blogspot)
Заходим Административная панель Blogger > Дизайн > Добавить гаджет > HTML/JavaScript, вставляем скопированный код, изменяем название и адрес страниц.
<nav class="mainNav">
<ul>
<li><a href="#" data-title="Главная">Главная</a></li>
<li><a href="#" data-title="Название">Название</a></li>
<li><a href="#" data-title="Название">Название</a></li>
<li><a href="#" data-title="Название">Название</a></li>
<li><a href="#" data-title="Название">Название</a></li>
<li><a href="#" data-title="Название">Название</a></li>
</ul>
</nav>
<style>
.mainNav {
float: left;
transform: perspective(500px);
transform-style: preserve-3d;
}
.mainNav li{
padding:0px;
}
.mainNav ul {
list-style: none;
padding: 0px;
}
.mainNav a {
background-color: #fafafa;
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
linear-gradient(-72deg, hsla(0,0%,100%,.05) 50%, transparent 50%);
backface-visibility: hidden;
box-shadow: inset 0 0 .25em hsla(0,0%,0%,.1),
inset 0 0 1.5em hsla(0,0%,0%,.25);
color: #322;
display: block;
font: bold 1em/3 sans-serif;
padding: 0 1.5em;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
transition: .5s;
transform-origin: 50% 0;
transform-style: preserve-3d;
width: 6em;
}
.mainNav a:after {
background-color: inherit;
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
linear-gradient(-72deg, hsla(0,0%,100%,.05) 50%, transparent 50%),
linear-gradient(hsla(0,0%,0%,.25), hsla(0,0%,0%,.25));
box-shadow: inset 0 0 .25em hsla(0,0%,0%,.2),
inset 0 0 1.5em hsla(0,0%,0%,.4);
bottom: 0;
color: #fff;
content: attr(data-title);
left: 100%;
line-height: 3;
position: absolute;
top: 0;
transform: rotateY(90deg);
transform-origin: 0 0;
width: 100%;
}
.mainNav a:before {
background-color: inherit;
background-image: linear-gradient(hsla(0,0%,100%,.07), hsla(0,0%,0%,.07)),
linear-gradient(hsla(0,0%,0%,.5), hsla(0,0%,0%,.5));
bottom: 0;
content: '';
height: 9em;
left: 100%;
position: absolute;
top: 0;
transform-origin: 0 0;
width: 100%;
}
.mainNav li:nth-child(-n+2) a:before {
transform: rotateX(-90deg) translateX(-9em) translateZ(3em);
}
.mainNav li:nth-child(n+3) a:before {
transform: rotateX(-90deg) translateX(-9em);
}
.mainNav li:hover a {
transform: rotateY(-90deg) translateX(-4.5em) translateZ(4.5em);
z-index: 10;
}
</style>
Будь вместе с Я Блоггер
