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

06.02.13 NMitra

Многоуровневое выпадающее меню CSS

Скажите, а что если нужны "сложные" страницы? К примеру, как в сайте:
фирма - инфо, акции;
производство - такое и сякое,
контакты - твои, мои, ничьи.
То есть под страницы, как такое сделать?

Стили для меню

Стили лучше подогнать индивидуально для вашего шаблона, в частности, фон, цвет текста при наведении и длину выпадающих пунктов. Итак, в "Дизайнере шаблонов" вносим разработанный нами CSS

.tabs-outer, .tabs .widget ul {overflow: visible;}
.tabs .widget ul::after {content: ""; display: block; clear: both;}
.tabs .widget ul li {position: relative;}
.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);}

Для IE убираем этот мета-тег.

Гаджет "Список"

Добавляем гаджет "Список" в пунктирное поле между заголовком и сообщением. Добавить гаджет в блог

Вспомним код ссылки. Для обычного пункта меню в поле "Добавить элемент списка" вписываем

<a href="адрес_куда_ведёт_Пункт"> текст_Пункта </a>

Для выпадающего пункта меню в поле "Добавить элемент списка" вписываем

<a href="адрес_куда_ведёт_Пункт"> текст_Пункта </a>
<a href="адрес_куда_ведёт_Подпункт1"> текст_Подпункта1 </a>
<a href="адрес_куда_ведёт_Подпункт2"> текст_Подпункта2 </a>
<a href="адрес_куда_ведёт_ПодпунктN"> текст_ПодпунктаN </a>

То есть на практике выглядеть это будет так:

<a href="http://shpargalkablog.ru/2010/07/razrabotka-bloga-v-blogger.html">Гаджеты </a> <a href="http://shpargalkablog.ru/2011/03/populyarnye-soobshcheniya-blogger.html">Популярные сообщения</a> <a href="http://shpargalkablog.ru/2011/04/gadzhet-spisok-ssylok-blogger.html">Список ссылок</a> <a href="http://shpargalkablog.ru/2011/10/gorizontalnoye-vypadayushcheye-menyu.html">Список</a><a href="http://shpargalkablog.ru/2011/08/stranicy-blogger.html">Страницы</a>

И это только для одной строки. Для другой будет похожее перечисление, но уже с другими ссылками.

вид гаджета "список" при установлении настроек (для Blogger)

Вот что получится

в f t

наверх ↑

135 комментариев:

Алия: Скажите пожалуйста,а как расположить сообщения в два столбца?
NMitra: Посмотрите тут - http://shpargalkablog.ru/2011/04/raspolozhit-soobshcheniya-bloga-v-dva.html
Marina Varzhainova: Прошу прощение за глупый вопрос, но как увеличить высоту именно самой горизонтальной панели на которой расположены все эти "Пункты". Нашла как увеличить/уменьшить подпункты...
NMitra: .tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

Вместо
padding: .6em 1.5em;
код
padding: .2em 1.5em;
Marina Varzhainova: Спасибо большое за ответ, но к сожалению не получилось, я пробую на тестовом блоге с шаблоном основного и после применения изменений которые вы написали ничего не произошло.
Вот что я хочу поменять, хочу увеличить высоту полосы на которой располагаются основные пункты https://lh4.googleusercontent.com/-Ip-KH4gQ6NM/TsWL6Bm-RvI/AAAAAAAAEYw/XnoHHGcDUOA/s317/Image%2525203.jpg
NMitra: Вместо .2em в
padding: .2em 1.5em;
поставьте своё значение, можно в px. Например,
padding: 8px 1.5em;
Marina Varzhainova: Мне уже стыдно спрашивать :(
Делаю все как вы сказали, меняю что вы написали, но не получается, все остается на месте :( testshoponotes.blogspot.com
NMitra: Хм, странно, вижу. Сможете дать мне права администратора на тестовый блог?
Marina Varzhainova: Ой, спасибо большое.
Отправила вам запрос на вашу почту (яндекс)
NMitra: Подтвердила, теперь на права администратора.
Marina Varzhainova: подтвердила :)
NMitra: Не поняла, почему так:

.tabs-inner .widget{
padding: 10px 1.5em;
}
Marina Varzhainova: Всмысле значения? Я эксперементировала, вносила и пиксели, и те значения которые вы сказали и изменяла их и комбинировала, но все равно результат был тот же.
NMitra: Ан, нет, поняла. В гаджете HTML/JavaScript, который вы добавили вместо Списка, нет li.

Посмотрите тестовый блог.
Marina Varzhainova: Вроде поняла. А как вы так сделали что в гаджете остался span, но высота изменилась? Именно в гаджете надо добавить li или в коде вносить доп. изменения?
NMitra: Я добавила только код из комментария 12.
Marina Varzhainova: Спасибо большое, нет просто огромное!
Пошла переносить все в основной :)
Marina Varzhainova: Наталья, я опять к вам за советом. Подскажите а можно сделать впадающее меню из выпадающего меню, т.е. многоуровневое меню? Надеюсь вы поняли мою мысли, я не знаю как правильно выразиться :)
NMitra: Добавим стили

.skryt1 + span > a + ul {
display: none;
width: 100%;
position: absolute;
left: 99%;
}

.skryt1 + span > a + ul li {
width: 100%;
background: transparent url(http://www.blogblog.com/1kt/travel/bg_black_70.png) repeat scroll top left;
border: 2px groove #444;
border-radius:3px;
}

.skryt1 + span:hover > a:hover + ul, .skryt1 + span > a + ul:hover {
display:block;
z-index: 2001;
}

А код будет

<a href="#" class="skryt1"> Пункт </a> <span><a href="#">Подпункт1</a><ul><li><a href="#">Подпункт11</a></li><li><a href="#">Подпункт12</a></li><li><a href="#">Подпункт13</a></li></ul> <a href="#">Подпункт2</a><a href="#">ПодпунктN</a><ul><li><a href="#">ПодпунктN1</a></li><li><a href="#">ПодпунктN2</a></li></ul></span>

В Мозиле кривовато, зато в IE ровненький так. Функционирует во всех браузерах.
Наталия Хорошилова: Поскажите пожалуйста, как влияет выпадающее меню на индексацию блога? Я установила в блоге другое меню и резко снизилась индексация Яндексом. Прочитала несколько статей, говорят что влияет. Хотелось бы узнать Ваше мнение. Спасибо заранее за ответ.
Мой блог: http://pedagoginfo.blogspot.com/
NMitra: Внутренних ссылок с одной страницы Гугл рекомендует ставить не более 100. Можно, конечно, и больше, но они не будут индексироваться: у вас это и меню, и архив, и далее. Общая рекомендация такая: контент боковых колонок, который повторяется на всех страницах: меню, популярные сообщения, вступительные слова и т.д. - не должен превышать длину статьи. Иначе поисковый робот может принять его за не уникальный и не внести в свою базу.
illyuziya: Спасибо, отличный вариант оформления!
А можно ещё немного доработать вкладки? Меня интересует, как поменять фон, который появляется при наведении курсора. И свойства шрифта, размер, цвет, цвет при наведении курсора и т.д.
Сейчас, всё это такое же, как на основных пунктах меню. Можно поменять на выпадающих вкладках, не меняя на основных..?
NMitra: .skryt1:hover + span > a:hover, .skryt1 + span:hover > a:hover {
background: transparent url(http://www.blogblog.com/1kt/travel/bg_black_70.png) repeat scroll top left;}

И другие свойства.
illyuziya: Дополнила - СУПЕР!!!
Спасибо большое! :)
Админ: Я чет не понял по поводу шрифта, размера и цвета... можно подробней растолковать.
NMitra: Смотрите свойства CSS: font и color. Для каждого блога они индивидуальны.
Levin Andrey: Прошу прощения, но я так и не понял как сделать выпадающее меню... Можно по подробней описать что где и как? Заранее благодарен!
NMitra: Ваш адрес блога. Что вы сделали, какой момент не поняли? Куда вставлять код со стилями - http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html ?
NMitra: Для "Венецианского окна" № 2

.tabs .widget {background: #f5f5f5 url(//www.blogblog.com/1kt/transparent/tabs_gradient_shade.png) repeat scroll bottom; border-radius: 10px;}
.tabs .widget li:hover a {border-radius: 0;}

Для "Венецианского окна" № 3

.tabs .widget {background: #1c1c1c none repeat scroll bottom;}
Detsle: http://www.picshare.ru/uploads/130209/663M1vSTs3.jpg
1. Как сделать линию не жирной?
2. Почему нету правой линии, хотя на второй(соседней) вкладке она есть.
Detsle: И вопрос вдогонку, как сделать плавное развёртывание меню?
NMitra: Верните проценты у bottom, иначе при добавлении очередных пунктов есть шанс, что ваша конструкция разъедется. И внесите дополнительный стиль:

.tabs .widget ul li a:nth-child(n+2) {
border-top: 1px solid rgb(154,201,14);
border-right: 1px solid #908d6a;}

Чтобы плавно развёртывалось, нужно display:none; заменять на overflow: hidden; и дополнить transition: 0.3s; - см. http://shpargalkablog.ru/2012/06/vypadayushcheye-menyu-css.html
Detsle: Вставляю такой код:
==================================================
.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: 10em; border-radius: 1px; overflow: hidden; transition: 0.3s;}
.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: rgb(154,201,14);}
.tabs .widget ul li:hover a:hover {color: rgb(0,1,0,1);}
.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: 9px 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}
.tabs .widget ul li a:nth-child(n+2) {
border-top: 1px solid rgb(154,201,14);
border-right: 1px solid #908d6a;}
==================================================
И получается какая-то котовасия, помоги поправить. Спасибо!
NMitra: Это убрать
.tabs-inner .widget li a {...}
Внутри шаблона должен уже быть этот фрагмент.
Анонимный: Привет не работает выпадающее меню, такого типа:
http://ruseller.com/lessons.php?rub=2&id=941

Что может быть?
testdetsle.blogspot.ru
NMitra: Пункты меню должны быть очень близки друг к другу, если между ними образуется пространство, то меню работать не будет.

К моему меню добавьте:

.tabs .widget ul li:hover a:nth-child(n+2):hover {transform: scale(1.02, 1.01); background: #003366;}
Дмитрий Александрович: Подскажите, пожалуйста.
Сделал по рекомендации, смог добавить только основные пункты меню, подпункты не отображаются.
http://303history.blogspot.ru/
NMitra: В стилях не хватает строки

.tabs .widget ul li:hover a {display: inline-block; box-shadow: none; background: rgba(0,61,118,.95);}
Елена: Спасибо большое! Меню добавилось)

Но! После добавления стиля, мое меню со стр. (гаджет стр.) и ярлыками стало такого же цвета как и фон, то есть цвет фона вкладок в гаджете стр. и ярлыки полетел. Я не знаю CSS.
Помогите, пожалуйста, настроить теперь меню, чтобы оно было как верхнее: черный фон, шрифт Corsiva и т.д.

Блог: http://secret-universe-by-galaxy.blogspot.ru/
Елена: Кстати, сейчас у меня в блоге меню из трех кнопок (объекты, аксессуары и т.д.) сделанное в программке Css3Menu.
Я добавляла его через гаджет html/java script. Стиль css отдельно по вашему же способу в дизайнере шаблона добавила.

И все в нем хорошо... мне он нравится, но вот проблема: это меню не разворачивается. На самом деле я уже испробовала штук 5 подобных этому меню скриптов, и ни один не работает - либо не разворачивается, либо css не отрабатывает, то есть все расплывается или превращается в текст.

Можете подсказать в чем тут может быть дело?
Ваше меню мне нравится, но хотелось бы еще понять, почему у меня вообще ничего не хочет работать правильно, даже если делать все так, как пишет автор скрипта.
Елена: Простите, что пишу третьим сообщением. Редактировать просто нельзя.. Забыла сказать, что пробовала вставлять в дримвивер и открывать в нем шаблон Венецианское окно 2, который у меня в блоге. Дримвивер ругается благим матом, сообщая об ошибках. Странно... знакомая тоже делала такое меню, и на ее шаблон такой дримвивер не ругается никак. На мой даже в его не изменном виде. Шаблоны у нас вроде бы одинаковые. Хотя у нее много полей видела закомментированными просто. Может быть дело еще в самом шаблоне? Почему не отрабатывает правильно ни один скрипт меню...
NMitra: Не могу посмотреть: "Этот блог открыт только для приглашенных читателей"
Alla Cuvichico: У меня ничего не получилось, у гаджета "Список" нет выпадающего списка меню. Что я делаю не так? Подскажите Мой блог http://www.travel-comfort.ru/
Я хотела добавить в меню еще раздел "страны мира" и уже в выпадающем добавить ссылки на 6 страниц ( сейчас это верхний левый гаджет)
NMitra: У него нет выпадающего меню, мы его делаем с помощью CSS сами.
NMitra: Возможно скриншот поможет разобраться http://4.bp.blogspot.com/-FtPRaCCmDPM/UVBdLlm99wI/AAAAAAAADxY/wdYPb1LmOLM/s1600/06.bmp
Елена: Да, я просто решила уже проблему. Сделала в программке Css3 Menu нужное меню. Код вставила в шаблон, а css добавила через Дизайнер.
Правда, удивительно то, что только с этим меню такое получилось.

А вы не можете подсказать, как сделать так, чтобы меню не перекрывали друг друга при раскрытии? То есть у меня есть верхнее меню, вставленное в шаблон, и чуть ниже еще одно. При раскрытии верхнее меню попадает одним пунктом под нижнее. То есть нижнее меню всегда идет поверх всех элементов в шаблоне.
Вот скриншот (жаль, что нельзя вставить картинкой):
http://img13.imageshost.ru/img/2013/03/25/image_515051ff7b08a.jpg
Елена: Вот код от меню полностью:

css

ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#000;background-image:url("mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;background-color:#000000;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#5A5E60;padding:0 9px 9px;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:1px 1px 1px 0;
*display:inline;}
ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1>li{
margin:0 0 0 1px;}
ul#css3menu1 ul>li{
margin:1px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#c191c8;cursor:default;padding:10px;background-color:#000000;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
float:none;margin:9px 0 0;}
ul#css3menu1 ul a{
text-align:left;padding:8px 0 0 0;background-color:#000000;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#262626;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial;color:#c191c8;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#0000ff;border-style:none;color:#ffffff;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#333;background-image:none;border-style:solid;border-color:#262626;color:#1F80AE;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.topmenu>a{
text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.toplast>a{
border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 _>li>a{
padding:0;}
ul#css3menu1 li.subfirst>a{
border-width:0;border-style:none;padding:0;}
ul#css3menu1 li.subfirst:hover>a,ul#css3menu1 li.subfirst a.pressed{
border-style:none;}
Елена: Код самого меню вставить не получается. Ругается на тег UL.

На самом деле это примерный набросок, чтобы показать, что происходит. Блог пока еще не заполнен, поэтому он закрыт. С целью, чтобы его никто не видел до завершения.

P.S. Просто хочу сначала по уму его оформить, поэтому так мучаюсь с меню. Чтобы потом этого не касаться, а просто добавлять сообщения.
NMitra: Откройте доступ к блогу, отпишитесь.
taki-ha: NMitra, спасибо большое, меню получилось, все отлично, только хочу немного поменять ширину. Как сделать фиксированную ширину для главных пунктов меню, подскажите, пожалуйста!
NMitra: .tabs .widget ul li a:nth-child(1) {width:500px;}
Татьяна: Спасибо!!!)))
Лика Торжевская: Скажите пожалуйста,как сделать фото кликабельны???
http://mybloglikatorhzevskaya.blogspot.com.es/
NMitra: Они у вас кликабельные, или что вы имеете ввиду?
Артём: скажите пожалуйста а как сделать в выпадающем пункте ещё несколько подпунктов??
NMitra: Посмотрите тут http://shpargalkablog.ru/2012/06/vypadayushcheye-menyu-css.html , стили нужно дополнять или воспользоваться гаджетом HTML/JavaScript
Андрей Парченко: Спасибо за блог, Наталья. И за то, что выделили слова.
NMitra: А я уж и позабыла о таком подходе, а он оказывается востребованный! Благодарю за то, что об этом сообщили!
Сергей Дмитриев: Уважаемая, NMitra, а не могли бы Вы и мне помочь с меню? У меня проблема немного в другом... Вот мой блог http://s-pars.blogspot.ru/ Менюшка постоянно куда-то пропадает, может можно её просто заменить на другую? Напишите мне на dsparse@gmail.com буду очень благодарен за помощь!
NMitra: Что вы имеете ввиду? Покажите на скриншотах
Наталья Деева: помогите пожалуйста. не могу добавлять новые гаджеты, не всплывает окно гаджета, и старые не могу изменять, где-то что-то испортила наверное.
NMitra: Сохраните шаблон и попробуйте так http://shpargalkablog.ru/2012/03/shablon-blogger-polomalsya.html
Наталья Деева: это у меня проблема из-за музилы, потому что в хроме все открывается отлично. что в музиле может быть не так?
NMitra: У меня Mozilla, всё работает на ура. Быть может у вас в браузере javascript выключен?
Тамара Сорока: сделала все как написано, не работает, кидалово
NMitra: Тамара, научитесь сначала обращаться по-человечески. Вспомните про заглавные буквы, слова "здравствуйте" и "пожалуйста". Ни здесь, ни где либо вам не будут помогать с таким отношением. Всего доброго.
Гульжан Серикбаева: Здравствуйте. Очень нравиться ваш блог, очень полезные информации. А как добавить подпункты и заголовки для подпункта и сортировать?
NMitra: Здравствуйте, благодарю. Дополнила статью скриншотом. В какой последовательности поставите, так и будет
Анастасия Васильева: Здравствуйте! спасибо за статью, очень помогла, подскажите пожалуйста как поменять цвета?
я вставляю в выделенные места коды типа: #FFFAFA, но ничего не выходит
NMitra: Здравствуйте,

#TextList1 ul li {color: #fffafa;}
Анастасия Васильева: скажите пожалуйста а как вообще они пишутся, для каждого цвета я так понимаю разное начало, никак не получается настроить что бы все было видно, а именно изменить фон, спасибо
Анастасия Васильева: большое спасибо, я уже разобралась!)
uzin: Здравствуйте. Я использую вертикальное меню, типа "Аккордеон". Подскажите,пожалуйста, как прописать,чтобы в этом месте:

Меню 1
Под меню1
Под меню2

это вот Меню 1 тоже было адресом.А то получается просто картинка кнопки,под которой выпадают кнопки с активными ссылками.
Спасибо.
И вообще,спасибо,все толково.Даже не подозревал,что блогспот такой мощный.
NMitra: Здравствуйте, вопрос не поняла:

<a href="адрес_куда_ведёт_Пункт"> текст_Пункта </a>
uzin: ну,в скрипте Меню 1 стоит между тегами h3 и все,а подменю прописано ссылкой.я имею в виду,как ссылкой и Меню 1 прописать?
NMitra: Так вы не у меня код брали, верно?
uzin: да,простите.но я оттуда к Вам пришел - Вас там настойчиво рекомендовали.
NMitra: Откуда? Хоть код где брали?
uzin: Брал у Блогодела.Вот,если линк пропустит:
http://blogodel.com/2014/01/Vertikalnoe-menju-tipa-Akkordeon-dlja-Blogspot-Blogger.html
NMitra: <h3> <a href="адрес_куда_ведёт_Пункт"> текст_Пункта </a> </h3>

