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

горизонтальное выпадающее меню 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 (высоту) основного меню и отдельного элемента.
    Если у вас будут вопросы по созданию выпадающего меню, то задавайте вопросы в комментариях.

  • 37 ответов к «Горизонтальное выпадающее меню на css»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *