Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

Вертикално анимирано меню за 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;

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

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

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

    BGtop

    4 коментара:

    1. Страхотен урок с красив резултат. За сега ми стои в тестовия блог и чака своята изява в основния... :)

      ОтговорИзтриване
      Отговори
      1. Радвам се за тази ваша оценка. Всъщност, имам и някои препоръки, касаещи Ежедневието днес", но чакам удобен момент.

        Изтриване
      2. Бих се радвал да получа препоръки от вас. Било то положителни или отрицателни. Знам, че ще са полезни за мен. Когато решите може да ми пишете по удобен за вас начин.

        Изтриване
      3. Ще се опитам да бъда максимално полезна.

        Изтриване