Вертикално анимирано меню за Blogger

Поздрави, приятели. Предлагам ви днес оригиналното вертикално меню с анимационни елементи за вашия блог. Дизайнът му идеално подхожда за всеки ресурс и дори за всяка тематика. Настройките му изобщо не са сложни. Кодът за това меню се инсталира в притурката HTML / JavaScript и се поставя в страничната колона на блога.


кликнете тук, за да прочетете повече

Описание

Най-голямото му предимство пред подобните менюта е неговата простота и лекота, както по размер, така и по време на работа. То е достатъчно леко. А и такъв красив елемент за навигация в блога ще създаде удобство за потребителя и ще привлича вниманието му.
Предлагам ви да копирате кода по-долу, да го поставите в този редактор и да погледнете менюто в действие.

<div class = "container" style = "">

<ul class = "nice-menu bounce">

<li class = "orange"><a href = "#### ">Главна страница</a></li>

<li class = "red"><a href = "####">Съдържание</a></li>

<li class = "green"><a href = "####">Контакти</a></li>

<li class = "blue"><a href = "####">Инструменти</a></li>

<li class = "bright"><a href = "#### ">За автора</a></li>

<li class = "pink"><a href = "####">За блога</a></li>

</ul>

</div>

<style>

ul.nice-menu {

list-style: none;

margin-top: 30px;

width: 300px;

}

@-moz-keyframes expand {

0% {

width: 5px;

padding-left: 0px;

}

100% {

width: 200px;

padding-left: 20px;

}

}

@-moz-keyframes expand-bounce {

0% {

width: 5px;

padding-left: 0px;

}

50% {

width: 200px;

}

70% {

width: 170px;

}

80% {

width: 200px;

}

90% {

width: 190px;

}

100% {

width: 200px;

padding-left: 20px;

}

}

@-webkit-keyframes expand {

0% {

width: 5px;

padding-left: 0px;

}

100% {

width: 200px;

padding-left: 20px;

}

}

@-webkit-keyframes expand-bounce {

0% {

width: 5px;

padding-left: 0px;

}

50% {

width: 200px;

}

70% {

width: 170px;

}

80% {

width: 200px;

}

90% {

width: 190px;

}

100% {

width: 200px;

padding-left: 20px;

}

}

@-moz-keyframes shrink {

0% {

width: 200px;

padding-left: 20px;

}

100% {

width: 5px;

padding-left: 0px;

}

}

@-moz-keyframes shrink-bounce {

0% {

width: 200px;

padding-left: 20px;

}

50% {

width: 5px;

}

70% {

width: 35px;

}

80% {

width: 5px;

}

90% {

width: 15px;

}

100% {

width: 5px;

padding-left: 0px;

}

}

@-webkit-keyframes shrink {

0% {

width: 200px;

padding-left: 20px;

}

100% {

width: 5px;

padding-left: 0px;

}

}

@-webkit-keyframes shrink-bounce {

0% {

width: 200px;

padding-left: 20px;

}

50% {

width: 5px;

}

70% {

width: 35px;

}

80% {

width: 5px;

}

90% {

width: 15px;

}

100% {

width: 5px;

padding-left: 0px;

}

}

ul.nice-menu li {

width: 5px;

height: 30px;

line-height: 20px;

padding: 0px 0px 0px 0px;

margin-top: 3px;

background: transparent;

width: 5px;

}

ul.nice-menu.tight li {

margin-top: 0 !important;

}

ul.nice-menu li {

-moz-animation-name: shrink;

-moz-animation-duration: 0.5s;

-moz-animation-timing-function: ease-in-out;

-webkit-animation-name: shrink;

-webkit-animation-duration: 0.5s;

-webkit-animation-timing-function: ease-in-out;

}

ul.nice-menu.bounce li {

-moz-animation-name: shrink-bounce;

-moz-animation-duration: 0.5s;

-moz-animation-timing-function: ease-in-out;

-webkit-animation-name: shrink-bounce;

-webkit-animation-duration: 0.5s;

-webkit-animation-timing-function: ease-in-out;

}

ul.nice-menu li:hover {

width: 200px;

padding-left: 20px;

-moz-animation-name: expand;

-moz-animation-duration: 0.5s;

-moz-animation-timing-function: ease-in-out;

-webkit-animation-name: expand;

-webkit-animation-duration: 0.5s;

-webkit-animation-timing-function: ease-in-out;

}

ul.nice-menu.bounce li:hover {

-moz-animation-name: expand-bounce;

-moz-animation-duration: 0.5s;

-moz-animation-timing-function: ease-in-out;

-webkit-animation-name: expand-bounce;

-webkit-animation-duration: 0.5s;

-webkit-animation-timing-function: ease-in-out;

}

ul.nice-menu a {

width: 200px;

text-decoration: none;

font-size: 16px;

color: #000000;

text-shadow: 0px 0px 3px #333;

font-weight: bold;

position: absolute;

padding: 5px 0px;

padding-left: 20px;

}

ul.nice-menu li.green {

background: rgb(107,186,112);

}

ul.nice-menu li.blue {

background: rgb(78,92,127);

}

ul.nice-menu li.orange {

background: rgb(255,204,0);

}

ul.nice-menu li.pink {

background: rgb(255,192,203);

}

ul.nice-menu li.red {

background: rgb(178,59,30);

}

ul.nice-menu li.bright {

background: rgb(153,0,153);

}

</style>

Настройки

Решихте да го използвате? Тогава направете следните промени в кода:

➤Попълнете адресите на страниците, които са в началото на кода и са отбелязани с ####;

➤Променете имената на страниците;

➤В CSS стиловете на кода съм маркирала цвета на текста в разделите на менюто.

color: #000000;

➤В зависимост от вашето желание и дизайн ги променете според вашето желание. Можете да използвате тази таблица.

➤В кода също така е прописан елемент, отговарящ за сянка на шрифта.

text-shadow: 0px 0px 3px #333;

Ако не ви трябва просто го премахнете.
Това са всички настройки. Всъщност менюто е красиво.
Благодаря на всички ви за посещението и скоро ще се видим.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: