Превратности шаблонов или Почему не выпадает меню в Blogger?

Логотип Blogger и знак вопросаВ общем-то идея такого поста пришла сама собой, ибо делая различные выпадающие меню для Blogger-блогов, сталкиваешься с тем, что "выпадать" они порой не хотят. Приходится мудрить с их кодом, долго подгонять его в шаблоне и это все превращается в такую головную боль, что легче от таких менюшек отказываться.
  И вот я задался целью выяснить почему же не выпадает выпадающие меню в шаблоне Blogger? Конечно выяснил, и как всегда - "ларчик просто открывался", но обо всем по-порядку.
  HTML код самого обычного выпадающего меню, в основном, делается с помощью простого списка, который состоит из тегов <ul> и <li> , и выглядит примерно следующим образом:
<div class='menu-container'>

 <ul class='all-menu'>

   <li class='menu'><a href="#">Menu 1</a>
     <ul class='drop-menu'>
       <li><a href="#">Ссылка</a></li>
       <li><a href="#">Ссылка</a></li>
       <li><a href="#">Ссылка</a></li>
       <li><a href="#">Ссылка</a></li>
     </ul>
   </li>

   <li class='menu'><a href="#">Menu 2</a>
     <ul class='drop-menu'>
       <li><a href="#">Ссылка</a></li>
       <li><a href="#">Ссылка</a></li>
       <li><a href="#">Ссылка</a></li>
       <li><a href="#">Ссылка</a></li>
     </ul>
   </li>

 <!--И так далее.... -->

  </ul>
 </div>
 Они бывают горизонтальные и вертикальные, а красивый внешний вид и эффекты придаются при помощи свойств CSS. Но сейчас не об этом. Нас интересуют горизонтальные выпадающие меню, так как проблемы в основном с ними.
 Допустим, мы уже сделали или скачали меню, в общем оно у нас есть, и теперь остается только установить его на блог, но тут начинается самое интересное. Для вставки HTML кода в шаблон мы, как обычно, воспользуемся гаджетом HTML/JavaScript - это просто и удобно; добавим CSS в шаблон - смотрим... а желаемого результата нет - меню выпадает, но не там где надо, где-то за блоком сообщения:
Выпадающие меню не выпадает в Blogger

  И тут мы начинаем мудрить с CSS - менять z-index, придавая значения от "2" до "9999", изменять позиционирование, увеличивать высоту блока - но всё бестолку. Затем идем в Google - находим много советов, начиная со всего того что мы уже попробовали, продолжая применением JavaScript и внедрением jQuery (тоже вариант, но не сегодня) и заканчивая советом снести часть кода стандартного шаблона, а вместе с ним и кое-что из уже имеющегося в шаблоне CSS. Однако все это не приводит к желаемому результату, (кроме скриптов конечно, но это долго, и поэтому не сегодня), и мы "забиваем" на свое жгучие желание добавить выпадающую менюшку и довольствуемся тем что есть.
  Но для того чтобы все работало, и чтобы выпадающие меню выпадало, нужно изменить всего одно слово - селектор блока - в коде шаблона.
 Для начала, найдем гаджет с меню в коде шаблона. Для этого, кликаем правой кнопкой мыши по элементу, в контекстном меню выбираем "Просмотреть код элемента" или что-то типа этого (в разных браузерах - по-разному), и узнаем идентификатор гаджета как показано ниже.
Использование средств разработчика в браузере
  После чего идем в "Шаблон" -> "Изменить HTML" и находим его в коде.
Редактирование шаблона Blogger
 Но нас интересует только вот эта строчка - секция где расположен виджет с меню:
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'>
 И чтобы все заработало, нам нужно изменить значение атрибута class - селектор - tabs, на любое другое. Например: menu, при желании можно поменять и id:
<b:section class='menu' id='menu_1' showaddelement='no'>
Значение(название) идентификатора не должно повторятся в коде шаблона. Один элемент - уникальный идентификатор.
 И вот - все что надо, из меню "выпадает" :)
Работающие выпадающие CSS меню
 В стандартных шаблонах "Корпорация Чудеса", как показывает практика, даже после вышеизложенной манипуляции, с меню все равно возникают трудности, но они тоже решаемы.
 Если меню по прежнему не видно, снова открываем код шаблона и находим такой селектор .tabs-outer, по пути их будет несколько, но нам нужен тот, который непосредственно в CSS, убираем у него - overflow: hidden;
 Иногда бывает что стандартные стили в шаблоне для тегов <ul> и <li> противоречат новым, добавленным стилям, чтобы этого не происходило нужно ко всем элементам списка добавлять свои, отличные от стандартных идентификаторы ( class или id ) и для них приписывать собственные стили.

 Надеюсь что информация была полезна. С удовольствием прочту ваше мнение в комментариях. Удачи и сапибо за внимание.

34 комментария:

  1. Спасибо, давно хотел сделать но не знал как. Буду пробовать.

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, рад что пригодилось.

      Удалить
    2. Очень полезная статья буду пробовать, В Вашем блоге нет нет ды и вылезает какая нить полезная плюшка,которую несыщеш не зря я вас в закладках держу не зря) Спасиб за разные полезности)

      Удалить
  2. Странно я у меня не обнруживает HTML4 в чём проблема подскажите?!

    ОтветитьУдалить
    Ответы
    1. HTML4 - Это идентификатор добавленного гаджета, читайте статью внимательно, там где - "Для начала, найдем гаджет с меню в коде шаблона....."
      У вас в коде он может быть другим, например: HTML5 или HTML2, смотря сколько гаджетов HTML/JavaScript вы уже добавили в блоге.
      В примере просто получилось что добавленный гаджет с меню имеет идентификатор HTML4, вот и все.

      Удалить
  3. А у меня не получилось. Выпадающее меню теряется. Приходится располагать гаджет над сообщениями. Так все работает, а если под заголовком, то нет. Почему так?

    ОтветитьУдалить
    Ответы
    1. Оно у вас сразу не получается или уже после того как вы класс секции поменяли? Вы его "перетяните" сначала вверх, под шапку, а потом уже смотрите в какой секции меню располагается и там меняйте class и id. Опытным путем доказано - работает. + смотрите z-index в стилях у блоков меню.

      Удалить
  4. У меня работает в Хроме, Опере, Мазиле, а в IE8 нет(( Скрывается зараза. Что делать?

    ОтветитьУдалить
    Ответы
    1. В EI8-ом все в порядке просто поменяйте вот в этой строчке 7 на 9 - <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
      Эта строка указывает что стандартный режим IE7, поэтому нужно поменять на 9

      Удалить
  5. Супер! Огромное спасибо :-)

    ОтветитьУдалить
  6. Помогите я вообще всю голову сломала ((( все пишут вставить но как конкретно в java и в шаблон никто не пишет((( и получается белиберда ((( и еще у меня почему то горизонтальное меню вставляется в строчку так и не разобралась почему.... вы можете мне помочь?

    ОтветитьУдалить
    Ответы
    1. Помочь могу, но я не пойму, что вам конкретно не понятно? Как добавить гаджет HTML/JavaScript? - Кликаете на "Добавить гаджет" в админке и выбираете его из списка, вставляете в него нужный код. В него можно можно поместить абсолютно любой код - HTML, CSS, JavaScript.
      CSS код размещается между тегов <style> ... </style>
      JavaScript код - между <script> ... </script>
      Если возникает проблема описанная в статье, решается действиями описанными в статье, там все наглядно показано. Насчет меню, это вопрос к разработчику, тому кто его делал.

      Удалить
    2. Здрасти))) спасибо что ответили но я уже разобралась.... только появилась другая проблемка))

      1) Как уменьшить длину фона выезжающих меню... чтобы они соответствовали ширине своего главного меню (родителя)
      2) Как увеличить отступ от родителя для выезжающих меню
      3) Может вы знаете можно ли мой шаблон сделать резиновый а не фиксированный...

      вот картинка http://s020.radikal.ru/i703/1303/22/2a420c9a2813.jpg
      адрес сайта: http://bannersbroker-b.blogspot.com/#

      Буду Вам очень благодарна. Заранее спасибо

      Удалить
    3. С меню, учите CSS, там все просто
      #jsddm li ul {
      margin: 20px 0; /*указать*/
      padding: 0;
      position: absolute;
      visibility: hidden;
      border-top: 0px solid white;
      width: auto; /*добавить*/
      }
      Про шаблон вот статья:
      http://www.magentawave.com/2012/10/full-width-blogger-template.html

      Удалить
    4. ну как бы я не совсем чайник в этом деле но и не спец))) спасибо за совет попробую.... я уменьшала уже длину выпадающих меню.... но они почему то смещаются немного вправа...а мне хочется чтобы ровно под родительским меню был

      Удалить
  7. MagentaWAVE ВЫ ГЕНИЙ))) Спасибо. Мыло где в сети можно дождаться такой помощи да еще и так быстро))) Очень Вам благодарна.

    ОтветитьУдалить
    Ответы
    1. Спасибо, но это слишком громкие слова :) На самом деле тут, в CSS, нет ничего сложного думаю по мере того как вы будете набираться опыта, тоже в этом убедитесь.

      Удалить
  8. Еще один масюсенький вопрос и я Вам больше не побеспокою :) итак уже много помогли. Когда на сайт заходили наверное видели справа меню корявое со страницами. Оно первоначально в шаблоне шло в под шапкой горизонтальное... я думаю поэтому оно кривое такое... не могу найти как его сделать по вертикали ((( Буду благодарна бескрайне

    ОтветитьУдалить
    Ответы
    1. Это обычный гаджет "Страницы", про него тут писал http://www.magentawave.com/2012/02/chenge-pagelist-on-blogger.html

      Удалить
  9. Анонимный16.03.13, 9:39

    И снова привет), если не тяжело, объясни:
    1) Как сделать чтобы первая кнопка от второй не отходила при наведении, очень не нравится.

    2) Как оптимизировать меню под IE

    Блог: http://testdetsle.blogspot.ru

    ОтветитьУдалить
    Ответы
    1. Я же уже писал тебе - меню так сделано, чтобы это убрать его функционал надо практически переписать. По-этому лучше задать этот вопрос к написавшему это меню. Что касается IE, так что там оптимизировать? CSS3 свойства анимаций только с 9 версии идут, а некоторые записи и 10-ой не будут приниматься. В 7-ой, без скрипта оно по-любому выпадать будут за постами, но думаю это не актуально.

      Удалить
    2. Анонимный21.03.13, 16:55

      Пропали эти прыганья, видимо, что-то поправили)))
      Только теперь самая последняя помощь требуется, как сделать расстояние между первой и второй строчкой выпадающего меню, таким же, как между остальными?
      Скрин: http://www.picshare.ru/uploads/130321/Aj5ve8Sffv.jpg

      Удалить
    3. Анонимный21.03.13, 16:56

      Такой баг во всех разделах существует.

      Удалить
  10. Анонимный21.03.13, 16:58

    И ещё вопрос, как оптимизировать, чтобы плавное выпадание и прочие фишки во всех браузерах были?
    А то щас посмотрел, в Мозилле не плавно, в гугле плавно и т.д.
    IE я в счёт не беру))

    ОтветитьУдалить
    Ответы
    1. Мне почему-то кажется, что все эти и остальные вопросы относительно самого меню следовало бы, и следует, задать на сайте его разработчика, тебе так не кажется?
      Что касается остального тут банально надо учить и понимать свойства CSS, но навскидку попробуй сделать так:
      #nav ul li {
      ***
      padding: 0; /*добавь это*/
      }
      #nav li:hover ul a {
      ***
      -moz-transition: -moz-transform 0.075s linear; /*добавь это*/
      -o-transition: -o-transform 0.075s linear; /*добавь это*/
      }
      Насчет последнего не уверен, по-моему такую запись только вэбкит и хавает, но попробуй.

      Удалить
    2. Анонимный21.03.13, 21:04

      Просто автор меню не помогает нифига.
      =====================================
      Первое помогло)) спасибо)
      Второе про временное появление, нет...

      Удалить
    3. Немного не то тебе дал, протупил чет...
      Вот сюда добавь:
      #nav ul {
      ***
      -moz-transition: 0.25s linear opacity;
      -o-transition: 0.25s linear opacity;
      transition: 0.25s linear opacity;
      }

      Руки бы тому автору отбивать...

      Удалить
    4. Кстати и предыдущие тоже рекомендую оставить, только добавить еще стандартное свойство:
      transition: transform 0.075s linear;

      Удалить
  11. Очень интересный блог и много полезной информации

    ОтветитьУдалить
    Ответы
    1. Спасибо за ваш отзыв, очень приятно )

      Удалить
  12. Спасибо вам огромное что я только не делала и так и так и скрипты и библиотеки подключала и блог первый пришлось удалить, а тут нашла вашу статью и вот щастьё моё пришло!!!! Еще раз спасибо очень помогли, столько ненужной мукулатуры прочитала!!!!

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

Следующее Предыдущее

BestProject