Анимация горизонтальное меню



Здравствуйте друзья, гости и читатели блога. Сегодня в этом сообщении Вы найдете ещё одно меню, горизонтальное. Может кому-либо из Вас оно подойдет к дизайну блога. У меня что то не вписывается ни в одном из моих блогов. Смотрите на скриншоте вид меню:

Горизонтальное меню для блога blogspot
Горизонтальное меню для блога blogger

Вот код, вставляется обычным гаджетом дизайн-добавить гаджет-Html/JavaScript.  В каждом шаблоне меню имеет разный вид.

<style type="text/css">.exespotlightmenu{width: 100%;overflow:hidden;}.exespotlightmenu ul{margin: 0;padding: 0;font: bold 14px Verdana; /* font style and size */list-style-type: none;text-align: center; /* "left", "center", or "right" align menu */}.exespotlightmenu li{display: inline-block;position:relative;padding: 5px;margin: 0;margin-right: 5px; /* right margin between menu items */}.exespotlightmenu li a{display:inline-block;padding: 5px;min-width:50px; /* horizontal diameter of spotlight */height:50px; /* vertical diameter of spotlight */text-decoration: none;color: black;margin: 0 auto;overflow:hidden;-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}.exespotlightmenu li:hover a{color: white;background: #a71b15; /* background color of spotlight */-webkit-border-radius: 50%; /* large radius to create circular borders */-moz-border-radius: 50%;border-radius: 50%;}.exespotlightmenu li a exespan{position:relative;top:35%; /* move text down so it appears centered within menu item */}</style><br /><div class="exespotlightmenu"><ul><li><a href="Адрес ссылки"><exespan>Пример горизонтального  меню </exespan></a></li><li><a href="Адрес ссылки"><exespan>Об авторе</exespan></a></li><li><a href="Адрес ссылки"><exespan>Карта</exespan></a></li><li><a href="Адрес ссылки"><exespan>Подписка на E-mail</exespan></a></li></ul></div>


Адрес ссылки вписываем свой; Подписка на E-mail - заголовки; width:50px ширина панели; height:50px высота панели, background: #a71b15 фон панели. Если будете вносить изменения, ширину лучше не трогать, размер выставлен по ширине стандартного меню. 

Ссылки можно добавить, заключив в код

<li><a href="адрес ссылки"><exespan>текст</exespan></a></li>

С остальными настройками, если понадобится, я думаю разберетесь легко. Всего наилучшего.





Автор статьи ✎ Olga Protasova Выпуск ✹ 10/13/2013 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *