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

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

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

В этом разделе будет описанное горизонтальное выпадающее меню на CSS и HTML.

Навигация по странице:

 

И так, наша задача:

сделать горизонтальное меню с выпадающим списком css (на списках ul li) без использования jQuery и Javascript, а также без применения таблиц <table> в коде.

Выпадающее горизонтальное меню html

к менюПервым делом, перед тем как приступать писать код, нам нужно сделать html шаблон для меню.

В связи с тем, что мы делаем универсальное меню, я хочу его сделать максимально похожим под вывод меню WordPress. На мой взгляд, это один из самых простых и универсальных Html кодов меню. Выглядит он вот так:

<nav id="menu1">
<ul>
 <li><a href="#m1">Главная</a></li>
 <li><a href="#m2">О нас</a></li>
 <li><a href="#m3">Наши услуги</a>
  <ul>
   <li><a href="#m3_1">Наша услуга №1</a></li>
   <li><a href="#m3_2">Наша услуга №2</a></li>
   <li><a href="#m3_3">Наша услуга №3</a></li>
   <li><a href="#m3_4">Наша услуга №4</a></li>
   <li><a href="#m3_5">Услуга 5</a></li>
  </ul>
 </li>
 <li><a href="#m4">Новости</a></li>
 <li><a href="#m5">Контакты</a></li>
</ul>
</nav><!--menu1-->

Как видно с кода, наше выпадающее меню будет реализовано на списках ul и li. Вот так выглядит это меню без стилей CSS: горизонтальное выпадающее меню html

Скажем прямо выглядит уродливо, как обычный список. Далее нам нужно разукрасить это меню с помощью стилей CSS.

 

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

к менюСтили CSS для выпадающего меню и не только – вещь необходимая как воздух. Ведь выпадающая вкладка делается на основе псевдокласса :hover.

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

#menu1{
    position:relative;
    display:block;
    width:100%;
    height:auto;
    z-index:10;
}
    #menu1 ul{
        position:relative;
        display:block;
        margin:0px;
        padding:0px;
        width:100%;
        height:auto;
        list-style:none;
        background:#F3A601;
    }
    #menu1 > ul::after{
        display:block;
        width:100%;
        height:0px;
        clear:both;
        content:" ";
    }
        #menu1 ul li{
            position:relative;
            display:block;
            float:left;
            width:auto;
            height:auto;
        }
            #menu1 ul li a{
                display:block;
                padding:9px 25px 0px 25px;
                font-size:14px;
                font-family:Arial, sans-serif;
                color:#ffffef;
                line-height:1.3em;
                text-decoration:none;
                font-weight:bold;
                text-transform:uppercase;
                height:36px;
                box-sizing:border-box;
            }
            #menu1 ul li > a:hover, #menu1 ul li:hover > a{
                background:#EBBD5B;
                color:#2B45E0;
            }
Развернуть весь код

Это еще не конец, а только часть CSS для основного горизонтального меню. Далее мы напишем стили для выпадающего списка меню:

#menu1 ul li ul{
    position:absolute;
    top:36px;
    left:0px;
    display:none;
    width:200px;
    background:#EBBD5B;
}
#menu1 ul li:hover ul{display:block;}/*эта строчка реализует механизм выпадения*/
    #menu1 ul li ul li{
        float:none;
        width:100%;
    }
        #menu1 ul li ul li a{
            display:block;
            text-transform:none;
            height:auto;
            padding:7px 25px;
            width:100%;
            box-sizing:border-box;
            border-top:1px solid #ffffff;
        }
        #menu1 ul li ul li:first-child a{border-top:0px;}
        #menu1 ul li ul li a:hover{
            background:#FDDC96;
            color:#6572BC;
        }

Вот теперь все. Сам механизм выпадашки реализован одной строчкой.

Смотрите скин с этим меню:

горизонтальное выпадающее менюРис. 2 (горизонтальное выпадающее меню)

к менюНиже доступен демо просмотр работы выпадающего меню, а также ссылка на скачивание исходников. (Демо будет открыт выпадашкой поверх этой страницы, не нужно нажимать открыть в новом окне 🙂  или колесико мышки)

Демо просмотр
Скачать пример

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

к менюБольшинство из вас могут меня упрекнуть, мол такие менюшки, как я показал выше, это привет из прошлого и от части вы правы, хотя я встречал свежие верстки с такими менюшками.

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

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

