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

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

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

Стили лучше подогнать индивидуально для вашего шаблона, в частности, фон, цвет текста при наведении и длину выпадающих пунктов. Итак, в "Дизайнере шаблонов" вносим разработанный нами 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 убираем этот мета-тег.

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

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

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

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

<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)
Rookee — инструменты для привлечения клиентов на сайт
в 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%;}

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