В прошлой статье « Как создать меню страниц в блоге на Blogger (Blogspot)» я подробно рассказала как создать простое горизонтальное меню.
Сегодня я расскажу и наглядно вам покажу как можно изменить дизайн меню страниц. Вашему вниманию предлагаю несколько вариантов горизонтального меню.
Горизонтальное анимированное меню для blogger (blogspot)| Примеры
Чем удобны в установке такие меню? Что бы добавить меню в блог не нужно ничего менять в шаблоне, все предложенные варианты добавляются как обычный гаджет.
Административная панель > Дизайн > Добавить гаджет > HTML/JavaScript. Коды меню состоят из стилей Css и Html.
Пример 1
<style>
#menumain{ border: solid 1px #39F; background:#64DAFC
url(https://2.bp.blogspot.com/-ZQ4Ew23ACUY/Wca8fkoIHiI/AAAAAAAAFV0/LcwuFcJ7_UIp4R3euXRZsjxJjsLc9NCQQCLcBGAs/s1600/sinee-menyu-1.gif) repeat-x; }
#mainmenu{ font-size:0; }
#mainmenu ul,
#mainmenu li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#mainmenu a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url(https://4.bp.blogspot.com/-d145YtqEbI0/Wca8l6LQWBI/AAAAAAAAFV4/81ZpEXTX-N4umQ40f6g4MMDCICsK57zPgCLcBGAs/s1600/sinee-menyu-2.gif) no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#mainmenu a:hover,
#mainmenu a.current{ background-position: 0% -60px; color: #fff; }
</style>
<div id="menumain">
<div id="mainmenu">
<a href="#">Главная</a>
<a href="#">Название</a>
<a href="#">Название</a>
<a href="#">Название</a>
<a href="#">Название</a>
</div>
</div>
Пример 2
Еще одно очень красивое горизонтальное меню для блоггер с красивым эффектом
<style type="text/css">
.darkblue-menu li{list-style:none;display:inline}
.darkblue-menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://4.bp.blogspot.com/-RmLvq4YTC84/WcazNohpm8I/AAAAAAAAFVk/Uo0Ydldvk_IC9_elRIX3jshWZOk4U93twCLcBGAs/s1600/gorizontalnoe-menyu-blogger.PNG") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}
.darkblue-menu li a:hover{background-position:right center!important}</style><ul class="darkblue-menu">
<li><a href="#"> Главная </a></li>
<li><a href="#"> Название </a></li>
<li><a href="#"> Название </a></li>
<li><a href="#"> Название </a></li>
<li><a href="#"> Название </a></li>
<li><a href="#"> Название </a></li>
</ul>
Пример 3
<style>
div.marsala{ background:#cc555durl(https://1.bp.blogspot.com/-bNJKD1MXsNU/Wcb2--f2WyI/AAAAAAAAFWU/dEOrsVGdWKMud8uCmba_CdcVQ_0nISt4gCKgBGAs/s1600/crm1.gif); border:1px solid #000; font-size:0; }
div.marsala a{ display: inline-block; padding: 0 40px; background-image: url(https://2.bp.blogspot.com/-2MMmBxal3Vk/Wcb2-5RpNhI/AAAAAAAAFWU/ZAboPuTTNVA1MFQBBIwNMu2QbGfZATScwCKgBGAs/s1600/crm.gif); color:#fff; text-decoration:none; font: bold 24px Arial; line-height: 32px; }
div.marsala a:hover, div.redmenu a.current{ background-position:0 -60px; }
div.marsala a.end{ width:2px; padding-left:0;padding-right:0; }
</style>
<div class="marsala">
<a href="#">Главная</a>
<a href="#">Название</a>
<a href="#">Название</a>
<a href="#">Название</a>
<a href="#">Название</a>
<a href="#">Название</a>
</div>
Будь вместе с Я Блоггер