#conteiner{
    width:1000px;
    height:auto;
    margin:0px auto;
    padding-top:10px;
}
#menu1{
    position:relative;
    display:block;
    width:100%;
    height:auto;
    z-index:10;
}
    #menu1 ul{
        position:relative;
        display:block;
        margin:0px;
        padding:0px;
        width:100%;
        height:auto;
        list-style:none;
        background:#F3A601;
    }
    #menu1 > ul{
        text-align:justify;
        font-size:1px;
        line-height:1px;
    }
    #menu1 > ul::after{
        display:inline-block;
        width:100%;
        height:0px;
        content:" ";
    }
        #menu1 ul li{
            position:relative;
            display:inline-block;
            width:auto;
            height:auto;
            vertical-align:top;
            text-align:left;
        }
            #menu1 ul li a{
                display:block;
                padding:9px 35px 0px 35px;
                font-size:14px;
                font-family:Arial, sans-serif;
                color:#ffffef;
                line-height:1.3em;
                text-decoration:none;
                font-weight:bold;
                text-transform:uppercase;
                height:36px;
                box-sizing:border-box;
            }
            #menu1 ul li > a:hover, #menu1 ul li:hover > a{
                background:#EBBD5B;
                color:#2B45E0;
            }
            #menu1 ul li ul{
                position:absolute;
                top:36px;
                left:0px;
                display:none;
                width:auto;
                background:#EBBD5B;
                white-space:nowrap;
            }
            #menu1 ul li:last-child ul{/*последний пункт будет прикреплен по правому краю*/
                left:auto;
                right:0px;
            }
            #menu1 ul li:hover ul{display:block;}/*эта строчка реализует механизм выпадения*/
                #menu1 ul li ul li{
                    display:block;
                    width:auto;
                }
                    #menu1 ul li ul li a{
                        display:block;
                        text-transform:none;
                        height:auto;
                        padding:7px 35px;
                        width:100%;
                        box-sizing:border-box;
                        border-top:1px solid #ffffff;
                    }
                    #menu1 ul li ul li:first-child a{border-top:0px;}
                    #menu1 ul li ul li a:hover{
                        background:#FDDC96;
                        color:#6572BC;
                    }
Развернуть весь код

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

Также этот пример отличается от первого тем, что выпадающее меню, сама выпадашка, тянется в зависимости от ширины всех пунктов меню.

выпадающее меню cssДля очень длинных пунктов меню, такой вариант может быть не сильно удобным, так как они будут вылазить за пределы. Чтобы отключить это свойство, достаточно найти свойство "white-space:nowrap;" у селектора #menu1 ul li ul, и удалить его.

Ниже вы можете посмотреть демо или скачать исходники горизонтального выпадающего меню:

Демо просмотр
Скачать пример

Без разделителей это меню смотрится так себе. Разделители можно добавить в хтмл руками, но если у вас CMS, например WordPress, – то руками там добавлять не сильно удобно.

Далее я покажу вам как можно добавить разделители в меню.

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

к менюСуществует несколько десятков вариантов, как на чистом CSS добавить полоску (разделитель) между пунктами меню. Варианты, которые используют ::before или ::after , или куда проще border-left, border-right я дублировать не буду.

Бывают ситуации, когда верстка построена так чудесненько, что без jquery не обойтись.

Html код у нас остается прежним, мы только подключаем в самом начале библиотеку jQuery и файл, который ее использует:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="script-menu-3.js"></script>

Сразу после </title>.

Как вы поняли, нужно создать файл script-menu-3.js и туда закинуть вот такой маленький код:

$(document).ready(function(){
$("#menu1 > ul > li:not(:last-child)").after(' <li class="razd">&nbsp;</li>');
});

Стили CSS для такого меню нужно оставить те что есть, + забросить вот этот кусок в конец:

#menu1 ul li.razd{
height:28px;
width:1px;
background:#ffffff;
margin-top:4px;
}

Выглядеть такое горизонтальное выпадающее меню с разделителями на jQuery будет вот так:gorizontal-menu-3-0

Можно просмотреть в режиме демо или скачать шаблон горизонтального меню ниже:

Демо просмотр
Скачать пример

Преимуществами такого решения является:

  • меню будет тянутся динамически;
  • отступы от разделителя до пункта везде одинаковые;
  • более красивое и гибкое оформление.

 

Горизонтальное многоуровневое выпадающее меню CSS+HTML

к менюРаз пошла речь о многоуровневых выпадающих меню при наведении, наверное стоить поделить их на подгруппы:

  1. с випадашкой при наведении в сторону
  2. со всплывающей выпадашкой третьего уровня

В своих примерах я буду показывать многоуровневое меню CSS на 3 уровня, далее думаю будет не сложно догадаться что нужно делать.

Многоуровневое выпадающее меню с випадашкой в сторону при наведении

к менюДля начала нам нужно немножко подкоректировать наш хтмл. Там добавится парочка строк для 3 уровня:

<nav id="menu1">
        <ul>
            <li><a href="#m1">Главная</a></li>
            <li><a href="#m2">О нас</a></li>
            <li><a href="#m3">Наши услуги</a>
                <ul>
                    <li><a href="#m3_1">Наша услуга №1</a>
                        <ul>
                            <li><a href="#m3_1_1">Дополнение к услуге 1</a></li>
                            <li><a href="#m3_1_1">Дополнение к услуге 2</a></li>
                        </ul>
                    </li>
                    <li><a href="#m3_2">Наша услуга №2</a>
                        <ul>
                            <li><a href="#m3_2_1">Дополнение к услуге 3</a></li>
                            <li><a href="#m3_2_1">Дополнение к услуге 4</a></li>
                        </ul>
                    </li>
                    <li><a href="#m3_3">Наша услуга №3</a></li>
                    <li><a href="#m3_4">Наша услуга №4</a></li>
                    <li><a href="#m3_5">Услуга 5</a></li>
                </ul>
            </li>
            <li><a href="#m4">Новости</a></li>
            <li><a href="#m5">Контакты</a>
                <ul>
                    <li><a href="#m5_1">Карта проезда</a>
                        <ul>
                            <li><a href="#m5_1_1">Дополнение для карты</a></li>
                            <li><a href="#m5_1_1">Дополнение для карты 2</a></li>
                        </ul>
                    </li>
                    <li><a href="#m5_2">Форма обратной связи</a></li>
                </ul>
            </li>
        </ul>
    </nav><!--menu1-->
Развернуть весь код

Далее, для нашего горизонтального выпадающего меню нужно поменять стили CSS, меняем полностью все:

#conteiner{
    width:1000px;
    height:auto;
    margin:0px auto;
    padding-top:10px;
}
#menu1{
    position:relative;
    display:block;
    width:100%;
    height:auto;
    z-index:10;
}
    #menu1 ul{
        position:relative;
        display:block;
        margin:0px;
        padding:0px;
        width:100%;
        height:auto;
        list-style:none;
        background:#F3A601;
    }
    #menu1 > ul{
        text-align:justify;
        font-size:1px;
        line-height:1px;
    }
    #menu1 > ul::after{
        display:inline-block;
        width:100%;
        height:0px;
        content:" ";
    }
        #menu1 ul li{
            position:relative;
            display:inline-block;
            width:auto;
            height:auto;
            vertical-align:top;
            text-align:left;
        }
        #menu1 ul li.razd{
            height:28px;
            width:1px;
            background:#ffffff;
            margin-top:4px;
        }
            #menu1 ul li a{
                display:block;
                padding:9px 45px 0px 45px;
                font-size:14px;
                font-family:Arial, sans-serif;
                color:#ffffef;
                line-height:1.3em;
                text-decoration:none;
                font-weight:bold;
                text-transform:uppercase;
                height:36px;
                box-sizing:border-box;
            }
            #menu1 ul li > a:hover, #menu1 ul li:hover > a{
                background:#EBBD5B;
                color:#2B45E0;
            }
            #menu1 ul li ul{
                position:absolute;
                top:36px;
                left:0px;
                display:none;
                width:auto;
                background:#EBBD5B;
                white-space:nowrap;
            }
            #menu1 > ul > li:last-child > ul{/*последний пункт будет прикреплен по правому краю*/
                left:auto;
                right:0px;
            }
            #menu1 ul li:hover > ul{display:block;}/*эта строчка реализует механизм выпадения*/
                #menu1 ul li ul li{
                    display:block;
                    width:auto;
                }
                    #menu1 ul li ul li a{
                        display:block;
                        text-transform:none;
                        height:auto;
                        padding:7px 45px;
                        width:100%;
                        box-sizing:border-box;
                        border-top:1px solid #ffffff;
                    }
                    #menu1 ul li ul li:first-child > a{border-top:0px;}
                    #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a{
                        background:#FDDC96;
                        color:#6572BC;
                    }
                #menu1 ul li ul li ul{
                    top:0px;
                    left:100%;
                    display:none;
                    background:#fddc96;
                }
                #menu1 > ul > li:last-child > ul ul{left:auto; right:100%;}
                    #menu1 ul li ul li ul a{color:#F38A01;}
Развернуть весь код

 Файлы для jQuery копируем как были с предыдущего примера. Решил оставить разделители, что б меню хоть немного лучше смотрелось. Можно конечно и без них.

Вот так получилось: gorizontal-menu-4-0Я сделал 2 скина в одном, что бы показать как выпадашка смотрится справа и по средине.

Ниже вы можете посмотреть демо а также скачать пример:

Демо просмотр
Скачать пример

 

Многоуровневое выпадающее меню со всплывающей випадашкой при наведении

к менюНемного масло масляное получилось в заголовке, но прокатит, главное код.

Суть этого примера сделать горизонтальное выпадающее меню на всю ширину с выпадашкой на всю ширину + многоуровневость.

Хтмл код я менять не буду, его можно взять с предыдущего примере. Разделители на jQuery также оставляем.

Будет меняться только CSS полностью:

#conteiner{
    width:1000px;
    height:auto;
    margin:0px auto;
    padding-top:10px;
}
#menu1{
    position:relative;
    display:block;
    width:100%;
    height:auto;
    z-index:10;
}
    #menu1 ul{
        position:relative;
        display:block;
        margin:0px;
        padding:0px;
        width:100%;
        height:auto;
        list-style:none;
        background:#F3A601;
    }
    #menu1 > ul{
        text-align:justify;
        font-size:1px;
        line-height:1px;
    }
    #menu1 > ul::after{
        display:inline-block;
        width:100%;
        height:0px;
        content:" ";
    }
        #menu1 ul li{
            position:relative;
            display:inline-block;
            width:auto;
            height:auto;
            vertical-align:top;
            text-align:left;
        }
        #menu1 > ul > li{position:static;}
        #menu1 ul li.razd{
            height:28px;
            width:1px;
            background:#ffffff;
            margin-top:4px;
        }
            #menu1 ul li a{
                display:block;
                padding:9px 45px 0px 45px;
                font-size:14px;
                font-family:Arial, sans-serif;
                color:#ffffef;
                line-height:1.3em;
                text-decoration:none;
                font-weight:bold;
                text-transform:uppercase;
                height:36px;
                box-sizing:border-box;
            }
            #menu1 ul li > a:hover, #menu1 ul li:hover > a{
                background:#EBBD5B;
                color:#2B45E0;
            }
            #menu1 ul li ul{
                position:absolute;
                top:36px;
                left:0px;
                display:none;
                width:100%;
                background:#EBBD5B;
            }
            #menu1 > ul > li > ul::after{
                clear:both;
                float:none;
                width:100%;
                height:0px;
                content:" ";
            }
            #menu1 ul li:hover > ul{display:block;}/*эта строчка реализует механизм выпадения*/
                #menu1 ul li ul li{
                    display:block;
                    width:30%;
                    float:left;
                }
                    #menu1 ul li ul li a{
                        display:block;
                        text-transform:none;
                        height:auto;
                        padding:7px 45px;
                        width:100%;
                        box-sizing:border-box;
                    }
                    #menu1 ul li ul li:first-child > a{border-top:0px;}
                    #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a{
                        background:#FDDC96;
                        color:#6572BC;
                    }
                #menu1 ul li ul li ul{
                    top:0px;
                    left:100%;
                    display:none;
                    background:#fddc96;
                    z-index:15;
                }
                    #menu1 ul li ul li ul li{display:block; float:none; width:100%;}
                    #menu1 ul li ul li ul a{
                        color:#F38A01;
                        border-top:1px solid #ffffff;
                    }
Развернуть весь код

Вот так меню будет смотреться:gorizontal-menu-5-0Единственный момент – у сайта должно быть достаточно места, так как крайнего пункта справа нет места для выпадашки. Эту проблему можно решить через :nth-child но я не стал городить огород.

Смотрите демо горизонтального многоуровневого выпадающего меню:

Демо просмотр
Скачать пример

Как вы могли заметить: нижняя плашка тоже на всю ширину. Вот так делаются выпадашки в несколько блоков.

 

На этом у меня все, надеюсь хоть один мой пример вам подошел. Спасибо за внимание.

В качестве благодарности можно поделиться ссылкой со своими друзьями:

это принесет пользу и им и мне 🙂 .

Если вы прочли пост полностью, но не нашли как сделать свое горизонтальное выпадающее меню на css, задайте вопрос в комментариях или воспользуйтесь поиском по сайту.

Также, советую посетить родительскую страницу https://help-wp.ru/vypadayushhee-menu/, там собраны все примеры и разновидности выпадающих меню.

Комментарии к записи «Горизонтальное выпадающее меню на css и Html своими руками»:
  1. Павел:
    04.07.2017 в 17:21

    Добрый день! Очень полезная информация, спасибо. Пытаюсь понять в opencart как выровнять выпадающее меню строго под нужным пунктом, подскажите пожалуйста: (-url-)

    Ответить
    • admin:
      04.07.2017 в 17:35

      Добрый день.
      Разницы нет что опенкарт что ВП, там чисто цсс. Смотрите, у вас есть файл стилей catalog/view/theme/decao/stylesheet/stylesheet.css

      и там надо строка 6066 исправить на
      #megamenu .mainmenu > li {position:relative;}

      и потом в конце добавить такой стиль

      #megamenu li li.col-md-3{
      display:block;
      float:none;
      margin-bottom:20px;
      vertical-align:top;
      width:100%;
      }

      если трудно найти можно просто в конец забросить эти 2 кода, а дальше уже смотрите сами как вам нужну

    • Павел:
      04.07.2017 в 18:08

      Да, спасибо. Все нашел, исправил))) Еще есть момент: дайте идею как реализовать пункт меню "ткани" и "трикотаж", чтобы они не были такими длинными вниз, а открывались в бок, чтобы все подпункты могли быть видны в одном экране без прокрутки. Как это реализовать? Спасибо.

    • admin:
      05.07.2017 в 10:08

      Как вариант сгрупировать значения и сделать третий уровень меню, чтобы выпадал в сторону. Тогда второй уровень станет немного меньше. Такой вариант меню как тут: многоуровневое выпадающее меню с випадашкой в сторону при наведении

  2. savushka:
    06.04.2017 в 09:56

    Большое спасибо!!!

    Ответить
  3. Лехх:
    08.09.2016 в 21:55

    Спасибо помогло ОЧЕНЬ!

    Ответить
  4. Лиля:
    07.04.2016 в 19:37

    Помогите,пожалуйста! Нам в школе задали сделать сайт по любой теме, разбившись на команды.Я с подругой основное сделала, но выпадающее меню-не могу.Я не понимаю, как подставлять стили CSS.Объясните, пожалуйста.

    Ответить
    • admin:
      08.04.2016 в 09:55

      Вам нужно скопировать хтмл код с первого примера и цсс код. Если все сделать правильно в произвольном месте у вас появится такое же выпадающее меню как у меня на первом примере.
      Потом вам будет достаточно переместить этот код в нужное вам место Хтмл документа.

  5. Ренат:
    15.03.2016 в 18:05

    Проверь горизонтальное меню css у тя там демо не работает.
    И в следующем примере тоже

    Ответить
    • admin:
      22.04.2016 в 17:38

      Добрый день.
      Уточните пожалуйста браузер и его версию, а также операционную систему.

      Комментарий вы оставили с мазилы, под 7 виндой. В этом браузере все демо работают нормально, да в принципе и в остальных браузерах тоже норм.

      Если вы хотели посмотреть демо выпадающее меню css горизонтальное многоуровневое и у вас не получилось это сделать, можно пример скачать к себе на ПК, там пример 100% будет работать.

  6. Андрей:
    29.02.2016 в 19:04

    Доброго времени суток. Во сколько обойдется попросить вас посмотреть мое выпадающее меню и найти причину траблов?
    Вот сайт: (-url-)
    наведите мышкой на горизонтальное меню, часть пунктов перекрывается картинками, как исправить ситуацию не подскажите?
    Спасибо.

    Ответить
    • admin:
      02.03.2016 в 17:58

      Добрый день.
      У вас проблема не с меню, а с позиционированием блоков.
      Для стиля .head сделайте z-index:10; (21 строка в стилях CSS), для стиля .mid z-index:5; на 167 строке и будет все хорошо 🙂

  7. Сергей:
    28.01.2016 в 19:27

    Огромная благодарочка автору !!!
    Скачал у вас примеры горизонтальное выпадающее меню на css. Все отлично работает.
    Искал как сделать многоуровневое меню на вордпресс.
    Хотел подписаться на ваши посты, а подписки нет. Нужно срочно решать проблему 🙂

    за примеры еще раз спасибо.

    Ответить
Сделать заказ
Онлайн помощь по WordPress