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

горизонтальное выпадающее меню css
Как создать горизонтальное выпадающее меню css? Из этого урока вы не только научитесь создавать выпадающее меню на чистом css, но и вставлять в свой блог blogger.

Оцените статью
Добавить комментарий

  1. Наталка Михайлівна Зуб

    А что делать, если нужно такое же меню, только вертикальное(боковое)?

    Ответить
  2. Аноним

    Наталка Михайлівна, если вам не срочно, то скоро напишу урок на эту тему.

    Ответить
  3. Наталка Михайлівна Зуб

    Спасибо за ответ. Будем ждать...

    Ответить
  4. Наталья

    Готово, ответ здесь

    Ответить
  5. Наталка Михайлівна Зуб

    Огромное спасибо!!!!ОЧЕНЬ ОПЕРАТИВНО и просто! Спасибо!

    Ответить
  6. Mycrib

    Пожалуйста 😉

    Ответить
  7. Хамавова Асиль

    у меня есть шикарное горизонтальное меню, но почему то перестало работать, кто нибудь может, подсказать как разобраться???

    Ответить
  8. Mycrib

    Асиль, можешь скинуть код через обратную связь - поколдуем 😉

    Ответить
  9. Нина Зоркина

    Здравствуйте!Сделала меню на тестовом блоге,но кроме главной ничего не показывает.То,что было раньше я скрыла, новое в самом низу.Посмотрите. что не так, пожалуйста! http://ninazorkina.blogspot.com/

    Ответить
  10. Mycrib

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

    Ответить
    1. Нина Зоркина

      Наташа, это я сама вчера поняла и исправила, теперь не реагирует первая выпадающая ссылка

      Ответить
  11. Нина Зоркина

    Наташа, все уже заработало, есть хитрости в этом деле. А вы исправьте в коде ссылки выпадающих пунктов с главной на ссылки ярлыков http://ваш-блог/search/label/имя-ярлыка

    Ответить
  12. Нина Зоркина

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

    Ответить
    1. Mycrib

      Знакома мне проблема с выпадающими меню в стандартных шаблонах blogspot. Единственное решение, которое я могу предложить - это перетащить гаджет с кодом в область над сообщениями блога или в сайдбар. Места, конечно, маловато. Если найду другое решение, то отпишусь.

      Ответить
  13. Нина Зоркина

    Туда и перетащила, как вытащить из-под body? В сайдбаре-никакого впечатления

    Ответить
  14. Mycrib

    Нет, вы перетащили под шапку, а над сообщениями. Здесь есть небольшая разница. Вот скриншот
    В таком положении меню будет работать. Только вопрос в том - как оно будет здесь смотреться, но это нужно экспериментировать.

    "как вытащить из-под body" - это не поняла

    Ответить
  15. Нина Зоркина

    Здравствуйте, Наташа! Я уже попробовала несколько кодов из разных источников, пересмотрела кучу сайтов, все говорят, что не видят выпадения. Проверила в шаблоне, где используется z-индекс, у меню больше, чем у body, т.е. как в фотошопе слой с меню выше слоя body,должно быть видно выпадение.Подтверждение тому-ставила меню в гаджет в самом низу стр-чудесно работает.НО КТО ЕГО ТАМ УВИДИТ? Вы сказали то же самое, что над сообщением(в body) оно будет работать.Интересный факт! В процессе замены вашего горизонтального меню стильным серым вышла интересная комбинация: CSS от первого+ HTML от второго. Я даже подпрыгнула от радости-2 ряда, все видно,все работает, но немного некрасиво разделители смотрятся. Такая проблема почти у всех-НЕ ВИДНО ВЫПАДЕНИЕ. Вчера нашла еще один вариант http://www.dljablogger.ru/2011/12/gorizontalnoe-menju-dlja-blogger.html Решение нашел человек в комментариях и поделился дополнительным кодом, может попробую.Что интересно, авторы сообщений у себя на блоге не смогли установить такое меню, поэтому у нас проблемы

    Ответить
    1. Mycrib

      Спасибо, Нина. Попробовала воспользоваться кодом Павла Родцевича:

      .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);}

      Все получилось!
      А вообще это проблема стандартных дизайнов, а в нестандартных все работает.

      Ответить
  16. Нина Зоркина

    Ну не знаю, у меня не работает

    Ответить
    1. Mycrib

      Нина, у меня на тестовом блоге такой же шаблон, как у вас - и работает. Но не важно..
      Попробуйте удалить код от туда, куда его добавили. В шаблоне найдите тег ]]> и вставьте код перед ним. Должно заработать.

      Ответить
  17. Нина Зоркина

    Все убрала и заново установила с кодом Павла.РАБОТАЕТ!!! Ваш CSS +Павла самый удачный!

    Ответить
    1. Mycrib

      Я вам хотела предложить все переустановить заново. Заглянула в ваш блог, смотрю - работает! Очень рада, что все получилось!

      Ответить
  18. Dessi Fleur

    здравствуйте! не могли бы вы мне помочь, скопировала выпадающее меню из wordpress, удалила все лишнее,подставила свои параметры, но если ставить меню в начало страницы у меню не открываются подстраницы и само меню в белых полосках, ставлю тот же html код ниже сообщений и все прекрасно выглядит, меню мне нужно после названия блога наверху, в чем может быть проблема?
    вот ссылка моего пробного блога http://dlyaprimera.blogspot.ru/5/?m=0

    Ответить
  19. Иванова Наталья

    Dessi, скопируйте код из комментария и вставьте его перед ]]></b:skin> в редакторе html блога Blogge

    Ответить
  20. Dessi Fleur

    вставила оба CSS, теперь меню сверху выпадающее, но форма рамки не такая как внизу и мешают белые полосы

    Ответить
  21. Иванова Наталья

    Dessi Fleur, я посмотрю что можно сделать

    Ответить
  22. Dessi Fleur

    Спасибо Наталья!
    отправила вам код Html , который я вставляю в гаджет, посмотрите, может там можно что-то исправить

    Ответить
  23. Иванова Наталья

    Dessi, хорошо, автра посмотрю. Сегодня уже спать пора)

    Ответить
  24. InvestMonitoringHYIP

    Добрый день! Я попробовал сделать это но у Меня не получается, мой блог http://www.theinvestmentgroup.info/ а когда ставлю CSS на настройке шаблоны то горизонтальные вкладков нету только название вкладки, прощу посмотреть! Для связи мой почта mmmdee1998@yandex.ru или Skype mmmdee1998

    Ответить
  25. Иванова Наталья

    Попробую разобраться в вашей проблеме

    Ответить
  26. Анна Бережная

    Здравствуйте Наталья! Воспользовалась кодом и css выпадающего меню из этого поста. Подкорректировала и то и другое под свои нужды. В целом получилось то что мне необходимо. Есть недочеты которые пока не получается исправить. Подскажите пжл. 1 вопрос: как меню сдвинуть немного левее чтобы было по центру страницы(сейчас оно уехало в право. К тому же с права торчит хвостик. Уменьшаю ширину меню, как Вы рекомендуете,-меню выстраивается в две полосы. Мне нужно меню в одну полосу. Вопрос 2: как избавиться от хвостика? И вопрос 3: в первом выпадающем меню категории разместились по центру, в остальных двух вкладках - категории находятся слева. Вопрос- как их разместить в одном стиле на всех выпадающих меню(например слева)? Мой тестовый блог http://malahitberezhnaya.blogspot.ru

    Ответить
  27. Иванова Наталья

    Чтобы меню не сбивалось в две строки, нужно воспользоваться кодом, который был опубликован в комментарии выше. Этот код нужно добавить в шаблон перед ]]></b:skin>
    Про "хвостик" не поняла. Если еще актуально - выложите ваш измененный css меню, мне будет проще вам подсказать.

    Ответить
  28. Иванова Наталья

    Анна, чтобы выравнять меню по центру, нужно изменить строчку, выделенную жирным:
    #osn {
    background: #14256C; /*----- Цвет фона основного меню----*/
    width: 290px; /*----- Ширина основного меню----*/ color: #FFF;
    margin: 0px auto;

    Ответить
  29. Lilya Popil

    не могу никак сделать горизонтальное выпадающее меню.Помогите

    Ответить
  30. Иванова Наталья

    Lilya, что у вас не получается?

    Ответить
  31. Lilya Popil

    то что вы написали, все сделала не работает

    Ответить
  32. Иванова Наталья

    Lilya, код рабочий на 100% независимо от шаблона. Значит, вы где-то допустили ошибку. Возможно, вставили не весь код. Заметьте, что он не помещается полностью в окне кода, и его нужно прокручивать вниз.

    Ответить