Вертикално анимирано меню за Blogger
.jpg)
петък
Описание
Най-голямото му предимство пред подобните менюта е неговата простота и лекота, както по размер, така и по време на работа. То е достатъчно леко. А и такъв красив елемент за навигация в блога ще създаде удобство за потребителя и ще привлича вниманието му.Предлагам ви да копирате кода по-долу, да го поставите в този редактор и да погледнете менюто в действие.
<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;
Ако не ви трябва просто го премахнете.
Това са всички настройки. Всъщност менюто е красиво.
Благодаря на всички ви за посещението и скоро ще се видим.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
4 Komentar
-
peSho 23 март 2018 г. в 8:38 Страхотен урок с красив резултат. За сега ми стои в тестовия блог и чака своята изява в основния... :)-
Пепа 23 март 2018 г. в 11:47 ? Радвам се за тази ваша оценка. Всъщност, имам и някои препоръки, касаещи Ежедневието днес", но чакам удобен момент. -
peSho 23 март 2018 г. в 12:22 ? Бих се радвал да получа препоръки от вас. Било то положителни или отрицателни. Знам, че ще са полезни за мен. Когато решите може да ми пишете по удобен за вас начин. -
Пепа 23 март 2018 г. в 19:27 ? Ще се опитам да бъда максимално полезна.
-
