0

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

Анимирано меню
Поздрави на всички мои читатели и посетители. Ако сте от тези, които обичат да разнообразяват дизайна на блога си, тази моя публикация е за вас. Искам да ви предложа един необичаен вариант на анимирано меню, което може да се инсталира директно в публикация на блога. Ще го направим без да използваме 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/sdrzhanie_1.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. Тогава анимираното меню може да е в страничната колона или навсякъде, където искате да бъде. Не заема много място, разнообразява вашия дизайн и ще е много удобно за читателите ви.


Ще съм благодарна, ако споделите тази публикация с приятели.


Успех на всички ни.

Няма коментари :

Публикуване на коментар

Ще съм признателна и наистина оценявам вашите приятелски коментари. Всеки опит да бъдат въведени автора и читателите в дискусия, както и препратките към външни ресурси ще бъдат премахвани. Моля, прочетете Terms of use And Privacy Policy. Благодаря за вашия отзив.


Copyright © БЛОГ ЗА БЛОГОВЕ   . All Rights Reserved
Original style & code - magentawave.com   -  Powered by Blogger