Как в css сделать выпадающее меню: Как сделать всплывающее меню при наведении
Содержание
Как Создать Выпадающее Меню CSS
Введение
Для сайта время его загрузки и удобство использования являются одними из самых важных аспектов. Поэтому, вы не должны загромождать ваш сайт дополнительными JavaScript и большими изображениями. Но что, если вы хотите красивое выпадающее CSS меню? Для этого не нужно использовать JavaScript, сегодня выпадающее меню можно сделать используя только CSS. В этом руководстве вы научитесь, как создать выпадающее меню CSS.
Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!
К предложению
Что вам понадобится
Перед тем, как мы начнем это руководство, вам понадобится следующее:
- Доступ к контрольной панели вашего хостинга
Шаг 1 — Создание HTML-файла
Во-первых, вам нужно создать пустой HTML-файл. В этом руководстве мы создадим новый файл под названием menu.html. Для этого мы будем использовать Файловый менеджер. Однако тот же результат может быть достигнут с использованием FTP-клиента (создайте файл menu.html на вашем компьютере и загрузите его на ваш хостинг).
Шаг 2 — Добавление кода HTML меню
Наше меню будет сделано из одного родительского элемента под названием Главное меню и пяти подразделов. Изменяя адрес внутри атрибута href, вы можете связать каждый подраздел с разными страницами вашего сайта. Вы наверное заметили, что каждый элемент имеет разный класс — dropdown, mainmenubtn и dropdown-child. Классы необходимы для применения правил CSS.
<div> <button>Главное меню</button> <div> <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a> <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a> <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a> <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a> <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a> </div> </div>
Вот, как это выглядит без применения каких-либо CSS-правил:
Как вы видите обычное HTML меню не оптимизировано и выглядит не очень красиво. Однако мы применим CSS правила и изменим это в следующем шаге.
Шаг 3 — Как создать выпадающее меню CSS
Мы стилизуем наш HTML код используя следующие CSS правила:
.mainmenubtn {
background-color: red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.mainmenubtn:hover {
background-color: red;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}Как вы видите, класс .dropdown-child имеет CSS правило display: none. Однако, как только пользователь проведет курсором (.dropdown:hover) по родительскому элементу, это правило изменит его отображение на display: block. Это и создаст эффект выпадающего меню.
Ниже представлен финальный результат нашего файла menu.html:
<html>
<head>
<style>
.mainmenubtn {
background-color: red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="mainmenubtn">Главное меню</button>
<div class="dropdown-child">
<a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
<a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a>
<a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a>
<a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
<a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
</div>
</div>
</body>
</html>В этом примере мы используем внутренние таблицы стилей, что означает CSS стили находятся в самом файле HTML. Однако существует множество способов для подключения CSS стилей к HTML документу.
Как только вы закончите, финальный результат должен быть похож на это:
Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.
Заключение
Закончив данное руководство вы научились, как создать выпадающее меню CSS. Код приведенный в данном руководстве достаточно легок и не повлияет на время загрузки вашего сайта.
Выпадающее меню, которое открывается вверх / вверх с помощью pure css
Я создал выпадающее меню с чистым CSS, и я получил его в том месте, которое мне нравится, за исключением того, что я хочу, чтобы это было «drop-up», а не «drop-down», так как строка меню находится в нижней части макета. Что мне нужно добавить или изменить, чтобы сделать его «drop-up»?
#menu * {
padding:0;
margin: 0;
font: 12px georgia;
list-style-type:none;
}
#menu {
margin-top: 100px;
float: left;
line-height: 10px;
left: 200px;
}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;
}
#menu a:hover { background: #B0BD97;}
#menu ul li ul li a:hover {
background: #ECF1E7;
padding-left:9px;
border-left: solid 1px #000;
}
#menu ul li ul li {
width: 140px;
border: none;
color: #B0BD97;
padding-top: 3px;
padding-bottom:3px;
padding-left: 3px;
padding-right: 3px;
background: #B0BD97;
}
#menu ul li ul li a {
font: 11px arial;
font-weight:normal;
font-variant: small-caps;
padding-top:3px;
padding-bottom:3px;
}
#menu ul li {
float: left;
width: 146px;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background: #979E71;
}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;
}
#menu li {
position:relative;
float:left;
}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul {
display:none;
list-style-type:none;
width: 140px;
}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
display:block;
}
#menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;
}
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
}<div>
<ul>
<li><center><a href="X">Home</a></center>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Disclaimer</a></li>
</ul>
</li>
<li>
<center><a href="#">Practice Areas</a></center>
<ul>
<li><a href="#">Civil Law</a></li>
<li><a href="#">Criminal Law ›</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
<li><a href="#">Family Law ›</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
<li><a href="#">Personal Injury ›</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
<li><a href="#">Traffic Offenses ›</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
<li><a href="#">FAQ</a> </li>
</ul>
</li>
<li><center><a href="#">Attorney</a></center>
<ul>
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
</ul>
</li>
<li><center><a href="#">Contact Us</a></center>
<ul>
<li><a href="#">Locations ›</a>
<ul>
<li><a href="#">Rockville Office</a></li>
<li><a href="#">Frederick Office</a></li>
<li><a href="#">Greenbelt Office</a></li>
</ul>
<li><a href="#">Phone Directory</a></li>
<li><a href="#">Mailing Address</a></li>
</ul>
</li>
<li><center><a href="#">Resources</a></center>
<ul>
<li><a href="#">Helpful Links</a></li>
<li><a href="#">Affiliates ›</a>
<ul>
<li><a href="#">Healthcare Providers</a></li>
<li><a href="#">Insurance Companies</a></li>
</ul>
</li></ul>
<li><center><a href="#">News & Events</a></center>
<ul>
<li><a href="#">Press Articles</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Blog</a></li>
</ul>
<li><center><a href="#">Espanol</a></center>
<ul>
<li><a href="#">X</a></li>
</ul>
</ul>
</div>html
css
drop-down-menu
menu
Поделиться
Источник
greysuit
18 октября 2011 в 21:49
2 ответа
- QML: раскрывающееся меню, которое открывается вверх
Мне нужно иметь выпадающий список, который открывается вверх при нажатии на кнопку Меню в QML. Я пытался использовать listview для того же самого, но в реализации мы получаем выпадающий список, который открывается вниз. Любые предложения со ссылкой на приведенный ниже фрагмент. import QtQuick 1.1…
- Как можно отображать пункты меню снизу вверх с помощью CSS
Мое меню работает так, как я хочу, за исключением того, что элементы меню отображаются сверху вниз, как и должно быть снизу вверх. Я попытался изменить свойства CSS, но все еще не могу заставить его работать. Мне нужно, чтобы мой контейнер DIV был выровнен по нижней части родительского контейнера….
71
Добавьте bottom:100% к вашему правилу #menu:hover ul li:hover ul
Демо 1
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
bottom: 100%; /* added this attribute */
}
Или еще лучше, чтобы подменю не имели такого же эффекта, просто добавьте это правило
Демо 2
#menu>ul>li:hover>ul {
bottom:100%;
}
Демо 3
источник: http://jsfiddle.net/W5FWW/4/
И чтобы вернуть границу, вы можете добавить следующий атрибут
#menu>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
}
Поделиться
Joseph Marikle
18 октября 2011 в 22:02
0
Если мы используем выбранный выпадающий список, то мы можем использовать ниже css(Не требуется JS/JQuery)
<select chosen="{width: '100%'}" ng-
model="modelName"
ng-
options="persons.persons as
persons.persons for persons in
jsonData"
ng-
change="anyFunction(anyParam)"
required>
<option value=""> </option>
</select>
<style>
.chosen-container .chosen-drop {
border-bottom: 0;
border-top: 1px solid #aaa;
top: auto;
bottom: 40px;
}
.chosen-container.chosen-with-drop .chosen-single {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-image: none;
}
.chosen-container.chosen-with-drop .chosen-drop {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: none;
margin-bottom: -16px;
}
</style>
Поделиться
Rohit Parte
17 января 2019 в 05:44
Похожие вопросы:
ExtJS-выпадающее меню, которое открывается вверх
Я создал выпадающее меню с ExtJS, и все работает нормально, как и ожидалось. Но я хочу, чтобы это был drop-up, а не выпадающий список, так как строка меню будет располагаться в нижней части окна…
меню rolldown идет вверх
Я хотел бы использовать css, обсуждаемый здесь, но сделать меню свернутым вверх, а не вниз Как создать меню, которое скатывается вниз? CSS
как сдвинуть выпадающее меню вверх
Я не могу сдвинуть свое выпадающее меню вверх… чтобы лучше выровнять его с текстом. Я попробовал margin-top:-10px, но это, кажется, не имеет никакого эффекта. <h2 style=display: inline;>…
QML: раскрывающееся меню, которое открывается вверх
Мне нужно иметь выпадающий список, который открывается вверх при нажатии на кнопку Меню в QML. Я пытался использовать listview для того же самого, но в реализации мы получаем выпадающий список,…
Как можно отображать пункты меню снизу вверх с помощью CSS
Мое меню работает так, как я хочу, за исключением того, что элементы меню отображаются сверху вниз, как и должно быть снизу вверх. Я попытался изменить свойства CSS, но все еще не могу заставить его…
Css выпадающее / всплывающее меню с полями внизу
У меня есть простое выпадающее меню css, которое расположено в нижнем колонтитуле и имеет направление вверх-fiddle: http://jsfiddle.net/RmTpc/11 / я хотел бы, чтобы открытое меню имело некоторое…
Выпадающее меню MaterializeCSS идет вверх
Я использую выпадающее меню из MaterializeCSS http://materializecss.com/dropdown.html , но я хочу, чтобы это меню открывалось вверх, а не вниз. Могу ли я сделать это с помощью опций или мне придется…
Как сделать выпадающее при наведении меню и стрелки вверх, используя чисто css?
Как сделать выпадающее меню при наведении с использованием чистого css без javascript? Таким образом, при наведении кнопки появится выпадающий список со стрелкой вверх. подобный этому:
Поверните вверх или вниз с помощью jQuery
У меня есть простое выпадающее меню, которое открывается символом треугольника (каретки). Мне нужно повернуть каретку вверх ногами (на 180 градусов), когда меню открыто, и вернуться в положение по…
Как заставить меню открываться вверх в выпадающем списке с возможностью поиска?
У меня есть код html ниже Выпадающий—> О Основа Блог Контакт Обычай Поддержка Инструменты Его в основном взяли с этого сайта…
Cоздание выпадающего меню на HTML и CSS просто
Автор статьи: admin
В этой статье мы разберём, как происходит создание выпадающего меню на HTML, CSS и JavaScript.
Также, если вы вообще не знаете как делать меню, то посмотрите статью: Меню навигации на HTML и CSS, там вы научитесь создавать простое меню навигации.
Создание горизонтального выпадающего меню:
Сперва на HTML и CSS сделаем выпадающее меню которое будет проявляться при наведении мышки, вот его HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <header> <nav> <ul> <li><a href=»#»>Главная</a></li> <li>Галерея <ul> <li><a href=»#»>Машины</a></li> <li><a href=»#»>Горы</a></li> <li><a href=»#»>Компьютеры</a></li> </ul> </li> <li>О себе <ul> <li><a href=»#»>Имя</a></li> <li><a href=»#»>Аватарка</a></li> </ul> </li> </ul> </nav> </header> |
Тут всё как в обычном меню, если вы читали статью про то как сделать меню навигации, единственное что отмечу, это то, что обязательно меню должно находится в теги <nav>, для лучшей индексации.
Теперь перейдём к CSS, но сначала мы не будем делать прям выпадающие меню, оно просто при наведении мыши, будет просто появляться, вот и всё.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | html, body { margin: 0; padding: 0; }
nav > ul { display: flex; margin: 0; width: 100%; background-color: green; }
nav > ul > li { margin-right: 20px; }
li { color: white; list-style: none; font-size: 20px; }
li a { color: white; text-decoration: none; }
li > ul{ display: none; position: absolute; background-color: tomato; padding: 0; }
li:hover > ul{ display: block; } |
В самом начале, мы убираем отступы со всего документа, чтобы, меню было чётко прибито ко краям страницы.
Дальше настраиваем внешний вид, делаем FlexBox и задаём отступы, самое главное, что нужно сделать, это тегам <ul>, которые находятся внутри тега <li>, сделать позиционирование absolute и добавить ему свойство display: none, что бы блок не показывался на экране.
Последнее важное изменение, это при наведении мышкой на <li>, внутри которого есть <ul>, он появлялся, вот что получилось.
Такое латовый вариант получился, теперь сделаем так, что бы меню выпадало с анимацией, а не просто появлялась, для этого не много изменим стили.
Примечание:
Тут покажу только те селекторы, которые изменим, а не весь CSS, так как, там добавилось не много.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | nav > ul { display: flex; margin: 0; width: 100%; height: 25px; background-color: green; }
li > ul{ position: absolute; top: 40px; visibility: hidden; opacity: 0; background-color: tomato; padding: 0; transition: 400ms; }
li:hover > ul{ visibility: visible; top: 25px; opacity: 1; } |
В первом селекторе мы добавляем высоту, чтобы было проще менять позицию, во втором, добавляем позицию top равного 45 пикселем, также устанавливаем свойство visibility: hidden, которое отвечает за скрытие элемента, и opacity: 0, для прозрачности, значение ноль, означает что элемент полностью прозрачен.
В последнем селекторе который мы изменяем, который ещё отвечает за наведение мышки, убираем display и добавляем visibility: visible, для показа элемента, top равный 25 пикселям и opacity: 1, для полной не прозрачности.
Также появилось свойство transition, для плавных переходов, мы задаём ему время перехода 400 миллисекунды.
Вывод:
В этой статье мы рассказали о создание выпадающего меню на HTML и CSS, если вам что то не понятно, то посмотрите наш учебник по HTML и CSS.
Подписываетесь на соц-сети:
Оценка:
Количество оценивших: 1
Средняя оценка: 5,00
Загрузка…
Поделится:
Пока кнопок поделиться нет
Также рекомендую:
Выпадающее меню на HTML / CSS без использования JavaScript
Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство веб-девелоперов используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS.
Вот простой пример HTML-кода меню:
<ul>
<li><a href=#>Menu 1</a>
<ul>
<li><a href=#>Sudmenu 1</a></li>
<li><a href=#>Sudmenu 1</a></li>
<li><a href=#>Sudmenu 1</a></li>
</ul>
</li>
<li><a href=#>Menu 2</a>
<ul>
<li><a href=#>Sudmenu 2</a></li>
<li><a href=#>Sudmenu 2</a></li>
<li><a href=#>Sudmenu 2</a></li>
</ul>
</li>
<li><a href=#>Menu 3</a>
<ul>
<li><a href=#>Sudmenu 3</a></li>
<li><a href=#>Sudmenu 3</a></li>
<li><a href=#>Sudmenu 3</a></li>
</ul>
</li>
<li><a href=#>Menu 4</a>
<ul>
<li><a href=#>Sudmenu 4</a></li>
<li><a href=#>Sudmenu 4</a></li>
<li><a href=#>Sudmenu 4</a></li>
</ul>
</li>
<li><a href=#>Menu 5</a>
<ul>
<li><a href=#>Sudmenu 5</a></li>
<li><a href=#>Sudmenu 5</a></li>
<li><a href=#>Sudmenu 5</a></li>
</ul>
</li>
</ul>
Для построения меню был использован список с классом menu. Подменю сделаны списками с классом submenu.
Теперь давайте как-нибудь минимально оформим наше меню стилями:
body {
font: 14px 'Verdana';
margin: 0;
padding: 0;
}
ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
ul:after {
display: block;
content: ' ';
clear: both;
float: none;
}
ul.menu > li {
float: left;
position: relative;
}
ul.menu > li > a {
display: block;
padding: 10px;
color: white;
background-color: red;
text-decoration: none;
}
ul.menu > li > a:hover {
background-color: black;
}
ul.submenu {
display: none;
position: absolute;
width: 120px;
top: 37px;
left: 0;
background-color: white;
border: 1px solid red;
}
ul.submenu > li {
display: block;
}
ul.submenu > li > a {
display: block;
padding: 10px;
color: white;
background-color: red;
text-decoration: none;
}
ul.submenu > li > a:hover {
text-decoration: underline;
}
Для класса submenu было установлено свойство ‘display: none’. Это позволило на спрятать наше выпадающее меню.
Теперь добавим в CSS такой код:
ul.menu > li:hover > ul.submenu {
display: block;
}
Это позволит показывать подменю при наведении.
Вот и все. Просто и легко без JavaScript.
Плавно открывающееся меню с помощью CSS. Вертикальное выпадающее меню на css: как его сделать
От автора:
всех приветствую. Почему-то выпадающее меню у веб-мастеров ассоциируется со скриптами, но уже давно сделать такую навигацию можно абсолютно спокойно на чистом css. Причем такое меню будет ничем не хуже. Сегодня я вам покажу, как создать в css выпадающее меню. Поделюсь, так сказать, рецептом.
План урока и разметка нашего меню
В общем-то, сначала определимся с тем, как будем создавать само меню. В html5 стандартным способом считается создавать его в контейнере nav с помощью маркированного списка. Давайте именно так и сделаем. Маркеры мы позже уберем с помощью css, в меню они нам совершенно не нужны.
Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.
Тут есть важный момент, который заключается в том, что вам, возможно, не нужно каждый пункт делать выпадающим, а лишь некоторые. Без проблем, тогда в пунктах без выпадения просто не создаем вложенных списков.
Собственно, вот она, вся разметка:
Пункт1 Подпункт Подпункт Подпункт Пункт2 Подпункт Подпункт Подпункт Пункт3 Подпункт Подпункт Подпункт Пункт4 Подпункт Подпункт Подпункт |
Я понимаю, что она огромна. В этом-то и проблема вложенных списков, что требуется писать много кода. Но учитывайте тот факт, что мы делаем 4 основных пункта и для каждого будет выпадающее меню.
Собственно, я задал всей навигации идентификатор nav, а всем вложенным спискам – стилевой класс second, чтобы понимать, что они являются вложенными.
Отлично, разметка у нас готова, можно посмотреть на результат:
Да уж, выглядит ужасно. Но сейчас мы включим в работу css и уже через несколько минут наша навигация преобразится. Давайте работать.
Пишем css-стили
Первое, что я сделаю, это сброшу все отступы по умолчанию для всех элементов. Они нам будут только мешать, лучше зададим потом отступы сами, где это понадобится.
*{
margin: 0;
padding: 0;
}
margin padding |
#nav{
height: 70px;
}
#nav ul{
list-style: none;
}
#nav{ height #nav ul{ list |
Теперь нам нужно, собственно, решить, каким будет наше меню. Горизонтальным или вертикальным? Я предлагаю сначала сделать горизонтальное и посмотреть все на его примере. Для этого нужно написать такие стили:
#nav > ul > li{
float: left;
width: 180px;
position: relative;
}
#nav > ul > li{ float width position |
Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.
Но вы, конечно, можете делать по-другому, в согласии со своей задумкой. Вы можете сделать так, чтобы все пункты были в одну строчку.
В любом случае, вышеприведенный код, я надеюсь, вы понимаете. Он заставляет пункты главного списка прижиматься к левому краю, так что все они встают в одну строку, хотя и являются блочными элементами. Также я задал им явную ширину и относительное позиционирование.
Для чего позиционирование? Оно необходимо для того, чтобы потом абсолютно позиционировать вложенные списки. Если вы изучали позиционирование в css, то наверняка знаете, что если задать блоку относительное позиционирование, то все элементы в нем можно будет позиционировать абсолютно внутри именно этого блока, а не всего окна браузера.
Тем временем, вот что у нас уже получилось:
По этому скриншоту вы можете уже представить себе примерный результат. Конечно, нам еще предстоит красиво оформить пункты, чтобы глаза не умоляли о пощаде при просмотре навигации.
#nav li a{
display: block;
background: #90DA93;
border: 1px solid #060A13;
color: #060A13;
padding: 8px;
text-align: center;
text-decoration: none;
}
#nav li a:hover{
background: #2F718E;
}
#nav li a{ display background border color padding text text #nav li a:hover{ background |
Во-первых, сами ссылки нужно сделать блочными. Это необходимо для того, чтобы работали внутренние отступы и корректно применялись все свойства. Далее указываю цвета фона, текста, параметры рамки, внутренние отступы и выравнивание текста по центру. Наконец, отменяю подчеркивание ссылок.
Все эти параметры не обязательно прописывать так, как это сделал я. Цвета вы можете выбрать произвольно, рамку сделать другую или вообще не использовать, отступы можно уменьшать или увеличивать.
Заметьте, что в данном случае мы не использовали знак >, поэтому указанные правила применятся ко всем ссылкам, в том числе и тем, что находятся во вложенных пунктах. Итак, теперь имеем следующее:
Отлично, но ведь вы понимаете, что подпункты не должны быть видно, они должны раскрываться при наведении на нужный пункт. Без этого наше меню похоже на таблицу. Что ж, самое время спрятать вложенные пункты.
#nav li .second{
display: none;
position: absolute;
top: 100%;
}
#nav li .second{ display position top |
Во-первых, скрываем полностью вложенные списки. Во-вторых, задаем им абсолютное позиционирование и координату top: 100%. Это означает, что выпадающее меню будет отображаться четко под основным пунктом, которому принадлежит, четко под 100% высоты этого пункта.
Теперь мы видим на веб-странице только основное меню, что нам и нужно.
Реализуем выпадение
Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:
#nav li:hover .second{
display: block;
}
#nav li:hover .second{ display |
Этот код будет работать безукоризненно. При наведении на пункт основного меню, вложенный список будет становиться видимым. Причем только тот список, что вложен в пункт, на который наводится курсор.
Есть только одна незначительная проблема – ширина вложенных пунктов не соответствует ширине основных. Но это очень легко решается дописыванием соответствующих стилей:
#nav li li{
width: 180px;
}
#nav li li{ width |
Все, проблема решена:
Все работает отлично. При наведении на основной пункт появляется соответствующее ему выпадающее меню. Если убрать курсор в сторону – оно пропадает. Если перевести курсор на сами вложенные пункты, то можно будет по ним кликнуть и перейти в нужный раздел сайта. Таким образом, мы сделали с вами очень простое и легкое выпадающее меню абсолютно без скриптов.
Переделываем меню в вертикальное
Ну хорошо, с горизонтальной навигацией мы с вами полностью разобрались, но ведь помимо нее на сайтах очень часто встречается и вертикальная и она тоже может быть выпадающей. На самом деле переделать меню с горизонтального на вертикальное очень легко, нам придется изменить буквально пару строк кода.
Во-первых, вам нужно будет убрать float:left у главных пунктов списка. Именно это свойство способствует тому, что наши пункты отображаются в одну строку, но зачем нам это, если навигация должна быть вертикальной?
Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:
#nav li .second{
display: none;
position: absolute;
left: 100%;
top: 0;
}
#nav li .second{ display position left top |
То есть необходимо прописать две координаты вместо одной. Во-первых, в случае с горизонтальной навигацией я говорил, что по задумке пункты вложенных меню должны отображаться под основными пунктами. В случае с вертикальным меню это не подходит – пункты должны отображаться сбоку.
Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.
Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.
Горизонтальное меню с несколькими уровнями
Используя примерно такой же подход вы можете создать больше уровней меню, если это сильно необходимо. Например, давайте создадим для четвертого пункта главного меню список, который будет вложен в один из подпунктов.
Михаил
сб, 09/20/2014 — 12:28
Что-то мой комментарий не виден — дублирую:
===========
Спасибо, но у меня (под Инт.Экспл-8) меню не выпадает. Т.е. не работает строка «ul.nav
li:hover ul {display: block;}»
Подскажите, в чем дело?
Есть пожедания по изложению материала:
Хорошо бы в этой строке (ul.aaaaa li:hover ul {display: block;}) растолковать, какая ее часть отвечает за «выпадение меню», а какая — за скрывание пунктов более глубокого уровня вложенности
Хорошо бы в примерах каждую строку снабжать комментарием, что она делает.
В частности, неясно, зачем нужна строка «
Вертикальное выпадающее меню на 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 при наведении и многоуровневые меню»:
Как сделать выпадающее меню списком?
Как вариант так:
HTML
<h2>Vertical Submenu</h2> <nav> <ul> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a> <ul> <li><a href="#">Deep Menu 1</a> <ul> <li><a href="#">Sub Deep 1</a></li> <li><a href="#">Sub Deep 2</a></li> <li><a href="#">Sub Deep 3</a></li> <li><a href="#">Sub Deep 4</a></li> </ul> </li> <li><a href="#">Deep Menu 2</a></li> </ul> </li> <li><a href="#">Sub Menu 5</a></li> </ul> </li> </ul> </nav>CSS
#primary_nav_wrap { margin-top:15px } #primary_nav_wrap ul { list-style:none; position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul a { display:block; color:#333; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif } #primary_nav_wrap ul li { position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul li.current-menu-item { background:#ddd } #primary_nav_wrap ul li:hover { background:#f6f6f6 } #primary_nav_wrap ul ul { display:none; position:absolute; top:100%; left:0; background:#fff; padding:0 } #primary_nav_wrap ul ul li { float:none; width:200px } #primary_nav_wrap ul ul a { line-height:120%; padding:10px 15px } #primary_nav_wrap ul ul ul { top:0; left:100% } #primary_nav_wrap ul li:hover > ul { display:block }https://jsfiddle.net/rrub99sy/
student_aPnalwdy
Как создать раскрывающееся меню в HTML
В HTML мы можем легко создать раскрывающееся меню в документе Html, используя следующие различные способы:
- Использование HTML-формы
- Использование внутреннего CSS
Использование HTML-формы
Если мы хотим создать раскрывающееся меню в документе Html с помощью формы, мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко создать раскрывающееся меню:
Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать форму для создания раскрывающегося меню.
<Голова>
<Название>
Создайте выпадающее меню с помощью HTML-формы
<Тело>
Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе.
И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html.