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

Всем привет. Давненько я сюда не заглядывал. Всё занимаюсь другим блогом.Блог называется Школа 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;
}

Далее найдите такой код </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>

Теперь сохраните шаблон. Далее перейдём к самой установки горизонтального меню в блог. 

Для этого перейдите "Элементы страницы" нажмите добавить гаджет HTML/JavaScript. 

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

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>
 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>
 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 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>

Всё. Теперь давайте свои названия меню и меняйте решётки на URL адреса страниц. Желаю удачи. 

До новых встреч.