Html меню для сайта горизонтальное выпадающее меню: Горизонтальное выпадающее многоуровневое меню
Содержание
Создание простого меню для сайта на HTML и CSS
И снова всех приветствую на нашем проекте! Сегодня у нас будет рассмотрен урок на тему создание простого меню для сайта. Тема очень распространенная, но надеюсь Вы сможете для себя, как новичок, получить полезные знания и возможно просто разобраться, как это реализуется.
Данный урок был записан по просьбе одного из наших постоянных читателей, поэтому другие темы и не рассматривались. После чего я, вместе со своим напарником по разработке, Евгением Кузьменко, подготовил для Вас выпадающее меню для сайта. С данным уроком Вы можете ознакомиться, как на сайте прочитав статью, так и по видео уроку, чтобы более детально понять основные принципы реализации выпадающего меню.
Кстати, по поводу создания меню, также рассказывали и в других уроках, например таких как: Создание меню в Битрикс, Делаем меню как в nexus или например, как Адаптивное меню SlickNav, поэтому можете рассмотреть и их, вдруг что-то окажется полезным и пригодится!
Любое CSS меню должно отвечать нескольким требованиям: CSS меню должно быть удобным, компактным, доступным для пользователя. Чтобы меню сайта было компактным и удобным его следует делать выпадающим. Конечно, выпадающее CSS меню не будет корректно работать в старых браузерах таких как IE6. Выпадающее меню удобно тем, что не занимает много места на веб-странице. В данном примере не будет использоваться JavaScript и библиотека JQuery — а это означает, что выпадающее меню будет доступно для пользователей, у которых в настройках браузера отключены скрипты.
И так, сегодня мы создадим горизонтальную навигацию по сайту и вертикальную навигацию, при этом мы будем использовать только HTML и CSS.
Создание CSS меню. Создание выпадающего меню. Шаг 1 — создаем вертикальное HTML меню.
Содержание статьи:
Для начала мы создаем маркированный HTML список при помощи тега <ul> и тега <li>:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Создание CSS меню</title>
</head>
<body>
<span><span><>
</span></span><ul>
<li>Первый пункт</li>
<li>Второй пункт
<ul>
<li>Первый подпункт</li>
<li>Второй подпункт</li>
</ul>
</li>
<li>Третий пункт
<ul>
<li>Первый подпункт</li>
<li>Второй подпункт</li>
<li>Третий подпункт</li>
</ul>
</li>
<li>Четвертый пункт</li>
</ul>
</body>
</html>
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
|
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> <span><span><> </span></span><ul> <li>Первый пункт</li> <li>Второй пункт <ul> <li>Первый подпункт</li> <li>Второй подпункт</li> </ul> </li> <li>Третий пункт <ul> <li>Первый подпункт</li> <li>Второй подпункт</li> <li>Третий подпункт</li> </ul> </li> <li>Четвертый пункт</li> </ul> </body>
</html> |
Примерно должно получиться что-то типа такого списка:
- Первый пункт
- Второй пункт
- Первый подпункт
- Второй подпункт
- Третий пункт
- Первый подпункт
- Второй подпункт
- Третий подпункт
- Четвертый пункт
Конечно, это еще не меню и даже не навигация, поскольку ни один из пунктов HTML списка не является ссылкой. Теперь нужно сделать каждый пункт нашего HTML списка ссылкой. Таким образом, у нас получится вертикальное HTML меню, таблицу стилей (css) мы еще пока не будем трогать и подключать. Чтобы пункты HTML списка стали ссылками, содержимое каждого элемента <li> внутрь тега <a>:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Создание CSS меню</title>
</head>
<body>
div>
<ul>
<li><a href=»#»>Первый пункт</a></li>
<li><a href=»#»>Второй пункт</a>
<ul>
<li><a href=»#»>Первый </a></li>
<li><a href=»#»>Второй </a></li>
<li><a href=»#»>Третий </a></li>
</ul>
</li>
<li><a href=»#»>Третий пункт</a>
<ul>
<li><a href=»#»>Первый подпункт</a></li>
<li><a href=»#»>Второй подпункт</a></li>
</ul>
</li>
<li><a href=»#»>Четвертый пункт</a></li>
</ul>
<div>
</body>
</html>
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
|
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> div> <ul> <li><a href=»#»>Первый пункт</a></li> <li><a href=»#»>Второй пункт</a> <ul> <li><a href=»#»>Первый </a></li> <li><a href=»#»>Второй </a></li> <li><a href=»#»>Третий </a></li> </ul> </li> <li><a href=»#»>Третий пункт</a> <ul> <li><a href=»#»>Первый подпункт</a></li> <li><a href=»#»>Второй подпункт</a></li> </ul> </li> <li><a href=»#»>Четвертый пункт</a></li> </ul> <div> </body>
</html> |
Теперь мы получили вертикальное HTML меню. У тега <a> есть атрибут href, в котором следует указывать адрес страницы, на который будет вести ссылка, у меня нет необходимости этого делать, поэтому в качестве адреса я указал символ # или забой. Ссылки, у которых в качестве значения атрибута href указан #, никуда не ведут. Обратите внимание: вертикальной HTML меню я поместил в контейнер <div>, поскольку в спецификации HTML 4 есть правило: внутри элемента <body> могут находиться только блочные элементы и элементы <ins> и <del>. У тега <div> есть один атрибут id со значением «block». У корневого тега <ul> есть атрибут id со значением «hnav», этот атрибут потребуется нам для создания вертикального и горизонтального CSS меню.
Создание CSS меню. Выпадающее меню. Шаг 2 — создаем горизонтальное CSS меню.
Далее мы будем задавать стили CSS для нашего будущего меню. Для начала, давайте зададим стиль для контейнера <ul> со значением hnav атрибута id, то есть общий стиль для нашего выпадающего меню:
#hnav {
list-style: none;
margin: 0;
padding: 0;
font-size: 1.2em;
float: right;
position: relative
}
|
#hnav { list-style: none; margin: 0; padding: 0; font-size: 1.2em; float: right; position: relative
} |
Давайте коротко пройдемся по CSS свойствам и посмотри для чего они нужны. Первое CSS свойство, которое было задано list-style со значением none, данное свойство позволяет избавиться от мерзких маркеров HTML списка, но только для родительских пунктов вертикального меню, у дочерних HTML элементов маркеры останутся.
Свойство margin делает нулевым отступ от края элемента ul. Свойство paddin убирает внутренние отступы HTML элемента ul. Свойство font-size задает размер текста пунктов нашего CSS меню. Свойство float позволяет выравнять CSS меню, в нашем случае по правому краю. Свойство position со значение relative позиционирует контейнер ul относительно его исходного места.
После того, как мы задали общий стиль для нашего горизонтального меню, можно задать стили для всех родительских пунктов навигации:
#hnav li {
float: left;
position: relative;
}
|
#hnav li {
float: left;
position: relative;
} |
Для каждого элемента li, которые находятся внутри контейнера ul мы задаем два свойства: float со значением left (тем самым мы добиваемся того, что наше CSS меню стало горизонтальным) и опять же, задаем свойство position со значением relative, чтобы элементы заняли свое место.
Теперь мы можем задать стили, для содержимого контейнеров li, то есть стили для пунктов горизонтального CSS меню:
#hnav li a{
float: left;
display: block;
padding: 4px;
text-decoration: none;
color: #666;
text-transform: uppercase;
margin-right: 10px;
}
|
#hnav li a{ float: left; display: block; padding: 4px; text-decoration: none; color: #666; text-transform: uppercase; margin-right: 10px; } |
Свойство display имеет значение block, это говорит нам о том, что пункты нашего CSS меню будут вести себя как блочные (в данном случае контейнеры <a>, тег <a> сам по себе строчный элемент). Свойство padding устанавливает внутренние отступы между пунктами меню, чтобы те не накладывались друг на друга. Значение none свойства text-decoration позволяет убрать подчеркивание у ссылок(меню же из ссылок состоит). Свойство color задает цвет текста внутри контейнера <a>. Свойство text-transform: uppercase; задает начертание текста нашего CSS меню, а именно, весь текст будет написан прописными буквами.
Теперь можно задать то, как будут выглядеть пункты меню при наведение на них курсора мышки:
#hnav li:hover a,
#hnav li a:hover
{
background: #999;
color: #fff;
}
|
#hnav li:hover a, #hnav li a:hover { background: #999; color: #fff; } |
Свойство color изменяет цвет текста пункта меню при наведение на него курсора мыши. Свойство background задает цвет фона пункта CSS меню при наведение курсора на пункт.
Теперь мы можем «спрятать» вложенные пункты меню:
#hnav ul {display: none;}
|
#hnav ul {display: none;} |
После того, как мы «спрятали» пункты выпадающего меню, нужно сделать так, чтобы эти пункты выпадали при наведение курсора:
#hnav li:hover ul {display: block;}
#hnav ul
{
float: none;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
top: 1.8em;
left: 0;
}
#hnav ul li
{
float: none;
clear: none;
margin: 0;
padding: 0;
width: auto;
color: #999;
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
|
#hnav li:hover ul {display: block;}
#hnav ul { float: none; position: absolute; list-style: none; margin: 0; padding: 0; top: 1.8em; left: 0; }
#hnav ul li { float: none; clear: none; margin: 0; padding: 0; width: auto; color: #999; } |
В данном случае мы добились того, что вложенные пункты меню выпадают и немного оформили наше меню, сделали его более читабельным.
После того, как мы задали стили для основных пунктов горизонтального меню, можно задать стили и для вложенных пунктов меню, задать то, как будут выглядеть вложенные пункты меню, как они будут изменяться при наведение на них курсора мыши и то, как будут выглядеть посещенные пункты:
#hnav li:hover ul li a,
#hnav ul li a
{
line-height: 200%;
display: block;
padding: 0 6px 0 0;
float: none;
text-transform: lowercase;
color: #999;
background: none;
}
#hnav li:hover ul li a:hover,
#hnav ul li a:hover
{
background: none;
color: #000;
}
<span>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
#hnav li:hover ul li a, #hnav ul li a { line-height: 200%; display: block; padding: 0 6px 0 0; float: none; text-transform: lowercase; color: #999; background: none; }
#hnav li:hover ul li a:hover, #hnav ul li a:hover { background: none; color: #000; }
<span> |
Как видите, мы создали горизонтальное выпадающее CSS меню, при этом, не используя JavaScript. Можно перейти к созданию вертикального CSS меню.
Так будет выглядеть горизонтальное выпадающее CSS меню:
Горизонтальное CSS меню. Выпадающее CSS меню.
Создание CSS меню. Выпадающее меню. Шаг 3 — создаем вертикальное CSS меню.
Приступим к созданию вертикального CSS меню. Для начала создаем маркированный HTML список, точно такой же, как и для горизонтального меню:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Создание CSS меню</title>
</head>
<body>
div>
<ul>
<li><a href=»#»>Первый пункт</a></li>
<li><a href=»#»>Второй пункт</a>
<ul>
<li><a href=»#»>Первый </a></li>
<li><a href=»#»>Второй </a></li>
<li><a href=»#»>Третий </a></li>
</ul>
</li>
<li><a href=»#»>Третий пункт</a>
<ul>
<li><a href=»#»>Первый подпункт</a></li>
<li><a href=»#»>Второй подпункт</a></li>
</ul>
</li>
<li><a href=»#»>Четвертый пункт</a></li>
</ul>
<div>
</body>
</html>
<span>
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
|
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> div> <ul> <li><a href=»#»>Первый пункт</a></li> <li><a href=»#»>Второй пункт</a> <ul> <li><a href=»#»>Первый </a></li> <li><a href=»#»>Второй </a></li> <li><a href=»#»>Третий </a></li> </ul> </li> <li><a href=»#»>Третий пункт</a> <ul> <li><a href=»#»>Первый подпункт</a></li> <li><a href=»#»>Второй подпункт</a></li> </ul> </li> <li><a href=»#»>Четвертый пункт</a></li> </ul> <div> </body>
</html>
<span> |
Разница только в имени идентификатора для корневого элемента списка <ul>, поскольку для вертикального и горизонтального меню у меня находятся в одном файле.
Теперь можно задать общие стили для отображения CSS меню:
#vnav {
width: 400px;
float: left;
list-style: none;
margin: 0;
padding: 0;
font-size: 1.2em;
}
|
#vnav { width: 400px; float: left; list-style: none; margin: 0; padding: 0; font-size: 1.2em; } |
Единственным отличием от горизонтального меню является то, что мы задаем ширину нашего меню, которая равна 400 пикселов, при помощи свойства width.
Далее задаем стили для всех пунктов HTML списка:
#vnav li
{
clear: both;
height: 2em;
}
|
#vnav li { clear: both; height: 2em; } |
Свойство height задает высоту элементов CSS меню, clear запрещает обтекание вокруг HTML элемента, значение both говорит о том, что ни с левой, ни с правой стороны наше вертикальное меню не будет обтекания.
Теперь мы задаем то, как будут выглядеть родительские пункты вертикального меню, конечно этот стиль будет применен и для подпунктов, но в дальнейшем для них мы зададим свой стиль отображения:
#vnav li a
{
float: left;
display: block;
padding: 4px;
text-decoration: none;
color: #666;
text-transform: uppercase;
margin-bottom: 5px;
margin-right: 10px;
}
|
#vnav li a { float: left; display: block; padding: 4px; text-decoration: none; color: #666; text-transform: uppercase; margin-bottom: 5px; margin-right: 10px; } |
В принципе, стиль отображения пунктов вертикального CSS меню не отличается от стиля для горизонтального меню.
Теперь мы задаем то, как будут отображаться родительские элементы вертикального CSS меню при наведение на них курсора мыши:
#vnav li:hover a,
#vnav li a:hover
{
background: #999;
color: #fff;
}
|
#vnav li:hover a, #vnav li a:hover { background: #999; color: #fff; } |
Теперь мы должны сделать подпункты вертикального CSS меню невидимыми:
#vnav ul {display: none;}
|
#vnav ul {display: none;} |
После чего следует задать CSS правила, по которым подпункты меню будут выпадать при наведение курсора на родительский элемент:
#vnav li:hover ul {display: block;}
|
#vnav li:hover ul {display: block;} |
Теперь нужно сделать так, чтобы список подпунктов нашего CSS меню отображался справа от своих родительских элементов, сразу же избавляемся от мерзких маркеров HTML списка:
#hnav ul
{
list-style: none;
float: left;
margin: 0;
padding: 4px 8px;
}
|
#hnav ul { list-style: none; float: left; margin: 0; padding: 4px 8px; } |
Но мы еще не достигли того, чтобы список подпунктов меню отображался горизонтально, давайте зададим соответствующие CSS правила:
#hnav ul li
{
float: left;
clear: none;
margin: 0;
padding: 0;
width: auto;
height: auto;
color: #999;
}
|
#hnav ul li { float: left; clear: none; margin: 0; padding: 0; width: auto; height: auto; color: #999; } |
Свойство float: left делает отображение подпунктов меню в линию.
А теперь немного изменим стили для подпунктов, зададим CSS правила для отображения подпунктов меню, то, как они будут отображаться при наведение на них курсора мышки:
#hnav li:hover ul li a,
#hnav ul li a
{
display: inline;
padding: 0 6px 0 0;
float: none;
text-transform: lowercase;
color: #999;
background: none;
}
#hnav li:hover ul li a:hover,
#hnav ul li a:hover
{
background: none;
color: #000;
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
#hnav li:hover ul li a, #hnav ul li a { display: inline; padding: 0 6px 0 0; float: none; text-transform: lowercase; color: #999; background: none; }
#hnav li:hover ul li a:hover, #hnav ul li a:hover { background: none; color: #000; } |
Вот так будет выглядеть вертикальное выпадающее CSS меню, которое мы только что создали:
Вертикальное CSS меню. Выпадающее CSS меню.
Исходные коды примеров вы можете скачать на публичных страницах вконтакте: раз и два.
На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)
Как сделать горизонтальное и вертикальное выпадающее меню?
Вы знаете, что я нахожу захватывающим? Как много владельцев веб-сайтов страдают расстройством личности.
Здесь вы, как посетитель веб-сайта, ругаетесь на своем ноутбуке, когда некоторые веб-сайты мешают вам делать или находить вещи.
Но затем вы надеваете шляпу своего владельца сайта и — БАМ — вы совершенно другой человек! Все то, что вы раздражали на других сайтах, теперь гордо живет на ваших!
Я не знаю причину этого специфического поведения, но я знаю, что мы должны вылечить это.
Итак, сегодня я хотел бы поговорить об одной из тех вещей, которые вас раздражают на других сайтах, но все же есть на ваших:
Содержание | Быстрая навигация
Раскрывающиеся вертикальные, горизонтальные меню сайта в навигации.
В частности, зачем вам от них избавляться и какие есть альтернативы.
Давайте начнем с этого:
Заставить пользователей страдать от выпадающего меню — это одно из многих маленьких неудобств, которые в совокупности дают менее эффективный и менее приятный пользовательский опыт. Стоит исправить как можно больше таких раздражителей юзабилити.
Давайте рассмотрим типичные примеры выпадающих меню веб-сайтов, которые сводят ваших посетителей с ума. Они также проиллюстрируют 4 причины, по которым ваше выпадающее меню должно умереть.
4 причины, по которым ваше выпадающее меню должно умереть (и что делать вместо этого).
Причина № 1: Ваши посетители могут пропускать важные страницы.
Представьте, вы попали на этот сайт фрилансера.
Вы хотите узнать о них больше и навести курсор на этот ярлык навигации. Каковы шансы, что вы нажмете на ярлык «Моя история»?
Как меню вредит вашему сайту?
Посетители сайта — люди, а люди — существа привычки. И их привычка — не нажимать на элемент верхнего уровня в раскрывающемся меню, потому что:
- они думают, что элемент верхнего уровня — это не ссылка, а обычный текст, как на многих сайтах
- они отвлекаются на новые вещи, которые только что выпали.
Какая альтернатива выпадающим меню?
Если ваше выпадающее меню состоит из 1-2 пунктов:
- ссылки из раскрывающегося списка сделать элементами навигации верхнего уровня
- или вообще удалите их из вашей навигации и веб-сайта, как правило, хорошая идея.
Причина № 2: Вы заставляете своих посетителей работать на это и вы создали тонкий контент.
По шкале от 0 до 10, насколько вам нравится нажимать «Наша миссия» или «Наши ценности»?
Представь, ты попал на этот сайт.
Какова вероятность того, что вы хотите узнать об их ценностях, миссии и одобрениях?
Но проблема здесь не только в не относящихся к делу подзаголовках. Это намного хуже.
Как выпадающее меню вредит вашему сайту?
1. Вы просите своих посетителей проделать большую работу, чтобы узнать что-то простое,
… что означает, что они не собираются это делать.
Ваши посетители просто хотят узнать о вас больше, щелкнуть где-нибудь и просто прокрутить вниз, читая.
Но неа, ты решил заставить их работать на это!
2. Вы создали страницы с тонким содержанием.
Если вы работаете в одиночку или являетесь небольшим агентством, вы ни за что не сможете рассказать о своих ценностях и миссии настолько, чтобы оправдать создание отдельных страниц.
В этом конкретном примере «О нас» ценности и страницы миссий имеют в среднем по 150 слов каждая. 3 страницы, содержащие всего 150 слов, которые не помогают вашим посетителям.
Не так много вещей, которые убивают энтузиазм ваших посетителей быстрее, чем «Наша миссия» и «Наши ценности».
Поговорите с посетителями вашего сайта как нормальный человек! Или вы так говорите в реальной жизни, когда люди спрашивают вас о вашем бизнесе?
Какая альтернатива горизонтальным и вертикальным меню сайта?
Напишите одну твердую страницу «О программе», где ваши посетители смогут найти все, что вы хотели бы, чтобы они знали, просто прокрутив вниз. Таким образом, шансы, что они на самом деле все прочитают, намного выше.
Но, допустим, у вас нет выпадающего меню для раздела «О нас».
А как насчет услуг?
Причина № 3: Вам трудно найти соответствующую информацию.
Представь, ты попал на этот сайт.
Вы хотите узнать об их услугах, наведите курсор на меню «Услуги», и эта красота исчезнет.
Ваш следующий ход?
Вероятно, нажав на ярлык «Услуги», в надежде попасть на страницу, где вы перечислите перечисленные услуги вместе с дополнительным текстом.
Попался! Нет такой вещи. Это просто текст.
Итак, вам нужно СЕЙЧАС решить, о каких услугах вы хотели бы узнать.
Не быстрое решение, особенно потому, что в 4 из 6 сервисов есть слово «маркетинг».
Но хорошо, вы нажимаете «Маркетинговый аудит» и начинаете читать.
Хотите узнать о других услугах?
Приготовься прокручивать, парить, выбирать и нажимать, мой друг.
Хотите вернуться к первому интересному сервису?
Какой выпадающий элемент был снова? Нет, не этот. Попробуйте еще раз!
Как это вредит вашему сайту?
Ваши посетители могут пропустить услугу, которая им действительно нужна (и вы можете потерять деньги).
Основная проблема здесь в том, что нет выделенного пространства, где ваши услуги привлекают все внимание ваших посетителей.
Вы просите своих посетителей выбрать один из сервисов, пока они окружены остальным сайтом с его визуальными отвлекающими факторами.
Они не могут сосредоточиться так!
Не удивительно, что они не будут проверять многие из ваших сервисных страниц. Может быть, один или два, но это будет так, потому что вы просите их выполнить все упражнения по прокрутке, зависанию, выбору и щелчку.
И это было только на рабочем столе! На мобильном телефоне, если вы не правильно реализуете макет выпадающего меню и не сразу видите элементы подменю, у ваших бедных посетителей сайта будет бесконечный список ссылок:
Какая альтернатива создания выпадающего меню?
Пусть посетители вашего сайта спокойно решат, какие услуги они хотели бы проверить, без давления выпадающего списка или отвлечения на другие ссылки.
Ряд вариантов:
- Создать страницу под названием «Услуги»
- Добавьте в нее свои отдельные сервисы с заманчивым абзацем и визуально заметной ссылкой на соответствующую страницу для каждой услуги.
- В вашей навигации, ссылка только на главную страницу услуг без каких-либо раскрывающихся списков
… Без выпадающего списка под меткой навигации по сервисам, которая ссылается на это:
Причина № 4: Вы сводите посетителей вашего сайта с ума.
Какая альтернатива?
Если вы абсолютно уверены, что вам нужно много ссылок в навигации, и они не помещаются на верхнем уровне, внедрите все свое меню навигации в виде мегаменю.
Не стесняйтесь давать всем ссылкам достаточно места на экране, делая его полноразмерным. Разработайте свое меню, чтобы облегчить сканирование с использованием различных шрифтов и значков.
Что-то вроде этого:
4 альтернативы выпадающему меню, которое улучшит ваш сайт.
- Если у вас есть только один выпадающий элемент:
- либо поместите его как элемент навигации верхнего уровня
- или удали это.
- Если это имеет смысл, объедините информацию на отдельных страницах из раскрывающегося меню и сделайте из нее одну страницу (например, если у вас есть раскрывающееся меню в разделе «О программе» на верхнем элементе навигации).
- Если у вас есть раскрывающееся меню Службы:
- либо используйте только пункт «Услуги» верхнего уровня, который ведет на выделенную страницу «Услуги»
- или, если вы предлагаете только 1-2 услуги, удалите элемент навигации «Службы» и создайте ссылку на соответствующие службы прямо из навигации верхнего уровня.
- Если у вас нет выбора, кроме как предложить своим посетителям множество вариантов навигации, используйте мега-меню.
Что бы вы ни делали, убедитесь, что ваше меню навигации короткое, наглядное и понятное .
Заключительные слова мудрости.
Будьте внимательным к посетителям сайта.
В следующий раз, когда вы проверяете чей-то веб-сайт, чтобы узнать о нем больше или узнать, какова политика компании, обратите внимание на то, какие преимущества веб-дизайна вас раздражают. Какая информация отсутствует. Что трудно читать
Тогда подумайте о своем сайте. Скорее всего, вы делаете те же ошибки.
✔️ Что такое выпадающее меню?
Это меню в верхней навигации сайта которое показывает подкатегории.
✔️ В чем недостатки выпадающего меню?
Пользователи не видят, что скрывается под заголовком. Им требуются дополнительные действия, которые многие не совершают.
✔️ Стоит ли отказаться от выпадающего меню?
Откажитесь от выпадающих меню. Вы прячете от пользователя информацию.
✔️ Что делать если уже есть выпадающее меню?
Обязательно сделайте ссылкой пункт навигации который раскрывает меню.
✔️ Как сделать горизонтальный выпадающий список?
Установите раскрывающийся список, включив раскрывающееся меню атрибута data-dropdown и class в контейнер меню. Внутри тега li элемента ul вы можете создать еще один новый тег ul для создания множества уровней раскрывающегося списка.
✔️ Как создать горизонтальное раскрывающееся меню в HTML?
Используйте любой элемент, чтобы открыть раскрывающееся меню, например элемент button, a или p. Используйте элемент контейнера (например, div), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки. Оберните элемент div вокруг кнопки и div, чтобы правильно расположить раскрывающееся меню с помощью CSS.
✔️ Как изменить горизонтальное меню на вертикальное в редакторе Wix?
Изменение меню сайта с горизонтального на вертикальное в редакторе Wix.
Щелкните свое меню в редакторе.
Нажмите клавишу Delete на клавиатуре.
Щелкните Добавить в левой части редактора.
Щелкните по меню.
Перетащите новое меню на свою страницу.
✔️ Как создать вертикальное раскрывающееся меню в CSS?
Добавьте таблицу стилей и форму или HTML-страницу. Затем на странице HTML или веб-форме . NET добавьте «Div» и назовите его «divMenu».
✔️ Как создать раскрывающееся меню?
На новом листе введите записи, которые должны появиться в раскрывающемся списке. Выберите ячейку на листе, в которой вы хотите открыть раскрывающийся список. Перейдите на вкладку «Данные» на ленте, затем «Проверка данных». На вкладке Параметры в поле Разрешить щелкните Список. Щелкните в поле Источник, затем выберите диапазон списка.
Получить экспертную критику вашего сайта в компании TopUser.Pro
Горизонтальное выпадающего меню на CSS3
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml» xml:lang=»en»>
<head>
<link rel=»stylesheet» href=»/web-developer/css/css/style.css» type=»text/css» media=»all»>
<title>Горизонтальное выпадающее меню на CSS3</title>
</head>
<body>
<div>
<ul>
<li><a href=»#»>Главная</a></li>
<li><a href=»#»>Обучение</a>
<div>
<ul>
<li><a href=»#»>HTML / CSS</a></li>
<li><a href=»#»>JS / jQuery</a></li>
<li><a href=»#»>PHP</a></li>
<li><a href=»#»>MySQL</a></li>
<li><a href=»#»>XSLT</a></li>
<li><a href=»#»>Ajax</a></li>
</ul>
</div>
</li>
<li><a href=»#»>Ресурсы</a>
<div>
<ul>
<li><a href=»#»>PHP</a></li>
<li><a href=»#»>MySQL</a></li>
<li><a href=»#»>XSLT</a></li>
<li><a href=»#»>Ajax</a></li>
</ul>
</div>
</li>
<li><a href=»#»>Страницы</a>
<div>
<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=»#»>Страница 5</a></li>
</ul>
</div>
</li>
<li><a href=»#»>О нас</a></li>
<li><a href=»#»>Каталог</a></li>
<li><a href=»#»>Контакты</a></li>
<li></li>
</ul>
</div>
</body>
</html>
Горизонтальное выпадающее меню Супер плагин WordPress — info-effect.ru
Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете о супер полезном плагине, который позволит вам создать горизонтальное выпадающее меню. Вы сможете вставлять в выпадающее меню любые виджеты, текст, редактор, фото, видео, формы, html код.
Вы сможете полностью настроить внешний вид меню и настроить выпадающее меню. Можно добавить в горизонтальное выпадающее меню до 8 восьми колонок. Можно отключить выпадающее меню для мобильных устройств. Очень гибкий плагин, вы сможете сделать Супер меню!
Установить Супер плагин Max Mega Menu вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Далее, после установки и активации плагина, перейдите на страницу: Mega Menu. Здесь вы сможете настроить основные настройки плагина.
General Settings.
— Click Event Behaviour, поведение при клике. Здесь у вас на выбор два варианта:
- First click will open a sub menu, second click will close the sub menu, первый клик открывает подменю, второе нажатие закрывает подменю;
- First click will open a sub menu, second click will follow the link, первый клик открывает подменю, второй клик по ссылке.
- Оставьте по умолчанию, ничего не меняйте.
— Mobile Menu Behaviour, поведение на мобильном меню,
- Standard — Open sub menus will remain open until closed by the user, Стандарт — открытое подменю будет оставаться открытым, пока его не закроет пользователь.
- Accordion — Open sub menus will automatically close when another one is opened, Аккордеон — открытые подменю будет автоматически закрываться, когда другое открыто.
— CSS Output, оставьте по умолчанию, ничего не надо менять здесь.
— Menu Item Descriptions, включить или отключить описание для пунктов меню.
— Active Menu Instances, Некоторые темы будут выводить расположение меню несколько раз на одной странице. Например, ваша тема может выводить расположение меню после главного меню, затем снова для мобильного меню. Этот параметр можно использовать, чтобы убедиться, что меню Max Mega Menu применяется только к одному из этих экземпляров.
— Сохраните сделанные изменения.
Menu Themes.
— Select theme to edit, здесь указано меню, которое вы будете редактировать. Можно создать и выбрать другое меню.
— Theme Title, заголовок темы меню, оставьте по умолчанию.
— Arrow, можно выбрать стрелку, которая отображается в пункте меню с выпадающим меню.
— Line Height, линия высоты.
— Z Index, показатель Z Index, можно оставить по умолчанию.
— Shadow, можно настроить тень меню.
— Hover Transitions, включить переходы при наведении на пункты меню.
— Reset Widget Styling, отключить стили виджетов Mega Menu.
Menu Bar.
— Menu Height, высота меню.
— Menu Background, цвет фона меню.
— Menu Padding, обивка меню.
— Menu Border Radius, радиус границы меню.
— Menu Items Align, расположение пунктов меню.
— Menu Item Background, цвет фона пунктов меню.
— Menu Item Background (Hover), цвет фона пункта меню при наведении.
— Menu Item Spacing, интервал пунктов меню.
— Font, параметры шрифта, цвет, размер, расположение, семейство и т.д.
— Font (Hover), параметры шрифта при наведении.
— Menu Item Padding, обивка пунктов меню.
— Menu Item Border, параметры границы пункта меню.
— Menu Item Border (Hover), параметры границы пункта меню при наведении.
— Menu Item Border Radius, параметры радиуса границы пункта меню.
— Menu Item Divider, разделитель меню.
— Highlight Current Item, выделять текущий пункт меню.
Mega Menus.
— Panel Background, цвет фона выпадающего меню.
— Panel Width, ширина окна выпадающего меню.
— Panel Padding, обивка.
— Panel Border, цвет и размер границ.
— Panel Border Radius, радиус границы.
— Item Padding, обивка пункта меню в выпадающем меню.
Widgets.
— Heading Font, параметры шрифта заголовка виджета в выпадающем меню.
— Heading Padding, обивка заголовка.
— Heading Margin, отступы от границ заголовка виджета.
— Header Border, параметры границы бордюра.
— Content Font, шрифт в содержании виджета.
Second Level Menu Items.
— Font, шрифт пунктов меню второго уровня.
— Font (Hover), шрифт при наведении.
— Background (Hover), цвет фона при наведении.
— Padding, обивка.
— Margin, отступ.
— Border, бордюр, граница.
Third Level Menu Items. Те же настройки, только для пунктов меню третьего уровня.
Flyout Menus.
— Menu Background, цвет фона выпадающего меню второго или третьего уровня.
— Menu Width, ширина меню.
— Menu Padding, обивка.
— Menu Border, граница.
— Menu Border Radius, радиус границы.
— Item Background, цвет фона пункта меню.
— Item Background (Hover), цвет фона пункта при наведении.
— Item Height, высота пункта меню.
— Item Padding, обивка пункта.
— Item Font, шрифт текста в пункте меню.
— Item Font (Hover), шрифт при наведении.
— Item Divider, разделитель элемента.
Mobile menu.
— Toggle Bar Designer, здесь показано как выглядит меню на мобильных устройствах.
— Responsive Breakpoint, ширина для перехода в мобильное меню.
— Toggle Bar Background, цвет фона кнопки открытия мобильного меню.
— Disable Mobile Toggle, можно отключить переключатель меню.
— Toggle Bar Height, высота переключателя мобильного меню.
— Mega Menu Columns, сколько колонок в выпадающем меню на мобильном сайте.
— Menu Background, цвет фона мобильного меню.
— Menu Item Height, высота пункта меню.
Custom Styling. Здесь можно добавить свои CSS стили для меню.
— Сохраните сделанные изменения.
Menu Locations.
— Registered Menu Locations, здесь вы сможете создавать области меню, в которые потом сможете добавлять меню. Чтобы создать область для меню, нажмите на кнопку — Add another menu location.
Область меню вы сможете добавлять на сайт, с помощью шорткода или php кода.
На странице: Внешний вид — Меню — Управление областями, вы сможете добавить меню для области.
Tools.
— Cache, здесь можно очистить кэш CSS, не обязательно, кэш автоматически очищается при каждом сохранении меню.
— Plugin Data, удалить все данные плагина, сохранённые в базе данных WordPress. Только в случае удаления плагина!
— Export Theme, можно экспортировать тему мега меню в формате JSON или PHP.
— Import Theme, можно импортировать тему мега меню.
Далее, чтобы создать горизонтальное выпадающее меню, перейдите на страницу: Внешний вид — Меню. Слева у вас появится виджет «Max Mega Menu Settings».
— Enable, поставьте здесь галочку, чтобы включить мега меню.
— Event, здесь можно выбрать как будет открываться выпадающее меню.
— Effect, можно выбрать эффект для выпадающего меню.
— Theme, тема меню, по умолчанию.
После включения мега меню, в каждом виджете страницы, при наведении, появится кнопка — Mega Menu. Нажмите на данную кнопку, чтобы настроить выпадающее меню для данного пункта меню.
Далее, у вас откроется окно. Вверху справа нажмите по широкому полю, чтобы выбрать виджет и добавить его в меню. Вверху справа вы можете выбрать сколько будет колонок в выпадающем меню. Виджеты можно распределять по выпадающей панели, можно указать какую часть виджет будет занимать, пример 1/2 или 1/3. Жмите по стрелкам вправо и влево, чтобы указать какую часть будет занимать виджет.
Чтобы открыть и настроить виджет, добавить в него какое-либо содержание и т.д., справа в виджете нажмите на значок ключа. Настройте виджет и сохраните его.
Далее, слева перейдите на вкладку — Settings. Здесь можно настроить дополнительные параметры:
— Hide Text, скрыть текст из пункта меню.
— Hide Arrow, скрыть стрелку.
— Disable Link, отключить ссылку.
— Hide item on Mobile, скрыть пункт меню на мобильных устройствах.
— Hide item on Desktop, скрыть пункт меню на компьютерах.
— Menu item Align, расположение пункта меню.
— Sub Menu Align, расположение меню второго уровня.
— Hide sub menu on Mobile, скрыть меню второго уровня на мобильных устройствах.
— Сохраните изменения.
Далее, слева перейдите на вкладку — Icon. Здесь можно выбрать иконку, которая будет отображаться рядом с пунктом меню.
Всё готово! Сохраните меню, перейдите на сайт и наслаждайтесь результатом!
Внимание! После включение мега меню, стиль вашего меню по умолчанию будет полностью изменён. Вам нужно будет настраивать стиль меню в настройках, на вкладке «Menu Themes».
Остались вопросы? Напиши комментарий! Удачи!
Обновите свой сайт с помощью этих 16 каскадных меню CSS
Каскадные или раскрывающиеся меню необходим практически для любого типа веб-сайта. Особенно те, которые нуждаются во введении данных посетителем, например, что-то столь же простое, как выбор пола или выбор цвета рубашки, которую вы собираетесь купить в нашей электронной коммерции.
Каскадные меню — это другие элементы, которые мы можем обновить на нашем веб-сайте в соответствии с текущими стандартами веб-дизайна. Это прикосновение и эта тонкость, которые добавят качества всей веб-среде, которую мы подготовили для нашего веб-сайта. Ты введение 16 каскадных меню в CSS это пригодится для обновления вашего сайта. Мы помним, что некоторые из них также будут иметь немного JavaScript, не забывая при этом необходимый HTML.
Этот водопад или выпадающее меню состоит из HTML, CSS и JavaScript. Хотя код JavaScript очень короткий. Он соответствует текущему стандарту Material Design в качестве языка дизайна, чтобы включить простую и понятную анимацию водопада с привлекательным внешним видом. При открытии различных пунктов меню появляется графический эффект наведения курсора мыши на них.
Это меню водопада довольно простое, но оно очень элегантный дизайн. У него также есть наведение, чтобы подчеркнуть синий оттенок каждого меню и каскадную анимацию без особой помпы. Он сделан с помощью HTML, CSS и JavaScript (jQuery).
Это раскрывающееся меню в HTML, CSS и JavaScript: вдохновлен одним из лучших веб-сайтов: Stripe (услуга цифровой карты). В меню нет наведения указателя мыши, но есть прекрасно оформленная анимация, которая проясняет наши намерения в отношении дизайна нашего веб-сайта. Незаменим для его качества и идеально подходит для обновления меню вашего веб-сайта.
Это раскрывающееся меню пытается показать использование отложенная анимация каждого из элементов, которые появляются, когда указатель мыши остается в каждом меню. Эффект задержки достигается с помощью нескольких десятых долей задержки, что придает ему особый вид.
Как будто серия карт из колоды, анимация этого водопадного меню для него особенная. Отличный эффект водопада на чистом CSS. Вы уже знаете, что нужно сделать, чтобы внедрить его на своем сайте.
Выпадающее меню поражает анимацией и за этот синий цвет, который выделяется. С постепенным исчезновением и появлением анимации, которая заставляет появляться различные разделы меню. Сделано в HTML, CSS и JavaScript.
Персонализированное и очень краткое раскрывающееся меню, в которое в нем нет недостатка в деталях. Возможно, его простота — лучшее и худшее. Это будет зависеть от того, что вам нужно для вашего сайта и ваших устремлений. Много CSS и немного JavaScript.
Если в предыдущем мы упустили некоторую анимацию и лучший дизайн, это выпадающее меню все должно быть сделано на CSS и JavaScript. Анимация и эффект затенения выделяются оранжевым каждый раз, когда мы оставляем указатель мыши над каждым из разделов. Один из лучших в списке.
Un минималистское водопадное меню и что он разработан исключительно на CSS. Простая анимация, но сделанная хорошо, чтобы не выделяться. Меню, которое остается незамеченным и соответствует современным стандартам дизайна.
Это каскадное меню на чистом CSS — еще один хорошо отличается анимацией это происходит каждый раз, когда мы нажимаем на меню. Анимация сдвигает окно с правой стороны с идеальной синхронизацией. Еще один из самых интересных во всем списке.
Это меню простое по происхождению и состоит из HTML и CSS. Это еще одно из тех меню, которые позволяют нам обновлять этот важный элемент нашего веб-сайта и который не давать много канте. Думаю, мы хорошо понимаем, что мы под этим подразумеваем.
Хотя это уже должно быть выполнено его 4 года, это меню водопада довольно творчески накладывается на то, что находится рядом с ним. Если вы ищете что-то другое, вы можете выбрать это из списка.
Другое меню чисто на CSS и это это довольно красочно, по крайней мере, в настройке, приведенной в примере. С помощью плоских цветов анимация демонстрирует эффект скользящего затвора, который опускает различные разделы выбранного меню. Еще одно из любопытных водопадных меню в списке с хорошо подобранной темой.
В этом раскрывающемся меню используется очень мало JavaScript, достаточно, чтобы автоматически закрыть меню, когда мы перейдем к чему-то другому. Является хорошо сделанное время по эффекту анимации стать одним из лучших в этом плане.
Каскадное меню с анимацией, в котором вряд ли задержка на тысячные второй. Таким образом, он производит на посетителя эффект непосредственности. Эффект наведения и интересное выпадающее меню без особой помпы на общем уровне.
Если вы ищете меню, отличное от всего списка в этом сообщении, в этом раскрывающемся меню есть все, что вы можете найти. В анимация производится зигзагообразно предложить другой тип опыта, немного экспериментального. Он мог бы идеально вписаться в тему видеоигры, поэтому, если у вас есть клиент, который ищет что-то другое, безусловно, это самый подходящий вариант из всего списка. Его наклонные формы и быстрая анимация говорят сами за себя.
Мы оставляем вас с эта серия меню CSS для вашего сайта в котором их очень много.
Горизонтальное выпадающее меню в HTML 5 и CSS 3 | Всё о IT и не только
Несколько лет назад создание выпадающего меню на сайте было кошмаром для веб-мастеров. Без JavaScript-кода, который обычно состоял из нескольких сотен строк, никто бы даже не попытался реализовать такое решение. Сегодня, в эпоху CSS 3, создание выпадающего меню является чистым удовольствием и, что самое главное, нам не нужно использовать никакие скрипты, запущенные на стороне клиента.
Мы начинаем создавать наше меню, конечно же, с создания скелета в HTML 5:
Сам код:
/* задаем цвет фона для контейнера nav. */
nav {
margin: 100px 0;
background-color: E64A19;
}
/* убираем отступы и поля, а также list-style для «ul»,
* и добавляем «position:relative» */
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
/* применяем inline-block позиционирование к элементам навигации */
nav ul li {
margin: 0px -7px 0 0;
display:inline-block;
background-color: E64A19;
}
/* стилизуем ссылки */
nav a {
display:block;
padding:0 10px;
color:FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
/* изменяем цвет фона при наведении курсора */
nav a:hover {
background-color: 000000;
}
После применения стилей у нас должно получиться нечто вроде этого:
Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить <ul> внутрь элемента <li> для пункта, в котором нужно скрыть выпадающий список:
<nav>
<ul>
<li><a href=»»>Home</a></li>
<li><a href=»»>WordPress</a>
<!— первый уровень выпадающего списка —>
<ul>
<li><a href=»»>Themes</a></li>
<li><a href=»»>Plugins</a></li>
<li><a href=»»>Tutorials</a></li>
</ul>
</li>
<li><a href=»»>Graphic Design</a></li>
<li><a href=»»>Inspiration</a></li>
<li><a href=»»>Contact</a></li>
<li><a href=»»>About</a></li>
</ul>
</nav>
Пример навигационной панели меню | WAI-ARIA Authoring Practices 1.1
Пример меню навигации | Практика создания WAI-ARIA 1.1
Следующая реализация
шаблон дизайна для меню
демонстрирует строку меню, которая предоставляет меню навигации по сайту.
Каждый элемент в строке меню представляет собой раздел веб-сайта мифического университета и открывает подменю, содержащее пункты меню, которые ссылаются на страницы в этом разделе.
Подобные примеры включают:
Пример
Специальные возможности
- Поскольку строка меню представляет систему навигации сайта, она заключена в область навигации, реализованную с помощью элемента
nav
, который имеетaria-label
, который соответствует метке на строке меню. - Значки со стрелкой вниз и вправо сделаны совместимыми с режимом высокой контрастности и скрыты от программ чтения с экрана с помощью свойства
содержимого
CSS для визуализации изображений.
Поддержка клавиатуры
Menubar
Ключ | Функция |
---|---|
Пробел Введите |
Открывает подменю и перемещает фокус на первый элемент подменю. |
Стрелка вправо |
|
Стрелка влево |
|
Стрелка вниз | Открывает подменю и перемещает фокус на первый элемент подменю. |
Стрелка вверх | Открывает подменю и перемещает фокус к последнему элементу подменю. |
Дом | Перемещает фокус на первый элемент в строке меню. |
Конец | Перемещает фокус на последний элемент в строке меню. |
Персонаж |
|
Подменю
Ключ | Функция |
---|---|
Пробел Введите |
|
Побег |
|
Стрелка вправо |
|
Стрелка влево |
|
Стрелка вниз |
|
Стрелка вверх |
|
Дом | Перемещает фокус на первый элемент в подменю. |
Конец | Перемещает фокус на последний элемент в подменю. |
Персонаж |
|
Атрибуты роли, свойства, состояния и табиндекса
Menubar
Роль | Атрибут | Элемент | Использование |
---|---|---|---|
меню
|
ul
|
|
|
aria-label = " строка "
|
ul
|
|
|
элемент меню
|
a
|
|
|
tabindex = "- 1"
|
a
|
Делает элементом клавиатуры , но не частью последовательности табуляции. |
|
tabindex = "0"
|
a
|
|
|
aria-haspopup = "true"
|
a
|
Указывает, что в этом пункте меню есть подменю. | |
aria-extended = "true"
|
a
|
Указывает, что подменю открыто. | |
aria-extended = "false"
|
a
|
Указывает, что подменю закрыто. | |
нет
|
ли
|
|
Подменю
Роль | Атрибут | Элемент | Использование |
---|---|---|---|
меню
|
ul
|
Определяет элемент как контейнер меню для набора пунктов меню. | |
aria-label = " строка "
|
ul
|
|
|
элемент меню
|
a
|
|
|
tabindex = "- 1"
|
a
|
Сохраняет фокусируемый элемент a , но удаляет его из последовательности Tab . |
|
aria-haspopup = "true"
|
a
|
Указывает, что у пункта меню есть подменю. | |
aria-extended = "true"
|
a
|
Указывает, что подменю открыто. | |
aria-extended = "false"
|
a
|
Указывает, что подменю закрыто. | |
нет
|
ли
|
|
Исходный код JavaScript и CSS
Исходный код HTML
Шаблон дизайна меню или меню в методиках разработки WAI-ARIA 1.1
Создание раскрывающегося меню навигации с помощью HTML5 и CSS3
Есть несколько отличных решений для раскрывающихся меню навигации, например, плагин jquery superfish.Многие из них используют много файлов и ресурсов для создания раскрывающихся списков, но иногда они вам не нужны. Я хочу показать вам, как создать собственное простое, но стильное раскрывающееся меню, используя новые теги HTML5 и великолепные стили CSS3.
Nav Menu (8185 загрузок)
Раскрывающийся список, который мы собираемся создать, скрывается и открывается при наведении курсора, используя только CSS. Используя новые функции переходов CSS3, мы будем анимировать состояния наведения и раскрывающиеся списки. Эти эффекты действуют точно так же, как эффекты javascript, которые вы использовали.Структура файлов проста. Вам понадобятся файлы index.html и style.css для хранения стилей css.
Вот предварительный просмотр того, что мы построим сегодня:
Начнем со структуры HTML. Это головная часть:
Раскрывающееся меню навигации HTML5 / CSS3
В основной части мы добавим html-код для навигационного меню. Каждый список ul внутри li представляет собой раскрывающееся меню. Я добавил «» к каждому родительскому li, чтобы показать иерархию. Код создает двойные кавычки под прямым углом к элементу.