Как сделать выплывающее меню в css

Выпадающее меню на HTML / CSS без использования JavaScript

Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS .

Dropdown Menu

Вот простой пример меню:

Для построения меню был использован список с классом menu. Подменю сделаны списками с классом submenu.

Теперь давайте минимально оформим наше меню стилями:

Для класса submenu было установлено свойство ‘display: none’. Это позволило на спрятать наше выпадающее меню.

Выпадающее по клику меню на css

Скажите, как сделать выпадающее по клику меню, желательно на css, с такой особенностью: меню убирается не только по нажатию на ссылку, но и на любое место пространства вне этого меню. Пример: такие меню часто встречаются на Яндексе и Гугле.

Выпадающее меню по клику

я однажды реализовывал подобное меню. там смысл достаточно прост: делаем обычное навигационное меню. раз меню выпадающее — делаем первый и второй уровень (допустим). первый уровень отображается всегда, а вот второй скрываем с помощью display: none; . при наведении на определённый пункт меню первого уровня через псевдокласс :hover отображаем ссылки второго уровня. тут правильно задать позиционирование для второго уровня. а также очень важно (это проблема заставила меня долго мучаться) задать для пункта, при наведении на который будет появляться подменю, padding по-больше. чтобы площадь реагирования на наведение увеличить. Для большей наглядности мой код HTML (упрощённый):

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

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

Причём выпадать меню будет в любом нужном Вам направлении.

Эффект раскрытия меню реализован при помощи псевдокласса :hover , а эффект фона — градиентом radial-gradient .

Для создания рамок, основных, и появляющихся при наведении курсора, применены свойства border-radius и box-shadow .

Прочитать о них можно в статье Как делается тень, или найти более подробный теоретический материал в интернете.

А в этой статье я представляю готовый код, который можно скопировать, вставить в редактор Notepad++, и потратив вечерок, сделать под свой вкус, согласно комментариям в коде.

Можно сделать меню более аскетичным, убрав все излишества типа box-shadow и radial-gradient .

А можно сделать ещё круче, применив фоновые изображения и красивые маркеры. В общем полёт для творчества.

А сейчас — горизонтальное выпадающее меню.

Вид в спокойном состоянии:

44

Вид при наведении курсора на пункты меню:

45

Меню CSS

< li class color: #008080;">css ">< a href color: #008080;">http://address post ">Курс CSS< /a >
< ul >
< li >< a href color: #008080;">http://address post ">Урок 1< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 2< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 3< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 4< /a >< /li >
< /ul >
< /li >

< li class color: #008080;">php ">< a href color: #008080;">http://address post ">Курс PHP< /a >
< ul >
< li >< a href color: #008080;">http://address post ">Урок 1< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 2< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 3< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 4< /a >< /li >
< /ul >
< /li >

< li class color: #008080;">js ">< a href color: #008080;">http://address post ">Курс Java Script< /a >
< ul >
< li >< a href color: #008080;">http://address post ">Урок 1< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 2< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 3< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 4< /a >< /li >
< /ul >
< /li >
< /ul >
< /body >
< /html >

Вертикальное меню. Вид в спокойном состоянии:

Выпадающее меню CSS

Вид при наведения курсора на пункты меню:

Выпадающее меню CSS

Меню CSS

< li class color: #008080;">css ">< a href color: #008080;">http://address post ">Курс CSS< /a >
< ul >
< li >< a href color: #008080;">http://address post ">Урок 1< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 2< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 3< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 4< /a >< /li >
< /ul >
< /li >

< li class color: #008080;">php ">< a href color: #008080;">http://address post ">Курс PHP< /a >
< ul >
< li >< a href color: #008080;">http://address post ">Урок 1< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 2< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 3< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 4< /a >< /li >
< /ul >
< /li >

< li class color: #008080;">js ">< a href color: #008080;">http://address post ">Курс Java Script< /a >
< ul >
< li >< a href color: #008080;">http://address post ">Урок 1< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 2< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 3< /a >< /li >
< li >< a href color: #008080;">http://address post ">Урок 4< /a >< /li >
< /ul >
< /li >
< /ul >
< /body >
< /html >

Если нужно чтобы подменю выпадали в другую стороны, нужно в селекторе li ul , в свойстве margin-left , поставить минус в значении.

Теперь остаётся вставить адреса постов в ссылки, и можно пользоваться.

Желаю творческих успехов.


Перемена

Жена говорит мужу:
&#8212; У меня наш сосед просит за деньги&#8230; дать ему с условием.
Муж:
&#8212; Не, ну ты посмотри, во козел, а что за условие?
Жена:
&#8212; Я захожу, раздеваюсь догола, он бросает 10.000 рублей на пол. Я нагибаюсь, подымаю их&#8230; успел-не успел&#8230; одеваюсь и ухожу.
Муж:
&#8212; Ну, за такие бабки и условие плевое, сходи&#8230; Час нет, два, три&#8230; Заходит вся взъерошенная, с тяжелой сумкой&#8230;
&#8212; Во гад-то сосед! Десять тысяч медяками высыпал!

36 комментариев на «Выпадающее меню средствами CSS горизонтальное и вертикальное»

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

Он очень похож на тот, что использован на сайте Амстердам On Air

Здравствуйте, Меня зовут Дмитрий
И у меня вопрос с меню, а как же сделать ссылку из меню с текстом, но так что бы текст появлялся не в отдельной странице, а на этой же странице в отдельном блоке. Правильно ли я понимаю что нужно использовать li и ul
Как пример сайт Амстердам On Air

Можно. Задай им в стилях z-index побольше, и будут сверху. Вот в этой статье https://starper55plys.ru/css/otdelnye-bloki/ есть про то, как блоки друг над другом делать.

Спасибо за статью, хожу на курсы, поэтому новичок, дали задание написать простенький сайт на php используя html и css. Меню сделал сам, потом наткнулся на статью данную, сделал на пункт один подменю, столкнулся с такой проблемой: если пунктов в подменю много, то они прячутся под контент или сайдбар, можно их как-нибудь заставить быть всегда сверху?

Свойство padding. Чтобы не писать огромный ответ, введите это слово в поиск и зайдите на htmlbook.ru. Там всё подробненько о том, что где и как можно увеличить.

Подскажите, пожалуйста, как УВЕЛИЧИТЬ ВЫСОТУ пунктов меню?

Большое вам спасибо.

Форма комментариев вордпресовская, я её не делал. Сайт-то на WordPress. А код меню скинул на почту.

Здравствуйте! А можно и мне выслать код вашего меню? Интересует непосредственно код меню мобильной версии. И еще такой вопрос. Можете подсказать как реализовать систему комментариев, такую же как у вас?

Доброго времени суток Владимир. Чё не подсказать. можно. Только пару моментов проясним. Во-первых, попробуй этот сайт на маленьком экране открыть. Или на мобиле, или на компе сожми, чтоб примерно пикселей 400-500 было. При такой ширине слева вверху под шапкой появляются три чёрточки. При наведении на них курсора появляется моё горизонтальное меню, но уже в вертикальном виде. Примерно такой вариант устроит?

Правда у меня там с рекламой накладка &#8212; недоработка, но суть понятна. Никак руки не дойдут доделать, да и посещений с мобил всего 3% от общего.

И второе. Я не стал кроить шаблон, так как пока слабоват в php, поэтому сделал отдельное меню. То есть по факту меню два. Одно видно от 300 до 640 рх, (то что я сделал), а второе от 640рх (родное меню шаблона). Такой вариант устроит?

И третье. Я могу скинуть тебе код, и подскажу куда в шаблоне его пристроить, но насколько ты силён в html и css? Сможешь ли ты доработать его под свой шаблон?

Если я не совсем верно понял суть вопроса &#8212; уточни.

Дружище, если не сложно, подскажи по меню на сайте. Работаю на движке wordpress. Там меню уже заложено. Все работает норм. Но мне нужно доработать его под мобильные устройства. На компе оно открывается при наведении, а на мобильнике нужно, чтобы открывалось при нажатии. Ну типа какой &#8212; нибудь плюсик сбоку приписать. Не поможешь с вопросом?