В стили добавить
#mymenu a {
display: block;
}
uzin: Теперь ясно - для пункта первого создаем страницу и ставим "не показывать",правильно?
Спасибо.
NMitra: Я как-то туго соображаю уже. Где ставим "не показывать" и зачем?
uzin: О,все нормально пока)Вам спасибо)
uzin: Для пункта меня создаем страницу,указываем ее адрес в коде.А в панели Страницы ->Показывать как -> Не показывать.
NMitra: А, поняла, не показывать в гаджете "Страницы".
Варвара Кобенкова: Спасибо большое за блог!
Подскажите, пожалуйста, как уменьшить длину гаджета Список?
Наш блог: http://odevaisyalegko.blogspot.ru/
Список (длинная серая штука) сейчас расходится на всю ширину экрана, а нам нужно, чтобы меню располагалось на одном уровне с главным логотипом и текстами) - ширина 1000px

Спасибо заранее!
NMitra: Вместо
.tabs-outer {
background: url('//www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png') repeat scroll 0px 0px #EEE;
}
нужно
#crosscol {
background: url('//www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png') repeat scroll 0px 0px #EEE;
}

Убрать
.tabs-cap-top, .tabs-cap-bottom {
border-top: 1px solid #999;
}

Точного вхождения не найдёте, ищите в стилях по селектору "tabs-outer" и убирайте "background"
NMitra: Или проще, всего одной строкой:
.tabs-outer {
max-width: 1000px;
}
Варвара Кобенкова: Наталья, не получается(( Если использую просто
.tabs-outer {
max-width: 1000px;
}

у меня меню приклеивается к левому краю и все. Подскажите, пожалуйста, как быть?
Варвара Кобенкова: Наталья, спасибо Вам большое! Все получилось, но не подскажете, как теперь расширить рамки у кнопок? а то у меня на текст все заезжает.

И еще - справа остается место - можно ли как-то само меню сделать посередине (чтобы тогда и справа и слева чуть-чуть оставалось пространства) или убрать последнюю палочку справа? http://odevaisyalegko.blogspot.ru/

Спасибо большое заранее!
NMitra: Вот так:

.tabs-outer {
max-width: 1000px;
margin: 0 auto;
}

Эм, тогда уже внесённые изменения лучше убрать.
Вера Морозова: Спасибо огромное! Очень толково, и у меня всё получилось! :)))))
NMitra: Отлично :)
Вера Морозова: Ай, не так всё хорошо, как казалось))) Помогите, пожалуйста. У меня сейчас меню выровнялось по левому краю, а мне надо, чтобы оно было по центру. Иначе некрасиво((( Как сделать? http://www.wedding-bride.ru/
NMitra: Добавьте в стили CSS:

.tabs .widget ul { padding-left:128px; }
Вера Морозова: Спасибо! немного поиграла с цифрой, и теперь всё ОК.
Stella: Подскажите, пожалуйста, какой код и куда нужно вставить, чтобы в выпадающем меню заголовки были меньше чем в главном названии рубрики?

Сейчас имею такой код: (ваш, но слегка подкорректированный)

.tabs-outer, .tabs .widget ul {overflow: visible;}
.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: 1000; width: 8em; 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: rgb(255,255,255);}
.tabs .widget ul li:hover a:hover {color: rgb(201,201,201);}
Stella: И можно ли каким-либо образом сделать первый пост на всю страничку, а те .что ниже- с правым столбиком. В общем, как у барышни http://www.kayture.com
NMitra: .tabs .widget ul li a:nth-child(n+2) {font-size: 90%;}

Можно, но вёрстка должна быть другая изначально.
Stella: Сделала, шрифт выпадающих стал меньше, но вот заливка через 1 пункт пропала..(
NMitra: Не поняла
Stella: Залила сюда 2 скриншота, один с этим кодом, второй без
https://www.dropbox.com/s/nx9yfw9vaobtyv4/1234.png
https://www.dropbox.com/s/sh6z2z42d8pl10c/54321.png
NMitra: Можно либо увеличить padding: 10px 0; ( http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html ) либо уменьшить bottom
Stella: Прошу прощения .что снова беспокою) Сегодня заметила, что в выпадающем меню можно добавить только 10 подпунктов, а у меня их значительно больше( Можно ли как-то это изменить?
Stella: По уменьшению шрифтов так и не получилось( все равно как только заливка на картинку попадает сразу разрывы появляются. пробовала и padding и bottom.
Может можно тогда, к примеру, сделать более жирным оглавление, а подпункты оставить такими же.
NMitra: Продолжите цепочку

.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 a:nth-child(10) {bottom: -1000%;}
.tabs .widget ul li a:nth-child(10) {bottom: -1100%;}
.tabs .widget ul li a:nth-child(10) {bottom: -1200%;}
............

.tabs .widget ul li a:nth-child(1) {font-weight: bold;}
Ness: У меня получилось сделать меню! Но при формировании "архива" вышло только 10 месяцев (то бишь 10 строчек выпадающего меню) из почти 3 лет.
Наверное, это как-то связано с кодом, используемым в CSS (посмотрела его, посчитала и там, судя по всему, задано 10 строчек)
Возможно ли как-то увеличить количество строчек, чтобы поместился весь архив?
NMitra: Могу лишь предположить, что есть какое-то ограничение для гаджета.
Максим: здравствуйте. сделал горизонтальное меню, получилось длинное, из 6 пунктов, и поэтому в две строчки. всё хорошо, но когда открывается верхний пункт, и мышку веду на подпункты, управление перескакивает на нижний пункт. как с этим быть?
NMitra: Здравствуйте, покажите URL страницы или блога
Максим: вот мой сайт http://maksnjan.blogspot.com
NMitra: .tabs .widget ul li {position: relative; z-index: 1000;}
замените на
.tabs .widget ul li {position: relative;}
Максим: всё классно, работает, спасибо.
InvestMonitoringHYIP: Помогите мне пожалуйста, у меня не получается, показывает сам html код а сам скрипт этого не работает =*( и выпадающие окно не появляется, все по очереди стоит! Если можно свяжитесь со мной по почте mmmdee1998@yandex.ru или по Skype mmmdee1998 ! Буду рад за помощь - заранее СПАСИБО!
NMitra: Какой адрес блога?
InvestMonitoringHYIP: http://theinvestmentgroupinfo.blogspot.com/
NMitra: И? Добавьте, пожалуйста, код выпадающего меню, а то непонятно в чём проблема.
InvestMonitoringHYIP: Он у Меня идет по порядку вертикале а не по горизонтальном!
NMitra: Всё равно не вижу, как вложенные пункты то именуются?
InvestMonitoringHYIP: Просто я удаляю не полученный виджет! Можно как-то связаться с вами по скайпу или по соц сети?
NMitra: n.mitra@yandex.ru или http://vk.com/nmitra

Вот здесь есть код вертикального выпадающего меню http://shpargalkablog.ru/2010/08/gadzhet-htmljavascript-blogger.html
Мария Воротило: http://brightquietness.blogspot.ru/
Здравствуйте, подскажите, пожалуйста, как сделать так, чтобы у меню был фон не только при наведении курсора. Буду очень благодарна.
NMitra: Здравствуйте,

.tabs-inner .widget li a {
background-color: #000000;
}
Мария Воротило: Спасибо большое
Мария Воротило: http://brightquietness.blogspot.ru/
Здравствуйте. Снова к Вам обращаюсь. Захотела сделать заголовок блога посередине. Сделала так, как написано здесь http://www.shpargalochki.ru/2015/01/vyrovnjat-zagolovki-po-centru.html. Гаджеты не трогала, но в итоге получилось то, что получилось: сдвинулось не только название, но и гаджеты. Гаджет "Сообщения" вообще не отображается. Помогите разобраться, пожалуйста.
Мария Воротило: Причём это происходит только на главной странице.
Мария Воротило: Ой, не только. При публикации сообщений это происходит на всех страницах.
NMitra: Ох, Мария, сохраняйте шаблон перед внесением в него изменений. Сама не раз ломала и создавала заново http://shpargalkablog.ru/2012/03/shablon-blogger-polomalsya.html
Даниил Шумский: Добрый день) можно вас попросить помочь мне?
NMitra: Добрый день, попросить можно :)
Даниил Шумский: NMitra могу ли я создать блоггере свой блог сделать в нём своё выпадающее меню, только нужно чтобы это было меню по моему блогу, это возможно?
NMitra: Какие укажите пункты, те и будут. Конечно, в основном это пункты по текущему блогу
Татьяна Кошелева: Добрый день! А какое максимальное количество подпунктов? 9 еще отображается, а 10 уже нет. Есть ли ограничение?
И можно ли это как-то настроить?
NMitra: Добрый день, ограничений нет. Только добавьте после

.tabs .widget ul li a:nth-child(9) {bottom: -800%;}
.tabs .widget ul li a:nth-child(10) {bottom: -900%;}

сколько вам нужно строк

.tabs .widget ul li a:nth-child(11) {bottom: -1000%;}
.tabs .widget ul li a:nth-child(12) {bottom: -1100%;}

и т.д.
Татьяна Кошелева: Спасибо, получилось! :)