Новое в блоге
Loading...
29 дек. 2011 г.

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

Добрый вечер! Итак, сегодня мы узнаем, как добавить горизонтальное выпадающее меню для блоггера . Все Вы наверное знаете, что большое количество пунктов меню делать не рекомендуется, иначе это может привести к появлению горизонтальной полосы прокрутки или переформатированию текста меню. Вид меню в таком случае становится не красивым или неудобным для использования. Предлагаемое горизонтальное меню совместимо с большинством современных и классических браузеров, и может быть добавлено для любого шаблона всего за 3 шага.
Небольшой совет: создайте  блог с таким же шаблоном как у Вас, специально для тренировок.
                         Скриншот горизонтального меню:
Горизонтальное выпадающее меню
А здесь Вы можете пощупать, потрогать меню. Демо.

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

Сначала мы добавим стиль меню 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' 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 адрес страниц. Вот вроде и всё. До новых встреч.

Источник: allblogtools.com

Вам может нужно: Cоздаем эффектно оформленную блочную цитату - Стили CSS или вертикальное мeню с прокруткой для Blogger

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

35 коммент. :

  1. Класс! Все получилось. Но есть вопрос. Ссылки 1-1 в подменю, они должны при наведении на кнопку открываться?

    ОтветитьУдалить
  2. Всё замечательно, но все раскрывающиеся меню прячутся под сообщение. Очень долго колдовал. Разбирал скрипт с демонстрационного сайта, ничего не помогает. Может это у меня особенность шаблона? Но я проверял на разных шаблонах: не зависимо от картинки или от заливки, как только меню выходит по вертикали за размер гаджета - пункты меню прячутся под другими элементами блога.
    Как получить такой вариант, как на вашем демонстрационном сайте?

    ОтветитьУдалить
  3. Здорово, спасибо! Подскажите, а как просто выровнять верхние страницы-вкладки по центру?

    ОтветитьУдалить
  4. Пожалуйста!Впереди последнего кода поставить вот это:

    ОтветитьУдалить
  5. Спасибо. Но я имел ввиду, если просто сделать страницы как верхние вкладки(табы),они прилипают слева, куда нужно вставить этот код? Я пробовал сюда, не получается(


    /* Tabs----------------------------------------------- */.tabs-inner .section { margin: 0 24px;
    }
    .tabs-inner .PageList, .tabs-inner .LinkList, .tabs-inner .Labels { margin-left: -11px; margin-right: -11px;

    ОтветитьУдалить
  6. Может быть я не так выразился как то. Зайдите на мой блог,если не трудно(не сочтите рекламой) brosaem.blogspot.de. Увидите проблему, названия страниц( о блоге, обратная связь) слева, а нужно посередине.

    ОтветитьУдалить
  7. Отправил вам через обратную связь

    ОтветитьУдалить
  8. Автору большое спасибо и респект! Наконец нашла "рецепт" полноценного рабочего раскрывающегося меню для Блоггера.

    ОтветитьУдалить
  9. Подскажите, пожалуйста, как сделать, чтобы меню не раскрывалось вовнутрь. Заранее благодарна.
    Можно в личку trofsh@gmail.com

    ОтветитьУдалить
    Ответы
    1. Надо выше меню ставить.Или сделать большой отступ от сообщения в самом шаблоне.

      Удалить
    2. Сергей, а может Вы подскажете, как это сделать, т.к. я в этом чайник. Заранее благодарна.

      Удалить
    3. Ирина, всё в комментариях объяснить не смогу.

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

    ОтветитьУдалить
    Ответы
    1. Попробуйте другое меню - http://shkolablogger.ru/novoe-menyu-navigatsii-ajax-v-stile-mashable.html

      Удалить
    2. Вот Павел нашел решение,воспользуйтесь.

      Удалить
  11. Здравствуйте. Сергей, спасибо за интересные блоги. Все доступно и понятно расписано.
    Решил проблему с выпадающим меню!!
    Зайдите в Шаблон -> Настроить -> Дополнительно -> Добавить CSS и вставьте этот текст:
    .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);}

    У меня всё получилось) и теперь наслаждаюсь красивым меню) :)
    Удачи всем. И не сочтите за наглость: заходите на мой блог http://silent-soft.blogspot.com либо подписывайтесь на Твиттер @paulopy2012

    ОтветитьУдалить
    Ответы
    1. Привет,Павел!Отлично,спасибо вам.Думаю многие воспользуются этим советом. (h)

      Удалить
  12. Здравствуйте! Посмотрите, пожалуйста пункт меню Результаты педагогической деятельности в моем блоге http://tyutrinateacher.blogspot.ru/-подпункты прячутся под другими пунктами Меню.Как их вытащить?

    ОтветитьУдалить
    Ответы
    1. Привет,Юля!Вам надо уменьшить названия в меню,слишком длинные.Или воспользуйтесь другим меню - http://shkolablogger.ru/novoe-menyu-navigatsii-ajax-v-stile-mashable.html там у меня можно найти и другое меню.

      Удалить
  13. И как выровнять все меню по левому краю?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Юлия. Шаблон -> Изменить HTML. Находите следующий текст:
      #jsddm {
      margin: 0;
      padding: 15px;
      z-index:1000000000;
      position:relative;
      }

      и заменяете на
      #jsddm {
      margin: 0;
      padding: 15px;
      z-index:1000000000;
      position:relative;
      left: 0 px;
      }


      Выравнивание по правому краю:
      #jsddm {
      margin: 0;
      padding: 15px;
      z-index:1000000000;
      position:relative;
      right: 0 px;
      }

      Удалить
  14. Доброго времени суток!У меня вопрос как сделать так что бы ссылки с вертикального меню налаживались на страницу,а не прятались под рамку у меня выходит так http://killeted.blogspot.com/ ,я хочу что бы отступ между текстом и сообщениями был меньше!

    ОтветитьУдалить
    Ответы
    1. В комментарии Павла написано.

      Удалить
    2. Спасибо помогли.И еще вопрос где можно просмотреть код на социальную кнопку которая расположена у Вас на блоггере (в левом нижнем углу).

      Удалить
    3. Макс в левом углу у меня нет кнопок.

      Удалить
    4. http://zsvvidzhet.blogspot.com/ на этом блоге кнопка в левом нижнем углу.

      Удалить
  15. Как сделать такое же меню как на этом сайте(вверху)?

    ОтветитьУдалить
  16. Спасибо за такую подробную "Обучалку". У меня все получилось!!!

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

 
Footer