Необычное анимированное меню в сообщении

Приветствую всех своих читателей и гостей блога. Хочу предложить вам сегодня вариант необычного анимированного меню, которое можно установить непосредственно в сообщение блога. К тому же, обойдёмся без JavaScript.
Единственное, на что обращу ваше внимание, не все браузеры поддерживают  CSS3. Если вы используете Crome, Firefox или IE10, то меню будет отображаться вполне корректно.

И давайте уже смотреть, как это выглядит. Наведите на картинку курсор.

Главная страница
Содержание
Об авторе
Форма связи

Если появилось желание установить такое у себя на странице, разберём и отредактируем код.

Код красивого анимированного меню 

<center>
<div class="exampleCSS">
<div style="text-align: center;">
<a href="http://www.shpargalochki.ru/" target="_blank" title=" главная">Главная страница</a><br>
<a href="http://www.shpargalochki.ru/p/srchttpdl.html" target="_blank" title="содержание">Содержание</a><br>
<a href="http://www.shpargalochki.ru/p/blog-page_29.html" target="_blank" title="автор">Об авторе</a><br>
<a href="http://www.shpargalochki.ru/p/blog-page_2746.html" target="_blank" title="связь">Форма связи</a><br></div>
</div>
<style>.exampleCSS {
    background-color:#e9967a;;
    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:#8fbc8f;
    -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. И тогда такая красота будет будет на боковой панели или где вы его хотите видеть. К тому же не займёт много места. А в работе будет очень удобным для пользователей.

Идею создания мне подсказал автор блога http://www.sitehere.ru/. В самом коде внесла некоторые изменения, чтобы применить на блоггере. Пользуйтесь.

Буду благодарна, если поделитесь этой статьёй со своими друзьями.Впереди ещё будет много интересного. Подписывайтесь на обновления моих шпаргалок.

оформите подписку на новые шпаргалки

Введите Ваш email ...: