Вариант необычного анимированного меню http://www.shpargalochki.ru/2014/11/neobychnoe-animirovannoe-menju.html, которое можно установить непосредственно в сообщение блога. К тому же, обойдёмся без JavaScript.
И давайте уже смотреть, как это выглядит. Наведите на картинку курсор.
Код красивого анимированного меню
<center>
<div class="exampleCSS">
<div style="text-align: center;">
<a href="[url]АДРЕС[/url]" target="_blank" title=" главная">Главная страница</a><br>
<a href="[url]АДРЕС[/url]" target="_blank" title="содержание">Содержание</a><br>
<a href="[url]АДРЕС[/url]" target="_blank" title="автор">Об авторе</a><br>
<a href="[url]АДРЕС[/url]" 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. И тогда такая красота будет будет на боковой панели или где вы его хотите видеть. К тому же не займёт много места. А в работе будет очень удобным для пользователей.
Идея создания автор блога [url]http://www.sitehere.ru/[/url]. В самом коде внесла некоторые изменения, чтобы применить на блоггере.
http://www.shpargalochki.ru/
0 коммент.:
Отправить комментарий