Анимирано меню на блог в публикация

Поздрави на всички мои читатели и посетители. Ако сте от тези, които обичат да разнообразяват дизайна на блога си, тази моя публикация е за вас. Искам да ви предложа един необичаен вариант на анимирано меню, което може да се инсталира директно в публикация на блога. Ще го направим без да използваме JavaScript.
Единственото нещо, към което искам да насоча вашето внимание е, че не всички браузъри поддържат CSS3. Ако използвате Crome, Firefox и IE10, менюто ще се показва правилно.

И нека да разгледаме как изглежда. Поставете курсора на мишката върху изображението.

Главна страница

Съдържание

За автора

Форма за контакт

Ако имате желание да създадете това анимирано меню в някоя от вашите публикации трябва да разберем и редактираме неговия код.

<center>
<div class="exampleCSS">
<div style="text-align: center;">
<a href="http://www.blogzablogove.com/" target="_blank" title=" главна">Главна страница</a><br>
<a href="http://www.blogzablogove.com/p/sdrzhaniе.html" target="_blank" title="съдържание">Съдържание</a><br>
<a href="http://www.blogzablogove.com/p/za-avtora-na-bloga.html" target="_blank" title="автор">За автора</a><br>
<a href="http://www.blogzablogove.com/p/stranica-za-kontakti.html" target="_blank" title="контакт"> Форма за контакт </a><br></div>
</div>
<style>.exampleCSS {
    background-color:#ffdab9;;
    width:300px;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
.exampleCSS:hover {
    background-color:#87cefd;
    -webkit-transform: rotate(360deg) scale(3);
    -moz-transform: rotate(360deg) scale(3);
    -o-transform: rotate(360deg) scale(3);
    -ms-transform: rotate(360deg) scale(3);
    transform: rotate(360deg) scale(3);
}</style>
</center>

Както можете да видите, кодът е съвсем елементарен. Копирайте го в текстови файл или блокнот на вашия компютър и нека го разгледаме. Това, което е оцветено в синьо, е адресът на страниците, които ще се показват в менюто. Променете ги на своите собствени. За да добавите повече елементи в менюто, просто добавете още един или повече пъти този участък в кода.

<a href="адрес на страница" target="_blank" title=" главна">наименование на страница</a>

В CSS стиловете особеното е:

➤първия зелен цвят е основният фон на менюто

➤втория зелен цвят е цвета на фона на менюто, когато е под курсора и след задържане на мишката върху него

➤width:300px; е ширината на изображението в спокойно състояние

➤обърнете внимание на цифрата 3, която е в скоби. Тя отговаря за размера на прозореца след увеличението. Можете да поставите 2 или 5, ако желаете

➤Свойството 360deg е за функцията завъртане на 360 градуса

Цветове на фона в спокойно състояние и под курсора ( оцветени в зелено в кода )можете да замените с подходящи на вашия дизайн, като използвате тази таблица.

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


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

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

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