(Последнее обновление: 03.09.2017)

menu11Привет друзья! Меню для блога - один из основных функциональных элементов блога, состоящий из набора ссылок на различные страницы. Каждая такая ссылка называется пунктом меню. Посетитель использует меню как средство навигации по блогу.

Сегодня дорогие читатели моего блога, я покажу вам, как установить в блог красивое горизонтальное меню с эффектом анимации при наведении курсора мышки. Как обычно посмотреть и потрогать меню в действии, можно в демонстрационном блоге здесь.

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

Красивое горизонтальное меню с анимацией для Blogger

menu12

Меню с анимацией для Blogger

Для того, чтобы установить это меню зайдите в панель инструментов Blogger - Дизайн. Нажмите добавить гаджет Html/JavaScript:

menu

Нажмите добавить гаджет 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>Архив</exespan></a></li>
<li><a href="##########"><exespan>Контакт</exespan></a></li>
</ul></div>

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

Горизонтальное меню 3D для Blogger с эффектом вращения

Это меню особенно впечатляет, при наведение курсором мыши на пункт меню оно вращается, то есть переворачивается. Красота. Не забудьте проверить в демо блоге.

menu_1

3D Flip меню для блога

Для вставки в поле гаджета Html/JavaScript вот этот код:

<style type="text/css">
.block-menu {
display: block;
background: #000;
}
.block-menu li {
display: inline-block;
}
.block-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'Passion One',Arial,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.three-d {
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
-webkit-transition: all .07s linear;
-moz-transition: all .07s linear;
transition: all .07s linear;
position: relative;
}
.three-d:not(.active):hover {
cursor: pointer;
}
.three-d:not(.active):hover .three-d-box,
.three-d:not(.active):focus .three-d-box {
-moz-transform: translateZ(-25px) rotateX(90deg);
-webkit-transform: translateZ(-25px) rotateX(90deg);
-o-transform: translateZ(-25px) rotateX(90deg);
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
-webkit-transform: translatez(-25px);
-moz-transform: translatez(-25px);
-o-transform: translatez(-25px);
transform: translatez(-25px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.front {
-webkit-transform: rotatex(0deg) translatez(25px);
-moz-transform: rotatex(0deg) translatez(25px);
-o-transform: rotatex(0deg) translatez(25px);
transform: rotatex(0deg) translatez(25px);
}
.back {
-webkit-transform: rotatex(-90deg) translatez(25px);
-moz-transform: rotatex(-90deg) translatez(25px);
-o-transform: rotatex(-90deg) translatez(25px);
transform: rotatex(-90deg) translatez(25px);
color: #FFE7C4;
}
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
padding: 15px 10px;
color: white;
pointer-events: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<ul class="block-menu">
<li><a href="###" class="three-d">
Главная
<span class="three-d-box"><span class="front">Главная</span><span class="back">Главная</span></span>
</a></li>
<li><a href="###" class="three-d">
О блоге<span class="three-d-box"><span class="front">О блоге</span><span class="back">О блоге</span></span>
</a></li>
<li><a href="###" class="three-d">
Услуги
<span class="three-d-box"><span class="front">Услуги</span><span class="back">Услуги</span></span>
</a></li>
<li><a href="###" class="three-d">
Карта
<span class="three-d-box"><span class="front">Карта</span><span class="back">Карта</span></span>
</a></li>
<li><a href="###" class="three-d">
Архив
<span class="three-d-box"><span class="front">Архив</span><span class="back">Архив</span></span>
</a></li>
</ul>

Здесь тоже самое заменяйте пункты меню на свои и вставляйте вместо решеток ссылки на что угодно. И последнее меню будет выпадающим.

Как установить горизонтальное выпадающее меню в Blogger

Все Вы наверное знаете, что большое количество пунктов меню делать не рекомендуется, иначе это может привести к появлению горизонтальной полосы прокрутки или переформатированию текста меню. Вид меню в таком случае становится не красивым или неудобным для использования. Предлагаемое горизонтальное меню совместимо с большинством современных и классических браузеров, и может быть добавлено для любого шаблона всего за 3 шага.

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

menu_3

Сначала мы добавим стиль меню CSS в шаблон блога. Для этого перейдите Шаблон - Изменить HTML. Далее, найдите такой тег ]]></b:skin> и над ним вставьте код стиля:

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

Далее, будем добавлять script , для этого найдите код </head>  и чуть выше добавьте этот скрипт:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' />
<script >
//<![CDATA[
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
//]]>
</script>

Если у вас подключена библиотека jquery, то строчку скрипта jquery надо удалить.

Теперь, вы можете сохранить шаблон. Перейдём теперь к последнему шагу. Добавление меню в блог. Перейдите Дизайн нажмите добавить гаджет HTML/JavaScript. Вверху шаблона как показано на скриншоте выше. Название гаджета оставьте пустым, а в его поле вставьте следующий код:

<ul id="jsddm">
<li><a href="###">Главная</a>
<li><a href="###">Menu 1</a>
<ul>
<li><a href="###">Подменю 1-1</a></li>
<li><a href="###">Подменю 1-2</a></li>
<li><a href="###">Подменю 1-3</a></li>
</ul>
</li>
<li><a href="###">Menu 2</a>
<ul>
<li><a href="###">Подменю 2-1</a></li>
<li><a href="###">Подменю 2-2</a></li>
</ul>
</li>
<li><a href="###">Menu 3</a>
<ul>
<li><a href="###">Подменю 3-1</a></li>
<li><a href="###">Подменю 3-2</a></li>
<li><a href="###">Подменю 3-3</a></li>
<li><a href="###">Подменю 3-4</a></li>
</ul>
</li>
<li><a href="###">Menu 4</a></li>
<li><a href="###">Menu 5</a></li>
<li><a href="###">Школа Blogger(а)</a></li>
</li></ul>

Вот и всё. Настраивайте своё выпадающее меню по своему усмотрению. Удачи всем. Пока.

P.S. Решить проблему с последним меню (подменю западает за шаблон) можно добавив небольшой код в стили шаблона, то есть, чуть выше строчки ]]></b:skin> :

.tabs-outer, .tabs .widget ul {overflow: visible;}
.tabs .widget ul li {position: relative; z-index: 1000;}
.tabs .widget ul li a:nth-child(n+2) {position: absolute; bottom: -100%; left: 0; z-index: 2000; width: 20em; border-radius: 0; display:none;}
.tabs .widget ul li a:nth-child(3) {bottom: -200%;}
.tabs .widget ul li a:nth-child(4) {bottom: -300%;}
.tabs .widget ul li a:nth-child(5) {bottom: -400%;}
.tabs .widget ul li a:nth-child(6) {bottom: -500%;}
.tabs .widget ul li a:nth-child(7) {bottom: -600%;}
.tabs .widget ul li a:nth-child(8) {bottom: -700%;}
.tabs .widget ul li a:nth-child(9) {bottom: -800%;}
.tabs .widget ul li a:nth-child(10) {bottom: -900%;}
.tabs .widget ul li:hover a {display: inline-block; box-shadow: none; background: rgba(0,61,118,.95);}
.tabs .widget ul li:hover a:hover {color: rgba(66,170,255,1);}

Этот код от моего читателя, должно помочь.

С уважением, Сергей