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


Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями в соцсетях:


38 коммент. :

  1. Максим Загуляев7 января 2012 г., 22:02

    Красивое.

    ОтветитьУдалить
  2. Красивое спору нет, но у меня оно выпадает как-то внутрь. лучше посмотреть http://hiteclive.blogspot.com ,это тестовый блог. Что я не так сделал? Заранее спасибо

    ОтветитьУдалить
  3. Я посмотрел.Действительно внутрь выпадает.А Вы другие меню пробовали ставить?

    ОтветитьУдалить
  4. Да пробовал. С вашего блога и с других, одно и тоже. Я вот думаю может дело в шаблоне.?

    ОтветитьУдалить
  5. Всё может быть.Я бы для таких красивых девушек подобрал более симпатичный шаблон.Сейчас их великое множество.Даже специально для фото.Могу ссылки дать.

    ОтветитьУдалить
  6. Буду признателен. мне нравится ваш блог и то как преподносите материал.Спасибо.

    ОтветитьУдалить
  7. Этот блог так себе.Переходите ко мне в другой:http://new-school-blogger.blogspot.com/ а ссылки на почту кину.

    ОтветитьУдалить
  8. Спасибо, Сергей за хорошие ссылки. Есть из чего выбрать, отличные сайты.

    ОтветитьУдалить
  9. Привет! Спасибо за меню, а как всё таки сделать, чтобы меню работало как у вас, а не внутрь выпадало? В чём же причина?

    ОтветитьУдалить
  10. Здравствуйте,у меня такая же проблема.Меню выпадает внутрь страницы.Кто-нибудь смог решить такую проблему?

    ОтветитьУдалить
    Ответы
    1. Что бы меню не выпадало внутрь, вставляйте HTML-код меню не в виде гаджета, а сразу в HTML-код блога. Где-нибудь внизу между закрывающим и открывающим тегами div

      Удалить
  11. Нет. только смена шаблона.

    ОтветитьУдалить
  12. привет я недавно завел блог и всех хитростей не знаю так что можете пожалуйста объяснить мне как менять решётки на URL адреса страниц

    ОтветитьУдалить
  13. все получилось,спасибо...подскажите пожалуйста как сделать это меню теперь под блог, получилась белая полоса а на ней горизонтальное меню..надеюсь понятно объяснил проблему..спасибо

    ОтветитьУдалить
  14. да...и чтобы горизонтальное меню было по центру

    ОтветитьУдалить
  15. Да,хорошее меню)все получилось,спасибо...

    ОтветитьУдалить
  16. Пожалуйста.Мне самому это меню нравится.

    ОтветитьУдалить
  17. Подменю Drop не выпадает.

    ОтветитьУдалить
  18. Можете дать ссылку на блог.

    ОтветитьУдалить
  19. Меню поподает на второй слой... Че делать помогите

    ОтветитьУдалить
  20. У многих такое происходит.Просто меню надо ставить в шапке блога.Или сократить количество подменю.

    ОтветитьУдалить
  21. помогите где находится код немогу найти зделайте скрин плисс

    ОтветитьУдалить
  22. Всё просто при помощи сочетаний клавиш Ctri+ F в верхнм углу браузера появляется окошко туда и вставляем искомый код.

    ОтветитьУдалить
  23. Так что можно сделать чтобы не проваливалось?

    http://lordringforever.blogspot.ru

    ОтветитьУдалить
    Ответы
    1. У меня тоже проваливалось и поставила виджет над полем "Сообщения".

      Удалить
  24. Что за фигня, оно копирует с номерами строк. Неудобно.

    ОтветитьУдалить
    Ответы
    1. Александр,Вы наверное первый раз копируете код с подсветкой, поэтому не в курсе.Подведите курсор к верхнему правому углу кода,появятся 3 значка. Нажмите на первый. Появится новое окошко с кодом.Удачи.

      Удалить
  25. Спасибо Вам большое за труды :) Понемножку обрастаю всякими полезностями, обнаруженными здесь...

    ОтветитьУдалить
    Ответы
    1. Пожалуйста Иван! :)) Вот мои блоги на эту же тему:http://helpblogger-ru.blogspot.ru/ http://www.dljablogger.ru/ а этот блог создал не давно на платформе WordPress http://shkolablogger.ru/ милости прошу в гости. $-)

      Удалить
  26. У меня не получается выпадающее меню. Подменю видно сразу http://tm-slubovyu.blogspot.ru/ Что я сделала не так???

    ОтветитьУдалить
  27. Здравствуйте!
    Не получается сохранить шаблон, выдает такую надпись:

    More than one widget was found with id: HTML4. Widget IDs should be unique.

    Что нужно сделать, подскажите, пожалуйста?

    ОтветитьУдалить
    Ответы
    1. Привет, Аня! Перейдите на мой блог сюда - http://shkolablogger.ru/gorizontalnoe-vyipadayushhee-menyu-dlya-bloga.html и выберите себе подходящее меню и ещё чего нибудь.

      Удалить
  28. Сергей, добрый день! подскажите пожалуйста, как сделать так, чтобы на закладках Menu4 и Menu5 тоже выпадали разделы, как в Menu2 и Menu3?

    ОтветитьУдалить
    Ответы
    1. Привет,Виктория! Добавьте код:
      <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>
      Чуть выше ссылка на другие меню, может вам подойдут они.

      Удалить
    2. Пропустил тег,вот такой код:
      <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>

      Удалить
  29. Этот комментарий был удален автором.

    ОтветитьУдалить
    Ответы
    1. Нормальный коммент, поэтому публикую Чтобы добавить смайлик - нажмите на смайлик, чтобы увидеть код! Насчёт меню, здесь - http://shkolablogger.ru/ у меня есть получше.Регистрацию или авторизазацию для партнеров сайта на платформе Blogger я не знаю как реализовать.

      Удалить
  30. Здравствуйте, Сергей. Подскажите, как сделать так, чтобы данное меню и на мобильных работало?

    ОтветитьУдалить