Выпадающее меню на CSS
Люди часто используют JavaScript, чтобы сделать выпадающее меню. Но на самом деле это можно сделать на чистом CSS. И в этом уроке вы узнаете, как это сделать.
Принцип работы
Для начала, чтобы вы поняли принцип работы выпадающих элементов, разберём простой пример. Возьмём простой html-код для работы:
[code]<div>Наведи на меня курсор > <div>я — скрытая часть</div></div>[/code]
и применим к этому коду такие стили:
[code lang=»css»] .example_shown {
display:inline-block;
}
.example_hidden {
display:none;
}
.example_shown:hover .example_hidden {
display:inline-block;
}[/code]
В css мы скрыли нужную часть текста, изменив его отображение на display:none;. При наведении курсора (:hover) на родительский элемент .example_shown у дочернего элемента .example_hidden меняется тип отображения на видимый. По такому принципу и строятся выпадающие меню.
Создание выпадающего меню
Теперь займёмся реализацией самого меню. Для его организации воспользуемся тегами списков ul и li
[code]<ul>
<li><a href=»#»>Раздел1</a></li>
<li><a href=»#»>Раздел2</a>
<ul>
<li><a href=»#»>Подраздел1</a></li>
<li><a href=»#»>Подраздел2</a></li>
<li><a href=»#»>Подраздел3</a></li>
</ul>
</li>
<li><a href=»#»>Раздел2</a>
<ul>
<li><a href=»#»>Подраздел1</a></li>
<li><a href=»#»>Подраздел2</a></li>
<li><a href=»#»>Подраздел3</a></li>
<li><a href=»#»>Подраздел4</a></li>
<li><a href=»#»>Подраздел6</a></li>
<li><a href=»#»>Подраздел7</a></li>
</ul>
</li>
</ul>[/code]
Как видно из кода, основной список с id = «menu» у нас будет отвечать за видимые разделы меню. В разделы мы вкладываем ещё один список ul, содержащий в себе выпадающие ссылки при наведении на заголовок раздела меню. Теперь применим к этому набору элементов следующие стили:
[code lang=»css»]/*Обнуляем отступы*/
ul, li {
margin:0;
padding:0;
list-style-type:none;
}
/*Задаём параметры блока, содержащего основное меню*/
display:block;
position:absolute;
top:100px;
left:50px;
}
/*Задаём стили для разделов нашего меню*/
#menu &gt; li {
display:inline-block;
height:20px;
position:relative;
}
/*Стили для скрытого выпадающего меню*/
#menu &gt; li &gt; ul {
position:absolute;
top:20px;
display:none;
}
/*Делаем скрытую часть видимой*/
#menu &gt; li:hover &gt; ul {
display:block;
}[/code]
В данных стилях я хочу акцентировать внимание на четырёх вещах:
- Обратите внимание на этот символ #menu > li в стилях. Он обозначает, что стили будут применяться не ко всем элементам li, расположенным внутри ul#menu, а только к тем, кто является непосредственным потомком тега ul#menu.
- У разделов меню позиционирование изменено на position:relative. Дело в том, что обычный тег с position:absolute ведёт отсчёт координат позиционирования от левого верхнего угла окна браузера. Но если такой тег вложить внутрь тега с position:relative, отсчёт будет вестись от угла этого тега.
Таким образом, мы сможем привязать выпадающие списки не к какой-то координате относительно окна, а к координате относительно раздела основного меню. Собственно top:20px и задаёт смещение по вертикали от верхней границы главного раздела. - Параметр top у #menu > li > ul должен равняться сумме параметров #menu > li таких как height + padding-top + padding-bottom. В данном случае последние два параметра не указаны, их значение наследуется из самого первого стиля и равно нулю. Значение height = 20. Значит отступ у нашего выпадающего списка будет равен 20 + 0 + 0 = 20px
- Когда мы переведём курсор на пункты выпавшего списка (#menu > li > ul > li), каждый элемент li этого списка будет попадать под событие наведения курсора hover. При этом он является вложенным в список ul, который в свою очередь вложен в #menu > li. Событие hover при этом будет передаваться от #menu > li > ul > li всем родительским элементам, в том числе и #menu > li. Из-за этого список не будет схлопываться обратно несмотря на то, что мы не держим курсор непосредственно над #menu > li.
Заключение
Выпадающие списки — довольно удобный способ разместить большое меню на маленьком пространстве. Но у этого способа есть колоссальный минус: он не будет работать на мобильных устройствах. Почему? Потому что у них в принципе нет понятия наведения курсора. У них есть клики, перетягивания. Но наведения курсора нет. Так что не забудьте об этих пользователях и сделайте для них отдельную реализацию меню.
Обратите также внимание
borpost.ru
Вертикальное выпадающее меню на CSS при наведении и многоуровневые меню
Привет всем. Сегодня продолжим нашу тему о выпадающих меню и поговорим о как сделатьЕсли вы попали на этот сайт случайно или искали другое выпадающее меню, советую перейти по ссылке, там собранно множество разных меню для сайта.
Вертикальных менюшек для сайтов довольно много, в этом уроке я покажу вам только вертикальное выпадающее меню на CSS при наведении с выпадашкой вправо и влево, а также многоуровневые выпадающие меню. Другие варианты вертикальных меню для сайта будут описаны в следующих уроках. И так преступим.
Навигация по странице:
В качестве вступления, думаю стоит рассказать принцип работы выпадашек на CSS.
У всех браузеров, которые запущенные с ПК или ноутбука, в CSS доступно свойство :hover (тут я малость неправ, это псевдокласс 🙂 ) на базе которого можно построить практически любое вертикальное выпадающее меню.
А что же делать с мобильными браузерами? — или на планшетах спросите вы.
К счастью, разработчики мобильных браузеров предусмотрели (к сожалению не везде) возможность срабатывания псевдокласса :hover при первом нажатии на ссылку, если оно описано в CSS. Благодаря этим стараниям, большинство пользователей сможет увидеть ваше вертикальное выпадающее меню CSS.
Пара слов о преимуществе выпадающих меню:
- можно вместить очень длинные меню в ограниченное пространство;
- дизайн становится более изящным;
- частично улучшаются поведенческие факторы.
Вертикальное выпадающее меню вправо
к менюПредставляю вашему вниманию первый пример: простое вертикальное выпадающее меню вправо при наведении.
Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.
Html для вертикального меню
Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:
<nav> <ul> <li><a href="#m1">Первая услуга</a></li> <li><a href="#m2">Вторая услуга</a> <ul> <li><a href="#m2_1">Выпадашка 1</a></li> <li><a href="#m2_2">Выпадашка 2</a></li> </ul> </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">Краткая выпадашка</a></li> </ul> </li> <li><a href="#m4">4 услуга</a></li> <li><a href="#m5">5 услуга</a> <ul> <li><a href="#m5_1">111111</a></li> <li><a href="#m5_2">2222 2222</a></li> </ul> </li> <li><a href="#m6">6 услуга</a></li> <li><a href="#m7">7 услуга</a></li> <li><a href="#m8">8 услуга</a></li> </ul> </nav><!--menuVertical-->
Меню для сайта на списках: у некоторых пунктов есть выпадающие блоки, у некоторых нет. Все предельно просто, думаю никаких пояснений не нужно.
Вертикальное выпадающее меню CSS
к менюСо стилями CSS вопрос немного по сложнее. Я вам покажу код только самого меню, а остальные стили вы сможете посмотреть когда скачаете пример.
#menuVertical{width:100%;height:auto;} #menuVertical ul{ display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; } #menuVertical ul li{display:block; width:100%; height:auto; position:relative;} #menuVertical ul li a{ position:relative; display:block; width:100%; height:auto; box-sizing:border-box; font-size:13px; text-transform:uppercase; font-weight:bold; color:#FBF7F7; line-height:1.2em; padding:10px 15px; background:#3A9CD3; border-top:1px solid #236A92; text-decoration:none; } #menuVertical ul li:first-child a{border:0px;} #menuVertical ul li a:hover, #menuVertical ul li:hover a{ background:#0A3CC1; } #menuVertical ul li ul{ position:absolute; top:0px; left:100%; display:none; width:auto; } /*******показываем выпадашку при наведении ********/ #menuVertical ul li:hover ul{display:block;} #menuVertical ul li ul li a{ white-space:nowrap; text-transform:none; padding:5px 20px; } #menuVertical ul li ul li a:hover{ background:#75C1D4; color:#0A3CC1; }
Вот эта строчка CSS
#menuVertical ul li:hover ul{display:block;}
Посмотреть что у нас получилось в этом примере можно на скине:
Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:
Вот такой не сложный пример выпадающего меню у меня получился.
Это еще не конец, идем дальше.
Предположим, что вам нужно сделать выпадающее меню при наведении с выпадашкой влево. На основе примера выпадашки вправо мы сейчас ее и реализуем.
Вертикальное выпадающее меню влево на CSS
к менюХтмл код оставляем прежним, его нет смысла менять. Разве что в самом примере, мне придется поменять местами левый блок и правый, для наглядности примера. (увидите скачав пример в конце)
Стили CSS будут немножко отличаться, хотя не кардинально. В моем простом примере достаточно исправить одно значение. В комментариях, я помечу его.
Для более сложных меню, вам потребуется сделать немножко больше правок. Смотрим стили:
#menuVertical{width:100%;height:auto;} #menuVertical ul{ display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; } #menuVertical ul li{display:block; width:100%; height:auto; position:relative;} #menuVertical ul li a{ position:relative; display:block; width:100%; height:auto; box-sizing:border-box; font-size:13px; text-transform:uppercase; font-weight:bold; color:#FBF7F7; line-height:1.2em; padding:10px 15px; background:#3A9CD3; border-top:1px solid #236A92; text-decoration:none; } #menuVertical ul li:first-child a{border:0px;} #menuVertical ul li a:hover, #menuVertical ul li:hover a{ background:#0A3CC1; } #menuVertical ul li ul{ position:absolute; top:0px; right:100%;/*поменяли здесь*/ display:none; width:auto; } /*******показываем выпадашку при наведении ********/ #menuVertical ul li:hover ul{display:block;} #menuVertical ul li ul li a{ white-space:nowrap; text-transform:none; padding:5px 20px; } #menuVertical ul li ul li a:hover{ background:#75C1D4; color:#0A3CC1; }
Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:
Далее, я хочу показать вам пример, как создать вертикальное многоуровневое меню с выпадашками при наведении.
Вертикальное многоуровневое меню
к менюВ жизни, вертикальные многоуровневые меню выпадающие при наведении встречаются довольно редко. Хотел показать пару примеров из своего загашника, но увы не смог найти. Придется сделать 🙂 . Сложного в этих меню для сайта ничего нет, типичный CSS для выпадашки.
Начнем. Для начала хтмл код. У нас добавится несколько списков ul li для следующих уровней сайта. Мой пример будет на 3 выпадающих подменю, по этому html код будет такой:
<nav> <ul> <li><a href="#m1">Первая услуга</a></li> <li><a href="#m2">Вторая услуга</a> <ul> <li><a href="#m2_1">Выпадашка 1</a></li> <li><a href="#m2_2">Выпадашка 2</a></li> </ul> </li> <li><a href="#m3">Есть выпадашки далее</a> <ul> <li><a href="#m3_2">Выпадашка с третьей услуги 1</a></li> <li><a href="#m3_1">Есть выпадашки далее</a> <ul> <li><a href="#m3_1_1">Есть выпадашка далее</a> <ul> <li><a href="#m3_1_1_1">Пункт 1</a></li> <li><a href="#m3_1_1_2">Выпадашка конец</a></li> <li><a href="#m3_1_1_3">Выпадашка конец</a></li> </ul> </li> <li><a href="#m3_1_2">Нет выпадашки далее</a></li> </ul> </li> <li><a href="#m3_3">Краткая выпадашка</a></li> <li><a href="#m3_4">Краткая выпадашка</a></li> <li><a href="#m3_5">Краткая выпадашка</a></li> </ul> </li> <li><a href="#m4">4 услуга</a></li> <li><a href="#m5">5 услуга</a> <ul> <li><a href="#m5_1">111111</a></li> <li><a href="#m5_2">2222 2222</a></li> </ul> </li> <li><a href="#m6">6 услуга</a></li> </ul> </nav><!--menuVertical-->
Будьте внимательны, только у третьего пункта меню есть многоуровневая выпадашка, у остальных я не делал, дабы не засорять хтмл и так его много.
Далее идут стили, они не сильно отличаются от предыдущих примеров, но все же:
#menuVertical{width:100%;height:auto;} #menuVertical ul{ display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; } #menuVertical ul li{display:block; width:100%; height:auto; position:relative;} #menuVertical ul li a{ position:relative; display:block; width:100%; height:auto; box-sizing:border-box; font-size:13px; text-transform:uppercase; font-weight:bold; color:#FBF7F7; line-height:1.2em; padding:10px 15px; background:#3A9CD3; border-top:1px solid #236A92; text-decoration:none; } #menuVertical ul > li:first-child > a{border:0px;} #menuVertical ul li a:hover, #menuVertical ul li:hover a{ background:#0A3CC1; } #menuVertical ul li ul{ position:absolute; top:0px; left:100%; display:none; width:150px; } /*******показываем выпадашку при наведении ********/ #menuVertical ul li:hover > ul{display:block;} #menuVertical ul li ul li a{ text-transform:none; padding:5px 20px; } #menuVertical ul li ul li a:hover, #menuVertical ul li ul li:hover > a{ background:#75C1D4; color:#0A3CC1; }
Это стили для создания вертикального многоуровневого выпадающего меню вправо при наведении. Вариант с выпадашкой влево будет чуть далее. Смотрим ниже что у нас получилось на рисунке (скин кликабельный):
В режиме демо просмотра наведите на третий пункт, потом на второй, потом на первый – если хотите увидеть работу многоуровневого меню полностью.
Как создать такое же меню с выпадашкой влево?
Сейчас я приведу стиль, который нужно поменять, для создания выпадашки вправо:
На рисунке я показал где он находится:
На втором рисунке можно посмотреть как работает вертикальное многоуровневое меню влево при наведении.
к менюРазумеется, примеры меню довольно простенькие и абстрактные. Обычно верстальщику приходится делать выпадашки со сложной версткой и кучей дров, но на мой взгляд, главное правильно задать выпадающею часть, а стили для красоты меню берутся исходя с дизайна.
На этом у меня все, до новых встреч.
Советую посетить родительскую страницу https://help-wp.ru/vypadayushhee-menu/ с разными вариантами меню, или же просмотреть запись горизонтальное выпадающее меню.
Поделитесь ссылкой со своими друзьями в социальных сетях:
Комментарии к записи «Вертикальное выпадающее меню на CSS при наведении и многоуровневые меню»:
help-wp.ru
Простое и красивое горизонтальное выпадающее меню на CSS и HTML — Технический блог
14 мая 2017 / HTML & CSSПредлагаю, вашему вниманию простое и при этом красивое двухуровневое выпадающее горизонтальное меню на чистых CSS и HTML. Его код я собрал по крупицам и лично адаптировал при подготовке новой темы WordPress.
У меня на сайте оно выглядит так, при наведении мыши на пункт меню «О блоге» выпадает вертикальное подменю:
HTML код горизонтального выпадающего меню
Код горизонтального выпадающего меню выглядит так, это реальный пример взятый с одного из моих сайтов:
<nav role="navigation">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="#">О блоге</a>
<ul>
<li><a href="/about">Об авторе</a></li>
<li><a href="/history">История блога</a></li>
<li><a href="/privacy-policy">Политика конфиденциальности</a></li>
<li><a href="/disclaimer">Отказ от ответственности</a></li>
</ul>
</li>
<li><a href="/sitemap">Карта сайта</a></li>
<li><a href="/contact">Обратная связь</a></li>
</ul>
<nav>
Это классический вариант по структуре меню из комбинаций тегов UL и LI. Который встречается на большинстве сайтов в интернете, в том числе и WordPress.
CSS код стилей для горизонтального выпадающего меню
/*| Navigation |*/
nav{
background: #334; /* Задаем основной фон меню */
padding: 0 3%; /* Задаем внутренние отступы */
}
nav ul {
list-style: none; /* Убираем маркер для элементов списка */
}
nav ul li {
display:inline-block;/*Выстраиваем пункты меню в ряд по горизонтали */
}
nav ul li a {
display:block; /* Настраиваем оформление пунктов меню */
padding: 15px 20px;
font-size: .9em;
color: #eee;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
border-top: 1px solid #445;
}
nav ul li:hover {
background: #445; /* Меняем фон пункта меню при наведении указателя мыши */
}
nav ul li ul {
display: none; /* Прячем пункты выпадающего блока меню */
position:absolute;
background: #334; /* Задаем фон выпадающего блока меню */
}
nav ul li:hover ul {
display:block; /* Отображаем подменю при наведении мыши */
}
nav ul li ul li {
display:block; /* Выстраиваем по вертикали пункты выпадающего меню */
}
Выводы о реализации меню на CSS и HTML
Вот так легко и непринужденно можно сделать горизонтальное выпадающее меню на голом CSS и HTML. К недостаткам решения можно отнести то, что приведенный пример реализует двухуровневое выпадающее меню, то есть когда из горизонтального блока выпадает вертикальный. Если же вам нужно трехуровневое меню, когда из выпавшего вертикального меню необходимо появление еще одного подменю, то предложенное мною решение необходимо доработать.
Так же предложенное решение содержит минимум оформления и требует доработки под дизайн сайта, где оно будет внедряться.
moonback.ru