Горизонтальное выпадающее меню на css
Как создать горизонтальное выпадающее меню css? Из этого урока вы не только научитесь создавать выпадающее меню на чистом css, но и вставлять в свой блог blogger.
Смотрите также по теме:
Выпадающее меню для blogspot
Горизонтальное меню в blogger
Программа CSS Menu Generator и сервис CSS Menu Generator
Вначале определимся с кодом HTML выпадающего меню. Его создать достаточно просто:
Создайте простой список HTML с атрибутом id:
В качестве id вы можете взять любой набор символов, для того, чтобы задать стили именно для этого списка, создав из него красивое css меню.
<div id='osn'>
<ul id='menu'>
<li>
<a href='https://mycrib.ru/'>Главная</a>
</li>
<li>
<a href='https://mycrib.ru/'>Обратная связь</a>
</li>
<li>
<a href="https://mycrib.ru/">Карта блога</a>
<ul>
<li><a href='https://mycrib.ru/'>Раздел карты сайта 1</a></li>
<li><a href='https://mycrib.ru/'>Раздел карты сайта 2</a></li>
<li><a href='https://mycrib.ru/'>Раздел карты сайта 3</a></li>
</ul> </li>
</ul>
</div>
Примечание. При вставки HTML-кода меню четко следите за кавычками – ни в коем случае нельзя потерять или поставить лишнюю и сразу вставляйте код в готовом виде – со ссылками и правильно прописанными названиями пунктов меню. Для этого снечала отредактируйте код в блокноте или Notepad ++.
В примере, как вы видите показано создание списка с подкатегориями. Пример отображения такок списка-меню без подключения стилей:
Код HTML меню вставьте в гаджет HTML / Javascript элемента страницы во вкладке Дизайн. Выберите расположение. Сохраните изменения.
Теперь наша задача при помощи стилей создать горизонтальное выпадающее меню css. Полученный код вы вставите перед кодом ]]></b:skin> в редакторе html вашего блога.
Пример CSS для выпадающего меню:
В код css я вставила комментарии, для того, чтобы вы смогли настроить горизонтальное выпадающее меню так, как вам нужно (изменили цвет меню, размеры и пр.)
/*----- CSS код выпадающего меню ----*/
#osn {
background: #14256C; /*----- Цвет фона основного меню----*/
width: 290px; /*----- Ширина основного меню----*/ color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100; /*----- Верхняя граница меню: ширина стиль цвет----*/
height:35px; /*----- Высота меню----*/
}
#menu {
margin: 0;
padding: 0;
}
#menu ul {
float: left; /*----- Выравнивание меню----*/
list-style: none; /*----- Отсутствие маркеров списка основного меню----*/
margin: 0;
padding: 0;
}
#menu li {
list-style: none; /*----- Отсутствие маркеров списка подменю----*/
margin: 0;
padding: 0;
border-left:1px solid #333; /*----- Граница левая элемента главного меню стиль и цвет----*/
border-right:1px solid #333; /*----- Граница правая элемента меню----*/
height:35px; /*----- Высота меню отдельного элемента----*/
}
#menu li a, #menu li a:link, #menu li a:visited {
color: #FFF; /*----- Цвет ссылки элемента основного меню ----*/
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0; /*----- Шрифт ссылок основного меню----*/
padding: 9px 12px 10px 12px; /*----- Отступы ссылки от границ блока, если вы меняете отступы, то нужно изменить ширину меню и высоту основоного меню и отдельного элемента----*/
text-decoration: none; /*----- Отсутствие подчеркивания ссылки----*/
}
#menu li a:hover, #menu li a:active {
background: #97ABE3; /*----- Цвет элемента основного меню при наведении----*/
color: #FFF; /*----- Цвет ссылки элемента основного меню при наведении курсора----*/
display: block;
text-decoration: none; /*----- Отсутствие подчеркивания ссылки----*/
margin: 0;
padding: 9px 12px 10px 12px; /*----- Отступы ссылок при наведении и активных, должны быть равны отступам неактивных ссылок, если не задумано смещение при наведении----*/
}
#menu li {
float: left;
padding: 0;
}
#menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#menu li ul a {
width: 140px;
}
#menu li ul ul {
margin: -25px 0 0 161px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
left: auto;
}
#menu li:hover, #menu li.sfhover {
position: static;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background: #97ABE3; /*----- Цвет фона выпадающего меню----*/
width: 120px;
color: #000; /*----- Цвет неактивных ссылок выпадающего меню----*/
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px; /*----- Отступы ссылок выпадающего меню----*/
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#menu li li a:hover, #menu li li a:active {
background: #fff; /*----- Цвет фона выпадающего меню при наведении на пункт----*/
color: #000; /*----- Цвет наведенной и активной ссылки пункта выпадающего меню----*/
display: block; margin: 0;
padding: 9px 12px 10px 12px; /*----- Отступы наведенных и активных ссылоквыпадающего меню ----*/
text-decoration: none;
}
Примечание. Если вы добавляете пункты к основному меню, то вы должны обязательно сделать изменения в ширине основного меню – измените значение width: 290px. Вам также придется изменить ширину даже в том случае, если вы просто иначе назовете пункты меню. В противном случае выпадающее меню css будет отображаться некорректно. Изменяют ширину меню путем подбора:
- если у вас получилось меню в 2 ряда, то увеличьте ширину в редакторе html – и просмотрите изменения без сохранения шаблона,
- если в меню образовался “пустой хвост” – часть неполной ячейки, то уменьшите ширину меню.
Если вы захотите изменить высоту меню, то вам придется поменять отступы основного меню и отдельного элемента, а также height (высоту) основного меню и отдельного элемента.
Если у вас будут вопросы по созданию выпадающего меню, то задавайте вопросы в комментариях.
А что делать, если нужно такое же меню, только вертикальное(боковое)?
Наталка Михайлівна, если вам не срочно, то скоро напишу урок на эту тему.
Спасибо за ответ. Будем ждать…
Готово, ответ здесь
Огромное спасибо!!!!ОЧЕНЬ ОПЕРАТИВНО и просто! Спасибо!
Пожалуйста 😉
у меня есть шикарное горизонтальное меню, но почему то перестало работать, кто нибудь может, подсказать как разобраться???
Асиль, можешь скинуть код через обратную связь — поколдуем 😉
Здравствуйте!Сделала меню на тестовом блоге,но кроме главной ничего не показывает.То,что было раньше я скрыла, новое в самом низу.Посмотрите. что не так, пожалуйста! http://ninazorkina.blogspot.com/
Нина, вы вставили не те ссылки в меню. Нужно на конкретные сообщения, страницы, а не не страницу поиска. Когжа ищите ссылки — заходите на эти страницы, а не берите адрес результатов поиска.
Какие страницы блога вам нужны, я напишу их ссылки.
Наташа, это я сама вчера поняла и исправила, теперь не реагирует первая выпадающая ссылка
Наташа, все уже заработало, есть хитрости в этом деле. А вы исправьте в коде ссылки выпадающих пунктов с главной на ссылки ярлыков http://ваш-блог/search/label/имя-ярлыка
Простите,Наташа, поторопилась кричать ура.Перетащила гаджет под шапку и выпадающие пункты не показываются.В каком направлении искать?
Знакома мне проблема с выпадающими меню в стандартных шаблонах blogspot. Единственное решение, которое я могу предложить — это перетащить гаджет с кодом в область над сообщениями блога или в сайдбар. Места, конечно, маловато. Если найду другое решение, то отпишусь.
Туда и перетащила, как вытащить из-под body? В сайдбаре-никакого впечатления
Нет, вы перетащили под шапку, а над сообщениями. Здесь есть небольшая разница. Вот скриншот
В таком положении меню будет работать. Только вопрос в том — как оно будет здесь смотреться, но это нужно экспериментировать.
"как вытащить из-под body" — это не поняла
Здравствуйте, Наташа! Я уже попробовала несколько кодов из разных источников, пересмотрела кучу сайтов, все говорят, что не видят выпадения. Проверила в шаблоне, где используется z-индекс, у меню больше, чем у body, т.е. как в фотошопе слой с меню выше слоя body,должно быть видно выпадение.Подтверждение тому-ставила меню в гаджет в самом низу стр-чудесно работает.НО КТО ЕГО ТАМ УВИДИТ? Вы сказали то же самое, что над сообщением(в body) оно будет работать.Интересный факт! В процессе замены вашего горизонтального меню стильным серым вышла интересная комбинация: CSS от первого+ HTML от второго. Я даже подпрыгнула от радости-2 ряда, все видно,все работает, но немного некрасиво разделители смотрятся. Такая проблема почти у всех-НЕ ВИДНО ВЫПАДЕНИЕ. Вчера нашла еще один вариант http://www.dljablogger.ru/2011/12/gorizontalnoe-menju-dlja-blogger.html Решение нашел человек в комментариях и поделился дополнительным кодом, может попробую.Что интересно, авторы сообщений у себя на блоге не смогли установить такое меню, поэтому у нас проблемы
Спасибо, Нина. Попробовала воспользоваться кодом Павла Родцевича:
.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);}
Все получилось!
А вообще это проблема стандартных дизайнов, а в нестандартных все работает.
Ну не знаю, у меня не работает
Нина, у меня на тестовом блоге такой же шаблон, как у вас — и работает. Но не важно..
Попробуйте удалить код от туда, куда его добавили. В шаблоне найдите тег ]]> и вставьте код перед ним. Должно заработать.
Все убрала и заново установила с кодом Павла.РАБОТАЕТ!!! Ваш CSS +Павла самый удачный!
Я вам хотела предложить все переустановить заново. Заглянула в ваш блог, смотрю — работает! Очень рада, что все получилось!
здравствуйте! не могли бы вы мне помочь, скопировала выпадающее меню из wordpress, удалила все лишнее,подставила свои параметры, но если ставить меню в начало страницы у меню не открываются подстраницы и само меню в белых полосках, ставлю тот же html код ниже сообщений и все прекрасно выглядит, меню мне нужно после названия блога наверху, в чем может быть проблема?
вот ссылка моего пробного блога http://dlyaprimera.blogspot.ru/5/?m=0
Dessi, скопируйте код из комментария и вставьте его перед ]]></b:skin> в редакторе html блога Blogge
вставила оба CSS, теперь меню сверху выпадающее, но форма рамки не такая как внизу и мешают белые полосы
Dessi Fleur, я посмотрю что можно сделать
Спасибо Наталья!
отправила вам код Html , который я вставляю в гаджет, посмотрите, может там можно что-то исправить
Dessi, хорошо, автра посмотрю. Сегодня уже спать пора)
Добрый день! Я попробовал сделать это но у Меня не получается, мой блог http://www.theinvestmentgroup.info/ а когда ставлю CSS на настройке шаблоны то горизонтальные вкладков нету только название вкладки, прощу посмотреть! Для связи мой почта mmmdee1998@yandex.ru или Skype mmmdee1998
Попробую разобраться в вашей проблеме
Здравствуйте Наталья! Воспользовалась кодом и css выпадающего меню из этого поста. Подкорректировала и то и другое под свои нужды. В целом получилось то что мне необходимо. Есть недочеты которые пока не получается исправить. Подскажите пжл. 1 вопрос: как меню сдвинуть немного левее чтобы было по центру страницы(сейчас оно уехало в право. К тому же с права торчит хвостик. Уменьшаю ширину меню, как Вы рекомендуете,-меню выстраивается в две полосы. Мне нужно меню в одну полосу. Вопрос 2: как избавиться от хвостика? И вопрос 3: в первом выпадающем меню категории разместились по центру, в остальных двух вкладках — категории находятся слева. Вопрос- как их разместить в одном стиле на всех выпадающих меню(например слева)? Мой тестовый блог http://malahitberezhnaya.blogspot.ru
Чтобы меню не сбивалось в две строки, нужно воспользоваться кодом, который был опубликован в комментарии выше. Этот код нужно добавить в шаблон перед ]]></b:skin>
Про "хвостик" не поняла. Если еще актуально — выложите ваш измененный css меню, мне будет проще вам подсказать.
Анна, чтобы выравнять меню по центру, нужно изменить строчку, выделенную жирным:
#osn {
background: #14256C; /*—— Цвет фона основного меню—-*/
width: 290px; /*—— Ширина основного меню—-*/ color: #FFF;
margin: 0px auto;
не могу никак сделать горизонтальное выпадающее меню.Помогите
Lilya, что у вас не получается?
то что вы написали, все сделала не работает
Lilya, код рабочий на 100% независимо от шаблона. Значит, вы где-то допустили ошибку. Возможно, вставили не весь код. Заметьте, что он не помещается полностью в окне кода, и его нужно прокручивать вниз.