Горизонтальное выпадающее меню на ваш видео блог для Blogger

                      Здравствуйте друзья!
 Сегодня я вам расскажу и покажу (смотрите видео урок) на примере моего учебного видео блога  http://ludmiladanilo3.blogspot.de/   ,как поставить горизонтальное выпадающее меню на ваш видео блог,очень удобный элемент для Blogger ,служит как навигация по блогу ,состоит из набора ваших ссылок на ваши различные рубрики,страницы,сайты и т.д.





 Как всегда ,первым делом ,добавим стиль,зайдем в шаблон -изменить 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' type='text/javascript'/>
<script type='text/javascript'>
//<![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>
________________________________________________________________________________
   А теперь друзья, найдем строку   <ul id='navigation'>   и вместо слова navigation   вставим jsddm
вставим следующий код ,копируйте код к себе в текстовый документ (блокнот) настраивайте его под себя и заменяйте свой предыдущий.
Здесь вместо слов ССылка (выделенно голубым цветом) вставляете свои ссылки на ваши страницы,рубрики и т.д.  ,а вместо слов желтым цветом их названия.

_________________________________________________________________________________________________________________________________________________________________

<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="http://videoblogludmiladanilo.blogspot.de/search/label/%D0%92%D1%81%D0%B5%20%D0%BE%20%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE%20%D0%B1%D0%BB%D0%BE%D0%B3%D0%B5%3A%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE%D1%83%D1%80%D0%BE%D0%BA%D0%B8?=9.html">Школа Видео Blogger(а)</a></li>
</li></ul>

__________________________________________________________________________________________________________________________________________________________________

И последний шаг ,увеличем и заменим цвет в поле навигации (меню) или вообще удалим.
находим строку  #navigation-wrapper {   и изменяем цвет ,а также размер  height:58px; line-height:59px;  подберите свой -если кто подзабыл ,посмотрите урок13,

 Нравится информация!? Поделитесь в соц.сети!
                        Желаю всем творческих успехов!