Горизонтальное меню для Blogger | Красивые примеры

 

В прошлой статье « Как создать меню страниц в блоге на Blogger (Blogspot)» я подробно рассказала как создать простое горизонтальное меню.

 

Сегодня я расскажу и наглядно вам покажу как можно изменить дизайн меню страниц. Вашему вниманию предлагаю несколько вариантов горизонтального меню.

 

Горизонтальное анимированное меню для blogger (blogspot)| Примеры

 

Чем удобны в установке такие меню? Что бы добавить меню в блог не нужно ничего менять в шаблоне, все предложенные варианты добавляются как обычный гаджет.

 

Административная панель > Дизайн > Добавить гаджет > HTML/JavaScript. Коды меню состоят из стилей Css и Html.

 

Пример 1

 

Горизонтальное анимированное меню для blogger пример 1
Пример 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

Горизонтальное анимированное меню для blogger пример 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>

 

 

 

Будь вместе с Я блоггер

 

Будь в тренде!

Получай материалы прямиком в свою почту

Я даю согласие на сбор и обработку своих персональных и не персональных данных согласно действующей на сайте — политике конфиденциальности.
* Нажимая на кнопку "Отправить", "Подпишись" или "Комментировать" Вы соглашаетесь с пользовательским соглашением.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика