И вот я задался целью выяснить почему же не выпадает выпадающие меню в шаблоне 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. Но сейчас не об этом. Нас интересуют горизонтальные выпадающие меню, так как проблемы в основном с ними.<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>
Допустим, мы уже сделали или скачали меню, в общем оно у нас есть, и теперь остается только установить его на блог, но тут начинается самое интересное. Для вставки HTML кода в шаблон мы, как обычно, воспользуемся гаджетом HTML/JavaScript - это просто и удобно; добавим CSS в шаблон - смотрим... а желаемого результата нет - меню выпадает, но не там где надо, где-то за блоком сообщения:
Но для того чтобы все работало, и чтобы выпадающие меню выпадало, нужно изменить всего одно слово - селектор блока - в коде шаблона.
Для начала, найдем гаджет с меню в коде шаблона. Для этого, кликаем правой кнопкой мыши по элементу, в контекстном меню выбираем "Просмотреть код элемента" или что-то типа этого (в разных браузерах - по-разному), и узнаем идентификатор гаджета как показано ниже.
После чего идем в "Шаблон" -> "Изменить HTML" и находим его в коде.
Но нас интересует только вот эта строчка - секция где расположен виджет с меню:
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'>
И чтобы все заработало, нам нужно изменить значение атрибута class - селектор - tabs, на любое другое. Например: menu, при желании можно поменять и id:<b:section class='menu' id='menu_1' showaddelement='no'>
Значение(название) идентификатора не должно повторятся в коде шаблона. Один элемент - уникальный идентификатор.
И вот - все что надо, из меню "выпадает" :) В стандартных шаблонах "Корпорация Чудеса", как показывает практика, даже после вышеизложенной манипуляции, с меню все равно возникают трудности, но они тоже решаемы.
Если меню по прежнему не видно, снова открываем код шаблона и находим такой селектор .tabs-outer, по пути их будет несколько, но нам нужен тот, который непосредственно в CSS, убираем у него - overflow: hidden;
Если меню по прежнему не видно, снова открываем код шаблона и находим такой селектор .tabs-outer, по пути их будет несколько, но нам нужен тот, который непосредственно в CSS, убираем у него - overflow: hidden;
Иногда бывает что стандартные стили в шаблоне для тегов <ul> и <li> противоречат новым, добавленным стилям, чтобы этого не происходило нужно ко всем элементам списка добавлять свои, отличные от стандартных идентификаторы ( class или id ) и для них приписывать собственные стили.
Надеюсь что информация была полезна. С удовольствием прочту ваше мнение в комментариях. Удачи и сапибо за внимание.
Спасибо, давно хотел сделать но не знал как. Буду пробовать.
ОтветитьУдалитьПожалуйста, рад что пригодилось.
УдалитьОчень полезная статья буду пробовать, В Вашем блоге нет нет ды и вылезает какая нить полезная плюшка,которую несыщеш не зря я вас в закладках держу не зря) Спасиб за разные полезности)
УдалитьСтранно я у меня не обнруживает HTML4 в чём проблема подскажите?!
ОтветитьУдалитьHTML4 - Это идентификатор добавленного гаджета, читайте статью внимательно, там где - "Для начала, найдем гаджет с меню в коде шаблона....."
УдалитьУ вас в коде он может быть другим, например: HTML5 или HTML2, смотря сколько гаджетов HTML/JavaScript вы уже добавили в блоге.
В примере просто получилось что добавленный гаджет с меню имеет идентификатор HTML4, вот и все.
А у меня не получилось. Выпадающее меню теряется. Приходится располагать гаджет над сообщениями. Так все работает, а если под заголовком, то нет. Почему так?
ОтветитьУдалитьОно у вас сразу не получается или уже после того как вы класс секции поменяли? Вы его "перетяните" сначала вверх, под шапку, а потом уже смотрите в какой секции меню располагается и там меняйте class и id. Опытным путем доказано - работает. + смотрите z-index в стилях у блоков меню.
УдалитьУ меня работает в Хроме, Опере, Мазиле, а в IE8 нет(( Скрывается зараза. Что делать?
ОтветитьУдалитьВ EI8-ом все в порядке просто поменяйте вот в этой строчке 7 на 9 - <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
УдалитьЭта строка указывает что стандартный режим IE7, поэтому нужно поменять на 9
Супер! Огромное спасибо :-)
ОтветитьУдалитьПомогите я вообще всю голову сломала ((( все пишут вставить но как конкретно в java и в шаблон никто не пишет((( и получается белиберда ((( и еще у меня почему то горизонтальное меню вставляется в строчку так и не разобралась почему.... вы можете мне помочь?
ОтветитьУдалитьПомочь могу, но я не пойму, что вам конкретно не понятно? Как добавить гаджет HTML/JavaScript? - Кликаете на "Добавить гаджет" в админке и выбираете его из списка, вставляете в него нужный код. В него можно можно поместить абсолютно любой код - HTML, CSS, JavaScript.
УдалитьCSS код размещается между тегов <style> ... </style>
JavaScript код - между <script> ... </script>
Если возникает проблема описанная в статье, решается действиями описанными в статье, там все наглядно показано. Насчет меню, это вопрос к разработчику, тому кто его делал.
Здрасти))) спасибо что ответили но я уже разобралась.... только появилась другая проблемка))
Удалить1) Как уменьшить длину фона выезжающих меню... чтобы они соответствовали ширине своего главного меню (родителя)
2) Как увеличить отступ от родителя для выезжающих меню
3) Может вы знаете можно ли мой шаблон сделать резиновый а не фиксированный...
вот картинка http://s020.radikal.ru/i703/1303/22/2a420c9a2813.jpg
адрес сайта: http://bannersbroker-b.blogspot.com/#
Буду Вам очень благодарна. Заранее спасибо
С меню, учите 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
ну как бы я не совсем чайник в этом деле но и не спец))) спасибо за совет попробую.... я уменьшала уже длину выпадающих меню.... но они почему то смещаются немного вправа...а мне хочется чтобы ровно под родительским меню был
УдалитьMagentaWAVE ВЫ ГЕНИЙ))) Спасибо. Мыло где в сети можно дождаться такой помощи да еще и так быстро))) Очень Вам благодарна.
ОтветитьУдалитьСпасибо, но это слишком громкие слова :) На самом деле тут, в CSS, нет ничего сложного думаю по мере того как вы будете набираться опыта, тоже в этом убедитесь.
УдалитьЕще один масюсенький вопрос и я Вам больше не побеспокою :) итак уже много помогли. Когда на сайт заходили наверное видели справа меню корявое со страницами. Оно первоначально в шаблоне шло в под шапкой горизонтальное... я думаю поэтому оно кривое такое... не могу найти как его сделать по вертикали ((( Буду благодарна бескрайне
ОтветитьУдалитьЭто обычный гаджет "Страницы", про него тут писал http://www.magentawave.com/2012/02/chenge-pagelist-on-blogger.html
УдалитьСпасибо... :)
УдалитьИ снова привет), если не тяжело, объясни:
ОтветитьУдалить1) Как сделать чтобы первая кнопка от второй не отходила при наведении, очень не нравится.
2) Как оптимизировать меню под IE
Блог: http://testdetsle.blogspot.ru
Я же уже писал тебе - меню так сделано, чтобы это убрать его функционал надо практически переписать. По-этому лучше задать этот вопрос к написавшему это меню. Что касается IE, так что там оптимизировать? CSS3 свойства анимаций только с 9 версии идут, а некоторые записи и 10-ой не будут приниматься. В 7-ой, без скрипта оно по-любому выпадать будут за постами, но думаю это не актуально.
УдалитьПропали эти прыганья, видимо, что-то поправили)))
УдалитьТолько теперь самая последняя помощь требуется, как сделать расстояние между первой и второй строчкой выпадающего меню, таким же, как между остальными?
Скрин: http://www.picshare.ru/uploads/130321/Aj5ve8Sffv.jpg
Такой баг во всех разделах существует.
УдалитьИ ещё вопрос, как оптимизировать, чтобы плавное выпадание и прочие фишки во всех браузерах были?
ОтветитьУдалитьА то щас посмотрел, в Мозилле не плавно, в гугле плавно и т.д.
IE я в счёт не беру))
Мне почему-то кажется, что все эти и остальные вопросы относительно самого меню следовало бы, и следует, задать на сайте его разработчика, тебе так не кажется?
УдалитьЧто касается остального тут банально надо учить и понимать свойства 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; /*добавь это*/
}
Насчет последнего не уверен, по-моему такую запись только вэбкит и хавает, но попробуй.
Просто автор меню не помогает нифига.
Удалить=====================================
Первое помогло)) спасибо)
Второе про временное появление, нет...
Немного не то тебе дал, протупил чет...
УдалитьВот сюда добавь:
#nav ul {
***
-moz-transition: 0.25s linear opacity;
-o-transition: 0.25s linear opacity;
transition: 0.25s linear opacity;
}
Руки бы тому автору отбивать...
Кстати и предыдущие тоже рекомендую оставить, только добавить еще стандартное свойство:
Удалитьtransition: transform 0.075s linear;
спасибо
ОтветитьУдалитьПожалуйста :)
УдалитьОчень интересный блог и много полезной информации
ОтветитьУдалитьСпасибо за ваш отзыв, очень приятно )
УдалитьСпасибо вам огромное что я только не делала и так и так и скрипты и библиотеки подключала и блог первый пришлось удалить, а тут нашла вашу статью и вот щастьё моё пришло!!!! Еще раз спасибо очень помогли, столько ненужной мукулатуры прочитала!!!!
ОтветитьУдалить