Огромное спасибо! Я так долго искала статью(код) , где всё разложено по полочкам. Понятно что за что отвечает. Я не профессионал, но мне доверили вести школьный сайт. Этот материал просто находка.

Пожалуйста. Если что &#8212; спрашивайте.

Спасибо, дружище! Хороший сайт!

Подскажите, на каком движке у Вас сайт. Если на WordPress, то функция многоуровневого меню заложена в нём по умолчанию. Если нужен именно код, то ближе к вечеру.

Здравствуйте!
Пока не нашла решения
меню первого уровня: главная, предметы, галерея
при наведении на &#171;предметы&#187; открываются предметы: математика, химия, языки
(это сделано)
при наведении на &#171;языки&#187; должно открываться &#171;английский&#187;, &#171;немецкий&#187;, &#171;русский&#187;
(не открывается &#8212; открывается все при наведении на &#171;предметы&#187;, а именно
открывается : математика, химия, языки, английский, немецкий, русский

ps пробовала найти сайты, где многоуровневая вложенность меню, но не нашла &#8212; везде только первый уровень вложенности
Спасибо и с уважением &#8230;

А вы разбейте групповой селектор, тот что &#171;пункты меню &#8212; размещение&#187;, на 4 отдельных селектора, и каждому пункту задайте ширину (width), такую, какую хотите. Правда придётся подкорректировать общую ширину блока meny, в селекторе .meny

Подскажите пожалуйста, а как в горизонтальном меню сделать пункты разной ширины?

Отрабатывал вывод категорий на странице среди текста при помощи функции wp_list_categories а нашел функцию wp_dropdown_categories.Меняя атрибуты возможны различные тонкие настройки.Здесь вывожу дочерние категории родительской рубрики 6 -child_of=6. Но вот как выводить код phpсреди текста &#8230;.( вдруг есть информация подскажи) Использовал плагин ,но в режиме визуального редактора слетает код. Искал как создать шорткод для функции wp_list_categories .Но не нашел. Пока для меня оптимальное решение &#8212; нашел плагин виджитирования страницы ( великолепный плагин) и в зону виджета вставляю виджет php и вставляю код. Работает отлично и в любом месте. Вообще то интересно использование код php ,вывожу в сайдбаре изображение или текста при условии такой то страницы или рубрики.

$select = wp_dropdown_categories(&#8216;show_option_none=Выбор категории&show_count=1&orderby=name&echo=0&child_of=6&#8242;);

Раз есть другие списки, то в html, или им, или спискам меню нужно задать класс (class), и в css создавать уже не селектор списка, а селектор этого класса, тогда он не будет ни на что влиять, кроме того элемента, которому задан. Если Вы не знаете как это делается, то вот тут у меня есть пример применения классов, в главе &#171;Жирный и курсивный шрифт&#187;. Только у меня класс задан через <span>, а Вам нужно будет задать его прямо тегам <ul> и <li>

Здравствуйте!
Искал простое меню для технического сайта (html css). Ваше мне понравилось (самое первое), упростил, установил. Но тут возникла проблема. Дело в том, что ul < >и li ul < >в файле css влияет и на другие списки в сайте. Как решить такую проблему?

Спасибо за статью!

Вам нужно познакомиться с фреймворк Bootstrap. С его помощью можно сделать несколько столбиков в Вашем меню. Причём оно будет нормально работать на мобилах, и различных браузерах. Можно конечно и простым html + css, но это гигантский код, и как будет на мобилах &#8212; не знаю.

Оочень помогла статья, очень все понятно и доходчиво, кучу сайтов перерыла чтобы найти, то что бы все понятно было. Меню теперь есть, вертикальное, выпадающее, НО теперь мне нужно чтобы оно было в 2 и более столбцов, т.к. пунктов много и в длину в 1 столбец это не удобно получается. Что можно предпринять чтобы исправить ситуацию?)

В селекторе ul есть свойство width, изменяйте цифры в его значении.

Здравствуйте! Подскаждите как изменить ширину выпадающего меню?

А посмотрите ещё вот тут. Можно сделать плавное появление субменю, как с javascript.

Спасибо большое! Очень помогло Ваше меню. Пыталась сделать самостоятельно с помощью javascript. Ничего не вышло. Наткнулась на Ваш сайт&#8230; Вот это совсем другое дело &#128578; Все легко и все получилось!

HTML можно увидеть если щёлкнуть правой клавишей по странице сайта, и выбрать &#171;Просмотреть код страницы&#187;.

Насчёт реализовать. Если у вас WordPress, то наберите в поиске topmenu-separator, именно этот класс задан меню в вашем примере, и ищите &#171;Разделители (сепараторы) в меню WopdPress&#187;, если другая CMS, то соответственно по названию.

Материал этот есть. Если не ошибаюсь, то такое меню в WP реализуется в консоли, затем небольшая вставка в файле style.css, и ещё небольшая вставка в файле PHP шаблона.

Ага, вот здесь посмотрите.

Здравствуйте. В вашей статье все описано хорошо, но вот проблема возникает если в подменю много пунктов и лента получается длинной. На сайте http://tfilm.tv/ очень хорошо реализована эта проблема путем смещения в право из нескольких колонок (при наведении курсора на пункт фильмы). Подскажите код HTML и CSS чтоб реализовать такое меню.

Ого, это уже не основы. Если не ошибаюсь у Вас Друпал, я же использую только WordPress.
Но инструменты links-block, block-holder и portlet-content &#8212; очень интересные, и я с ними обязательно разберусь, и напишу, как лучше. Правда это потребует времени.
Так что или подождите, или обратитесь на форум.

Подскажите пожалуйста как правильно сделать?

Сейчас у меня в navigation.php :

И в css:
#main .links-block .block-holder, #main .portlet-content
#main .links-block h3, .portlet-title <
background:url(../images/bg-heading-2.gif) repeat-x 0 0;
color:#fff;
height:19px;
line-height:1;
font-size:19px;
padding:6px 3px;
>
#main .links-block ul, .portlet-content ul <
margin:0;
padding:0 0 9px;
list-style:none;

#main .portlet-content meny <
margin:0;
padding:0 0 9px;
list-style:none;

#main .links-block li, .portlet-content li ul < /*Размещаем подменю*/
position: absolute; /*Подменю позиционируются абсолютно*/
display: none; /*Скрываем подменю*/
margin-left: -190px; /*Сдвиг подменю вправо или влево*/
margin-top: -30px; /*Сдвиг подменю вверх или вниз*/
>

#main .links-block li, .portlet-content li a <
padding:0 0 1px 17px;
background:url(../images/bullet.gif) no-repeat 0 6px;
display: block; /*Ссылка*/
margin-bottom: 5px;
text-decoration: none; /*Убираем подчеркивание*/
color: #666; /*Цвет текста*/
border-radius: 5px; /*Закруглённые углы пунктов меню*/
box-shadow: 0px 0px 0px 2px #0ea8f4; /*Рамка пунктов меню*/
background: #7df9ff; /*Фон для старых браузеров*/
background: -moz-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF); /*Переходящий фон (градиент) пунктов меню*/
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(50%,#7df9ff), color-stop(100%,#FBFFFF));
background: -webkit-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF);
background: -o-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF);
background: -ms-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF);

#main .links-block li, .portlet-content li a:hover < /*Ссылки подменю при наведении курсора*/
color: #ffe; /*Цвет текста при наведении*/
box-shadow: 0px 0px 5px 2px #0ea8f4; /*Рамка при наведении*/
background: #009494; /*Фон при наведении*/
background: -moz-radial-gradient(center, ellipse cover, #009494, #FBFFFF); /*Градиент при наведении*/
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#009494), color-stop(100%,#FBFFFF));
background: -webkit-radial-gradient(center, ellipse cover, #009494, #FBFFFF);
background: -o-radial-gradient(center, ellipse cover, #009494, #FBFFFF);
background: -ms-radial-gradient(center, ellipse cover, #009494, #FBFFFF);
>
#main .links-block li, .portlet-content li a:active < /*При нажатии */
color: #ef7a04;
box-shadow: 0px 0px 15px 5px #0ea8f4;
>
#main .links-block li, .portlet-content li:hover ul < /*Подменю при наведении курсора*/
display: block; /*Подменю отображается при наведении курсора*/
>

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

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