Разное

Как сделать выпадающее меню html: Простое выпадающее меню — htmllab

03.04.2021

Содержание

Как создать выпадающее меню при помощи CSS3

На этом уроке мы создадим выпадающее меню на чистом CSS3, которое вы можете найти в Impressionist UI от Владимира Кудинова.

Шаг 1 — HTML-разметка


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

<ul>

 <li><a href=»#»>My dashboard</a></li>
 <li><a href=»#»>Likes</a></li>
 <li><a href=»#»>Views</a>

 <ul>
 <li><a href=»#»>Documents</a></li>
 <li><a href=»#»>Messages</a></li>
 <li><a href=»#»>Sign Out</a></li>
 </ul>

 </li>
 <li><a href=»#»>Uploads</a></li>
 <li><a href=»#»>Videos</a></li>
 <li><a href=»#»>Documents</a></li>

</ul>

Шаг 2 — Макет меню


Мы начнем с удаления полей, отступов, границ и контуров всех элементов меню. Затем мы установим фиксированную ширину и высоту для меню, закругленные углы и CSS3-градиенты. Для выравнивания ссылок горизонтально, мы установим для списка float:left. Нам также необходимо установить относительное позиционирование (position: relative), это нам нужно для выравнивания подменю.

 .menu,
.menu ul,
.menu li,
.menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}

.menu {
 height: 40px;
 width: 505px;

 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

.menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}

Мы временно скроем подменю, чтобы оно нам не мешало при написании стилей для первого уровня меню.

 .menu ul { display: none; }

Шаг 3 — Ссылки меню


Для стилей ссылок меню мы добавим некоторые базовые свойства CSS, такие как шрифты, цвета, отступы и т.д. Затем мы добавим темную тень для текста и цветовые переходы для создания плавного эффекта, когда цвет будет меняться при наведении курсора. Для создания разделителя ссылок добавим border слева и справа, а затем удалим левый border для первой ссылки и правый border для последней ссылки. При наведении курсора мыши мы только изменим цвет текста.

 .menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;

 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;

 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;

 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);

 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #8fde62; }

Шаг 4 — Подменю


Прежде всего, давайте удалим эту строку кода, которую мы добавили на втором шаге.

 .menu ul { display: none; }

Теперь мы зададим стили для подменю. Подменю мы разместим в 40px от верхней границы и 0px от левой границы пункта меню и добавим закругленные углы снизу. Установим прозрачность равную 0, а при наведении мыши будем изменять её до 1.

 .menu ul {
 position: absolute;
 top: 40px;
 left: 0;

 opacity: 0;
 background: #1f2024;

 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;

 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;

 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;

 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}

.menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}

Установим ширину ссылок подменю равную 100px. В качестве разделителя добавим нижнюю границу для ссылок, а для последней ссылки удалим её.

 .menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;

 border: none;
 border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; }

В конце нам осталось только добавить иконки для каждой ссылки подменю. Для этого мы создадим специальный класс для каждой ссылки и добавим фоновое изображение.

 .menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

Демонстрация


Перевод статьи с designmodo.com

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

сделать выпадающее меню на CSS и HTML.

Задача

Создать выпадающее меню инструментами CSS и HTML.

Решение

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

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
        ul.menu{
            padding: 3px;       /* убираем отступы */
            margin-top: 50px;   /* для красоты отодвигаю вниз */
            text-align: center; /* выравниваю элементы спаска по центру */
        }
        ul.menu > li{
            list-style: none;	    /* убираем маркеры списка */
            display: inline-block;	/* разещаем списки горизонтально */
            background-color: #D87171;
            padding: 5px 15px;
        }
        /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
            color: #FFFFFF;
            text-decoration: none;
        }
        /* устанавливаем стиль ссылок при наведении курсора */
        ul.menu > li > a:hover{
            text-decoration: underline;
        }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a></li>
</ul>

</body>
</html>

У нас получился список такого вида:

Рисунок 1. Подготовительные работы.

Обратите внимание: стиль ссылки меняется при наведении на неё курсора. Это реализовывается с помощью псевдокласса :hover. Этот псевдокласс задаёт стиль элемента при наведении на него курсора, при этом кнопка мыши не нажата. Если есть нажатие кнопки — это уже другой псевдокласс.

Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта «Услуги», добавим выпадающие разделы: «Купить», «Продать», «Обменять». Эти пункты — это отдельный список, который вложен в тег <li>

Создадим этот список и добавим стили, описывающие его внешний вид.

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
    ul.menu{
        padding: 3px;       /* убираем отступы */
        margin-top: 50px;   /* для красоты отодвигаю вниз */
        text-align: center; /* выравниваю элементы спаска по центру */
    }
    ul.menu > li{
        list-style: none;	    /* убираем маркеры списка */
        display: inline-block;	/* разещаем списки горизонтально */
        background-color: #D87171;
        padding: 5px 15px;
    }
    /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
        color: #FFFFFF;
        text-decoration: none;
    }
    /* устанавливаем стиль ссылок при наведении курсора */
    ul.menu > li > a:hover{
        text-decoration: underline;
    }
    /* устанавливаем стиль для внутреннего меню */
    .menuInner{
        list-style: none;
        padding: 4px;
        border: 1px solid #000000;
        border-radius: 5px;
        background-color: #FFFFFF;
        text-align: left;
    }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li>Купить</li>
			<li>Продать</li>
			<li>Обменять</li>
		</ul>
	</li>
</ul>

</body>
</html>

Теперь у нас получился такой список:

Рисунок 2. Подготовительные работы.

Безусловно, это не то, что нам нужно. По умолчанию этот список должен быть скрыт и становиться видимым только при наведении мыши. Скрыть элемент можно при помощи правила правила {display: none}. А при наведении курсора его нужно активировать сделав снова видимым правила {display: inline-block}.

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
    ul.menu{
        padding: 3px;
        margin-top: 50px;
        text-align: center;
    }
    ul.menu > li{
        list-style: none;
        display: inline-block;
        background-color: #D87171;
        padding: 5px 15px;
    }
    /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
        color: #FFFFFF;
        text-decoration: none;
    }
    /* устанавливаем стиль ссылок при наведении курсора */
    ul.menu > li > a:hover{
        text-decoration: underline;
    }
    /* устанавливаем стиль для внутреннего меню */
    .menuInner{
        display: none; /* делаем невидимым */
        list-style: none;
        padding: 4px;
        border: 1px solid #000000;
        border-radius: 5px;
        background-color: #FFFFFF;
        text-align: left;
    }
    /* делаем видимым при наведении курсора на блок li */
    .menu > li:hover > .menuInner{
        display: block;
    }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li>Купить</li>
			<li>Продать</li>
			<li>Обменять</li>
		</ul>
	</li>
</ul>

</body>
</html>

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

Чтобы элемент отображался не влияя на отображение других элементов, его нужно спозиционировать со значением absolute.

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
    ul.menu{
        padding: 3px;
        margin-top: 50px;
        text-align: center;
    }
    ul.menu > li{
        position: relative;         /* добавляем позиционирование */
        list-style: none;
        display: inline-block;
        background-color: #D87171;
        padding: 5px 15px;
        height: 20px;               /* добавляем высоту */
    }
    /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
        color: #FFFFFF;
        text-decoration: none;
    }
    /* устанавливаем стиль ссылок при наведении курсора */
    ul.menu > li > a:hover{
        text-decoration: underline;
    }
    /* устанавливаем стиль для внутреннего меню */
    .menuInner{
        display: none; /* делаем невидимым */
        list-style: none;
        padding: 4px;
        border: 1px solid #000000;
        border-radius: 5px;
        background-color: #FFFFFF;
        text-align: left;
    }
    .menu > li:hover > .menuInner{
        display: block;
        position: absolute;
        top: 30px;
        left: 0;
    }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li>Купить</li>
			<li>Продать</li>
			<li>Обменять</li>
		</ul>
	</li>
</ul>

</body>
</html>

Что мы тут сделали:

  1. Добавили в родительский элемент <li> правило позиционирования {position: relative;}. Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана.
  2. Добавили в родительский элемент <li> правило {height: 20px;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.
  3. Установили абсолютное позиционирование {position: absolute;} выпадающему списку и установили координаты: top и left.

Теперь выпадающее меню работает корректно.

Рисунок 3. Окончательный вариант.

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

Учебная задача решена. Пока.

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

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

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

Привожу HTML-код:

<ul>
  <li>
    <a href="#">Главная</a>
  </li>
  <li>
    <a href="#">Меню 1</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="#">Подменю4</a>
      </li>
      <li>
        <a href="#">Подменю 5</a>
      </li>
      <li>
        <a href="#">Подменю 6</a>
      </li>
      <li>
        <a href="#">Подменю7</a>
      </li>
      <li>
        <a href="#">Подменю 8</a>
      </li>
    </ul>
  </li>
</ul>

И CSS-код:

ul.menu {
  display: inline-block;
  margin: 0;
  padding: 0;
}
ul.menu li {
  float: left;
  list-style: none;
}
ul.menu li a {
  display: block;
  padding: 8px 20px 10px;
  text-decoration: none;
}
ul.menu li ul {
  display: none;
  padding-left: 10px;
}
ul.menu li:hover ul {
  display: block;
  position: absolute;
}
ul.menu li:hover ul li {
  float: none;
}
ul.menu li:hover ul li a {
  padding: 6px 0 8px;
}

Безусловно, здесь дан чуть ли не минимум свойств. Чтобы это всё украсить, нужно менять стили. Что касается HTML-кода, то он идентичен и для горизонтального, и для вертикального меню.

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

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

  • Создано 06.03.2013 04:25:07
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Плавно открывающееся меню с помощью CSS

Осуществим нашу задумку с помощью самого обычного CSS. В следующей статье, если не забуду, то опишу этот же эффект с помощью jQuery. Но а пока, давайте приступим к разбору данного метода. Но, сначала предложу посмотреть, что получится в итоге:





Первым делом, давайте напишем HTML код нашего меню. Меню будет простейшим. Для примера у него будет 2 пункта у каждого из которых будет выпадающий список с подпунктами.


<nav>
	<ul>
		<li>
		<a href="#">пункт 1</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>
			</ul>
		</li>

	</ul>
</nav>

Думаю тут все понятно, самое простое 2-х уровневое меню. Как и говорил, меню имеет два главных пункта, можете добавить сколько угодно, если нужно. Дальше нужно просто добавить стили, которые и сделают всю магию 🙂


#slow_nav > ul{
	width: 500px;
	margin:25px auto 0;
}

#slow_nav > ul > li{
	list-style: none;
	display: inline-block;
	position:relative;
	padding:0;
}

#slow_nav a{text-decoration:none;}

#slow_nav > ul > li > a{
	font-size:18px;
	padding:5px;
	background-color:#333;
	color:#fff;
}

#slow_nav li ul{
	position:absolute;
	list-style:none;
	text-align:center;
	top:15px;
	font-size:15px;
	left:0;
	margin:0;
	padding:0;

/* Данные строки нужны для правильной работы анимации */
	max-height:0px;
	overflow:hidden;
	-webkit-transition:max-height 0.4s linear;
	-moz-transition:max-height 0.4s linear;
	transition:max-height 0.4s linear;
/* конец */
}

#slow_nav li:hover ul{
	max-height:300px;
}

#slow_nav li ul li{
	background-color:#333;
	border-bottom:1px solid #888;
}

#slow_nav li ul li:last-child{
	border-bottom:none;
}

#slow_nav li ul li a{
	padding:5px 12px;
	color:#fff;
	display:block;
}

#slow_nav li ul li:hover{
	background-color:#444;
}

#slow_nav li ul li:first-child{
	margin-top:25px;
	position:relative;
}

#slow_nav li ul li:first-child:before{
	content:'';
	position:absolute;
	width:1px;
	height:1px;
	border:5px solid transparent;
	border-bottom-color:#333;
	left:10px;
	top:-10px;
}

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

Первым делом это сама анимация. Нужный код выделен комментариев в коде — /* Данные строки нужны для правильной работы анимации */. Удалять из нельзя, в противном случаи анимация перестанет работать. В данном отрезке кода, изначально мы задаем высоту в ноль пикселей —

max-height:0px; и прописываем свойство overflow:hidden;, чтобы скрыть наше дочернее меню, то есть выпадающее. Дальше уже прописываем кроссбраузерное свойство transition, которое совершит анимацию.


-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;

Тут можете изменить разве что время анимации. В данный момент время задано 0.4 секунды. Сразу после того как задали анимацию, добавлено свойство , для задания новой высоты при наведении на главные пункты меню:


#slow_nav li:hover ul{
	max-height:300px;
}

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

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

Данный способ можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress. Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.

На этом все, спасибо за внимание. 🙂

CSS: Выпадающее меню с задержкой

Обычное выпадающие css-меню сделанное с помощью переключения display:none;/display:block; повешенного на hover обладает двумя раздражающими недостатками:

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

Пример такого меню:

<ul>
    <li>
        <a href="#">item</a>
        <ul>
            <li>subitem 1</li>
            <li>subitem 2</li>
        </ul>
   </li>
</ul>
 
<style>
.menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu .menu-item {
    float: left;
    margin: 0 1px 0 0;
    padding: 0;
    background: #E1E1E1;
}
.menu .menu-item a {
    display: block;
    padding: 5px 10px;
}
.menu .submenu {
    display: none; /* По умолчанию скрываем подменю */
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #E1E1E1;
}
.menu .menu-item:hover .submenu {
    display: block; /* Показываем подменю при ховере */
}
.menu .submenu-item {
    margin: 0;
    padding: 5px 10px;
}
</style>

Демо

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

Весь фокус в свойстве transition, а точнее его подсвойстве transition-delay, которое позволяет добавить задержку перед показом анимации:

.menu .submenu {
    opacity: 0; /* По умолчанию скрываем подменю */
    visibility: hidden;
    transition-property: opacity, visibility; /* Важно чтобы transition применялось к обоим свойствам */
    transition-duration: 0.2s; /* Добавляем анимацию 0.3 сек. */
    transition-delay: 0.15s; /* Добавляем задержку в 0.15 сек. */
}
.menu .menu-item:hover .submenu {
    opacity: 1; /* Показываем подменю при ховере */
    visibility: visible;
}

Демо

Поскольку анимацию нельзя вешать на display, то для скрытия подменю приходится использовать связку opacity:0; visibility:hidden;.

Похожие записи

Выпадающие элементы. Компоненты · Bootstrap. Версия v4.0.0

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

Обзор

Выпадающие элементы — это переключаемые, контекстные элементы поверхностного наложения для отображения списков ссылок и т.п. Они интерактивны благодаря плагину JavaScript в BS4. Функциональность toggle в выпадающих элементах запускается по клику, а не по наведению – это сделано умышленно.

Выпадающие элементы «построены» на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js.

Если вы компилируете наши JS файлы, необходим util.js.

Доступность

Стандарт WAI ARIA описывает и определяет виджет role="menu" как настоящий виджет, но лишь для меню «а-ля приложение», запускающих действия или функции. Меню ARIA могут содержать лишь пункты меню, чекбоксы, «радио-кнопки», группы «радио-кнопок» и подменю.

Выпадающие элементы Bootstrap, с другой стороны, спроектированы для решения множества задач и могут работать в разных структурах разметки. Например, можно создать выпадающие элементы, содержащие дополнительные поля ввода и элементы контроля форм, такие как поиск или поле ввода логина. По этой причине BS4 не «ожидает» (и не добавляет автоматически) ни один из атрибутов (role и aria-), необходимых для меню согласно стандарту ARIA.

Однако Bootstrap всегда добавляет встроенную поддержку для большинства стандартных взаимодействий меню и клавиатуры, таких как возможность двигаться через отдельные элементы класса .dropdown-item кнопками курсора на клавиатуре и закрывать меню кнопкой ESC.

Примеры

Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом .dropdown или другим элементом с position: relative;. При необходимости выпадающие элементы можно запускать из элементов <a> или <button>.

Выпадающие элементы одинарных кнопок

Любую одинарную кнопку .btn можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами <button>:

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
  <div aria-labelledby="dropdownMenuButton">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

А вот так — с <a> элементами:

<div>
  <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Выпадающая ссылка
  </a>

  <div aria-labelledby="dropdownMenuLink">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

Самое забавное, что это можно сделать с любым из вариантов кнопок: «главная, вторичная, успех, инфо, предупреждение, опасность»:

Предупреждение
<!-- Example single danger button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Выпадающие элементы кнопок с разделенными зонами

По такому же принципу создавайте выпадающие элементы в кнопках с разделенными зонами, используя почти такую же разметку, как в пункте выше, но с добавлением класса .dropdown-toggle-split для правильного спейсинга вокруг выпадающего элемента.

Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг padding с обеих сторон выпадающей «каретки» и удаляет margin-left, добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.

Главная Toggle Dropdown Вторичная Toggle Dropdown Успех Toggle Dropdown Предупреждение Toggle Dropdown Опасность Toggle Dropdown
<!-- Example split danger button -->
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Размеры

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

<!-- Large button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Large button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Small button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

«Выпадающий вверх»

Добавьте класс .dropup и выпадающий элемент будет «выпадать» вверх.

Split dropup Toggle Dropdown
<!-- Default dropup button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

«Выпадающий вправо»

Добавьте класс .dropright и выпадающий элемент будет «выпадать» вправо.

Split dropright Toggle Dropdright
<!-- Default dropright button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div>
  <button type="button">
    Split dropright
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropright</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

«Выпадающий влево»

Добавьте класс .dropleft и выпадающий элемент будет «выпадать» влево.

<!-- Default dropleft button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div>
  <div role="group">
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span>Toggle Dropleft</span>
    </button>
    <div>
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button">
    Split dropleft
  </button>
</div>

Исторически содержимым выпадающих элементов всегда были ссылки, но BS4 изменил это. Сейчас вы можете использовать в качестве содержимого выпадающих элементов <button>, а не только <a>.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div aria-labelledby="dropdownMenu2">
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

По умолчанию выпадающее меню автоматически расположено в 100% от вершины и на левой стороне родителя. Добавьте класс .dropdown-menu-right к элементу класса .dropdown-menu для выравнивания выпадающего меню по правой стороне.

Внимание! Выпадающие элементы позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в navbar).

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

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

<div>
  <h6>Dropdown header</h6>
  <a href="#">Action</a>
  <a href="#">Another action</a>
</div>

Разделяйте группы родственных элементов меню разделителем.

<div>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
  <div></div>
  <a href="#">Separated link</a>
</div>

Расположите форму внутри выпадающего меню, и используйте утилиты паддинга или марджина для ее уплотнения.

<div>
  <form>
    <div>
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" placeholder="[email protected]">
    </div>
    <div>
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" placeholder="Password">
    </div>
    <div>
      <input type="checkbox">
      <label for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit">Sign in</button>
  </form>
  <div></div>
  <a href="#">New around here? Sign up</a>
  <a href="#">Forgot password?</a>
</div>
<form>
  <div>
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" placeholder="[email protected]">
  </div>
  <div>
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" placeholder="Password">
  </div>
  <div>
    <input type="checkbox">
    <label for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit">Sign in</button>
</form>

Добавьте класс .active к элементу выпадающего меню для его стилизации как «активированного».

<div>
  <a href="#">Regular link</a>
  <a href="#">Active link</a>
  <a href="#">Another link</a>
</div>

Добавьте класс .disabled к элементу выпадающего меню для его стилизации как «деактивированного».

<div>
  <a href="#">Regular link</a>
  <a href="#">Disabled link</a>
  <a href="#">Another link</a>
</div>

Использование

Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса .show элемента родительского списка. Атрибут data-toggle="dropdown" отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.

На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ($.noop) mouseover к непосредственным «детям» элемента <body>. Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.

Через атрибуты

Добавьте к ссылке или кнопке атрибут data-toggle="dropdown" для скрытия\показа выпадающего элемента.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div aria-labelledby="dLabel">
    ...
  </div>
</div>

Через JS

Управляйте выпадающими элементами с помощью JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown" still required

Независимо от того, управляете вы выпадающим элементом через JavaScript или атрибутами, атрибут data-toggle="dropdown" всегда необходим в элементе, запускающем выпадающий элемент.

Параметры

Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к data- как в data-offset="".

Название Тип По умолч. Описание
offset number | string | function 0 Смещение выпадающего элемента относительно его триггера. См. отступы Popper.js
flip boolean true Позволяет выпадающему элементу «перевернуться», если произошло перекрытие другого элемента. Больше информации: flip docs.
boundary string | element ‘scrollParent’ Граница ограничения переполнения выпадающего меню. Принимает значения 'viewport', 'window', 'scrollParent' или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации preventOverflow от Popper.js.

Обратите внимание, что если для boundary установлено значение, отличное от 'scrollParent', позиция position: static применяется к контейнеру .dropdown.

Методы

Метод Описание
$().dropdown('toggle') Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом.
$().dropdown('update') Обновляет позицию «выпадения» элемента.
$().dropdown('dispose') Уничтожает выпадающий элемент.

События

Все события выпадающих элементов наступают в родительском элементе класса .dropdown-menu и несут свойство relatedTarget, значение которого равно элементу «якоря» (ссылка, т.е. <a>), запускающего функциональность toggle.

Событие Описание
show.bs.dropdown Это событие наступает немедленно по вызову экземпляра метода show.
shown.bs.dropdown Это событие наступает, когда выпадающий элемент стал видимым юзеру (будет ждать завершения CSS-переходов).
hide.bs.dropdown Это событие наступает немедленно по вызову экземпляра метода hide.
hidden.bs.dropdown Это событие наступает, когда выпадающий элемент стал невидимым юзеру (будет ждать завершения CSS-переходов).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Как сделать выпадающее меню на чистом CSS с нуля

Сейчас, уже довольно распространенная практика использовать выпадающее меню на сайтах. Чтобы реализовать такую задачу, можно использовать несколько способов, но я расскажу про самый простой, это меню без использования JavaScript / Jquery

Расписывать тут все прям до тонкостей не буду, но расскажу про основное.

HTML

Для начала сделаем HTML- структуру нашего выпадающего меню

<ul> <li><a href=#>Menu 1</a> <ul> <li><a href=#>SubMenu 1</a></li> <li><a href=#>SubMenu 1</a></li> <li><a href=#>SubMenu 1</a></li> </ul> </li> <li><a href=#>Menu 2</a> <ul> <li><a href=#>SubMenu 2</a></li> <li><a href=#>SubMenu 2</a></li> <li><a href=#>SubMenu 2</a></li> </ul> </li> <li><a href=#>Menu 3</a> <ul> <li><a href=#>SubMenu 3</a></li> <li><a href=#>SubMenu 3</a></li> <li><a href=#>SubMenu 3</a></li> </ul> </li> <li><a href=#>Menu 4</a> <ul> <li><a href=#>SubMenu 4</a></li> <li><a href=#>SubMenu 4</a></li> <li><a href=#>SubMenu 4</a></li> </ul> </li> <li><a href=#>Menu 5</a> <ul> <li><a href=#>SubMenu 5</a></li> <li><a href=#>SubMenu 5</a></li> <li><a href=#>SubMenu 5</a></li> </ul> </li> </ul>

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

<ul>

    <li><a href=#>Menu 1</a>

        <ul>

            <li><a href=#>SubMenu 1</a></li>

            <li><a href=#>SubMenu 1</a></li>

            <li><a href=#>SubMenu 1</a></li>

        </ul>

    </li>

    <li><a href=#>Menu 2</a>

        <ul>

            <li><a href=#>SubMenu 2</a></li>

            <li><a href=#>SubMenu 2</a></li>

            <li><a href=#>SubMenu 2</a></li>

        </ul>

    </li>

    <li><a href=#>Menu 3</a>

        <ul>

            <li><a href=#>SubMenu 3</a></li>

            <li><a href=#>SubMenu 3</a></li>

            <li><a href=#>SubMenu 3</a></li>

        </ul>

    </li>

    <li><a href=#>Menu 4</a>

        <ul>

            <li><a href=#>SubMenu 4</a></li>

            <li><a href=#>SubMenu 4</a></li>

            <li><a href=#>SubMenu 4</a></li>

        </ul>

    </li>

    <li><a href=#>Menu 5</a>

        <ul>

            <li><a href=#>SubMenu 5</a></li>

            <li><a href=#>SubMenu 5</a></li>

            <li><a href=#>SubMenu 5</a></li>

        </ul>

    </li>

</ul>

Все что мы сделали, создали основной список, с классом menu и дальше, в каждую li мы положили новые списки, которые являются нашими подменю, так же это можно понять и по классу который мы им присвоили submenu

CSS

Добавим немного стилей для меню и сделаю все магию появления выпадающего меню

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; } ul.menu > li:hover > ul.submenu { display: block; }

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

38

39

40

41

42

43

44

45

46

47

48

49

50

51

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;

}

ul.menu > li:hover > ul.submenu {

    display: block;

}

Немного внесу пояснения, чтобы вам было понятнее как это работает. Все элементам с классом submenu мы присвоили значение display: none. И теперь нам необходимо сделать что бы при наведении на одну из li главного меню, появлялось подменю. Это мы сделали при помощи таких стилей:

ul.menu > li:hover > ul.submenu { display: block; }

ul.menu > li:hover > ul.submenu {

    display: block;

}

Они и позволяют видеть подменю при наведении.

Так же прочитайте статью, Как сделать выпадающее меню на чистом CSS

 

Если у вас есть вопросы, пишите в комментарии, буду рад помочь.
Чтобы не пропустить выход новых статей, подписывайтесь на мой telegram-канал

Как создать раскрывающееся меню в CSS

Что такое выпадающие списки?

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

Примеры:

    

Затем вы должны настроить классы в CSS следующим образом:

 .падать {
  положение: относительное;
  дисплей: встроенный блок;
}

.dropbtn {
  цвет фона: красный;
  отступ: 10 пикселей;
}

.dropdown-content {
  дисплей: нет;
  позиция: абсолютная;
}

.dropdown: hover .dropdown-content {
  дисплей: блок;
}  

Вам нужны отдельные классы div для создания кнопки и еще один div для разделения списка того, что содержит кнопка.

Пример

    
  # myNav1 {
    высота: 0;
    ширина: 50%;
    положение: фиксированное;
    z-индекс: 6;
    верх: 0;
    слева: 0;
    цвет фона: #ffff;
    переполнение: скрыто;
    переход: 0.3с;
    непрозрачность: 0,85;
}

# myNav2 {
    высота: 0;
    ширина: 50%;
    положение: фиксированное;
    z-индекс: 6;
    внизу: 0;
    справа: 0;
    цвет фона: #ffff;
    переполнение: скрыто;
    переход: 0,3 с;
    непрозрачность: 0,85;
}

.overlay-content {
    положение: относительное;
    ширина: 100%;
    выравнивание текста: центр;
    маржа сверху: 30 пикселей;
}

# myNav1-content {
    верх: 12%;
    осталось: 5%;
    дисплей: нет;
}

# myNav2-content {
    верх: 12%;
    справа: 10%;
    дисплей: нет;
}  

Подробнее о раскрывающихся списках CSS:

Простое раскрывающееся меню с CSS

Выпадающее меню — довольно распространенная функция, особенно на веб-сайтах с большим количеством страниц.Это отличный способ организовать ваш веб-сайт и отфильтровать посетителей туда, куда вы бы хотели, чтобы они пошли. Существует множество способов реализовать этот тип меню с использованием множества приемов, функций Javascript и так далее. В рамках этого поста вы увидите, как создать это, используя только HTML и CSS. Этот вариант очень легкий и хорошо работает.

Раскрытие раскрывающегося меню

При создании навигации по сайту это может выглядеть примерно так:

 

  

Это отличное начало.Чтобы этот метод работал, вам нужно будет вложить еще один элемент

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

     
      

    Теперь о CSS

    Это весь HTML, который вам нужен.Все просто, правда? Проблема в том, что в приведенном выше коде раскрывающееся меню будет отображаться и потенциально может испортить вашу навигацию верхнего уровня. К счастью для вас, некоторые быстрые дополнения к вашему CSS могут решить эту проблему.

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

  • .

     
    nav li {
       дисплей: встроенный блок;
       тип-стиль-список: нет;
       положение: относительное;
    }
    
    nav li ul {
       дисплей: нет;
       позиция: абсолютная;
       ширина: 100 пикселей;
       слева: 0;
       верх: 100%;
       маржа: 0;
       отступ: 0;
    }
    
    nav li: hover> ul {
       дисплей: блок;
    }
    
    nav a {
       отступ: 5 пикселей 10 пикселей;
       цвет: #fff;
       выравнивание текста: центр;
       фон: # 000;
       высота: 20 пикселей;
       дисплей: блок;
    }
      

    И снова все! С помощью этого кода у вас есть горизонтальная навигация с функционирующими раскрывающимися меню.Здесь следует отметить несколько моментов: расположение раскрывающегося меню и принцип работы при наведении курсора. Для того, чтобы раскрывающееся меню стало видимым при наведении курсора без воздействия на другие элементы на странице, когда это происходит, для позиционирования установлено значение position: absolute .

    Кроме того, обычно, когда вы добавляете : hover к элементу, это тот элемент, который получит указанное изменение. В данном случае вы не хотите, чтобы наведение курсора на элемент

  • запускало изменение вложенного
      .Это то, что означает > в этой строке: nav li: hover> ul . Здесь утверждается, что при наведении курсора на
    • запускайте внутри него
        .

        Вот и все!

        Это весь код, необходимый для создания раскрывающихся меню. Это не только быстро и просто, но и будет работать в старых браузерах.

        Вот как все получилось:

        Как создать [для начинающих]

        Хотите узнать, как настроить раскрывающееся меню WordPress?

        В этой статье мы шаг за шагом проведем вас через создание раскрывающегося меню со скриншотами!

        Вы можете делать все с помощью основных функций WordPress — нет необходимости в сторонних плагинах.Давайте погрузимся в…

        Как создать раскрывающееся меню WordPress с основными функциями

        Вашим первым шагом должно быть подтверждение того, что ваша тема поддерживает раскрывающиеся меню. К сожалению, не все темы поддерживают раскрывающееся меню. Например, тема Hestia включает встроенные функции для создания как раскрывающихся, так и мегаменю.

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

        Если это так, то вы можете воспользоваться самым популярным способом создания раскрывающегося меню WordPress (и одним из самых простых).

        Еще лучше? Если вы решили создать раскрывающееся меню в WordPress с помощью параметра меню по умолчанию, вам не нужно беспокоиться об исчезновении меню при переключении темы или добавлении новых плагинов!

        Для начала перейдите в панель управления WordPress и нажмите Внешний вид> Меню.

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

        Если у вас еще нет меню, введите имя в поле Имя меню , а затем нажмите кнопку Создать меню . Настоящее имя не имеет значения — просто запомните:

        .

        Шаг 2: Добавьте ссылки в меню

        После того, как вы создали меню, самое время добавить ссылки.

        Чтобы добавить ссылки на свой контент, используйте боковую панель, чтобы отметить, какие страницы или сообщения вы хотите отображать в своем меню.Выбрав контент, который хотите добавить, нажмите кнопку Добавить в меню .

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

        Теперь у вас должен быть список всех пунктов меню. Чтобы создать раскрывающееся меню, вы можете использовать перетаскивание, чтобы переместить элементы, которые вы хотите отобразить в раскрывающемся списке. «Родительский» пункт появится в главном меню. И пункты меню под родительским элементом появятся в раскрывающемся списке, когда пользователь наведет указатель мыши на родительский элемент:

        Когда вы будете довольны организацией, нажмите Меню сохранения .

        Как только это будет сделано, вам нужно будет выяснить, где вы хотите, чтобы ваше меню отображалось на вашем веб-сайте. Заголовок обычно является лучшим выбором (никто не хочет прокручивать страницу вниз только для того, чтобы найти страницу «Контакты» или «О нас»!).

        Вы можете выбрать, где отображать его, в области Настройки меню :

        Здесь следует отметить две вещи:

        1. Вы можете увидеть разные Отображаемые местоположения , потому что фактические имена различаются для каждой темы.Обычно вам нужно выбрать что-то вроде «Главное меню», «Основное меню», «Основное» и т. Д., Если вы хотите, чтобы ваше меню отображалось в заголовке.
        2. Если вы установите флажок Автоматически добавлять новые страницы верхнего уровня в это меню , он добавит любые новые страницы, которые вы создаете в меню. Это может быстро запутаться, и это не рекомендуется!

        После сохранения изменений готово!

        Более наглядный способ управления раскрывающимися меню

        В качестве альтернативы описанному выше методу вы также можете управлять своими меню с помощью «предварительного просмотра в реальном времени».

        Нажав на эту кнопку, вы попадете в настройщик WordPress.

        Хотя интерфейс выглядит немного иначе, применяются все те же принципы. Вы по-прежнему сможете:

        • Перетаскивайте элементы меню для создания раскрывающихся списков
        • Изменить расположение меню
        • и т. Д.

        И преимущество в том, что вы сможете увидеть предварительный просмотр выпадающего меню WordPress в реальном времени.

        3 быстрых совета по использованию раскрывающихся меню

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

        • Используя вариант раскрывающегося меню WordPress по умолчанию, вы можете указать, где разместить свои подменю.Например, если ваше меню называется «Еда» и вы хотите, чтобы «Завтрак» отображался перед «Ужином», просто перетащите завтрак наверх!

        • При создании меню дайте им подходящие названия! Например, если у вас есть меню под названием «О программе», вам не нужно, чтобы в раскрывающемся меню были «Контакты» и «Часто задаваемые вопросы». В связи с этим мы предлагаем использовать «Контакты», «Часто задаваемые вопросы» и «О нас» как отдельные пункты меню.
        • Как правило, не следует класть все яйца в одну корзину.В этом случае не создавайте одно меню и не добавляйте в него все свои подменю.

        Если вы помните эти 3 совета при создании раскрывающихся меню WordPress, все будет хорошо!

        Заключительные мысли

        Если вы будете следовать предоставленным нами пошаговым инструкциям, вы легко сможете создавать раскрывающиеся меню WordPress всего за пару минут.

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

        У вас есть еще вопросы о том, как создать раскрывающееся меню WordPress? Оставьте комментарий, и мы постараемся помочь!

        Бесплатный гид

        5 основных советов по ускорению работы вашего сайта на WordPress


        Сократите время загрузки даже на 50-80%

        , просто следуя простым советам.

        Как создать раскрывающееся меню в WordPress (за 5 шагов)

        Навигация по сайту — ключ к тому, чтобы помочь вашим пользователям добраться туда, куда они хотят.Хорошо продуманное меню может иметь большое значение для улучшения пользовательского опыта (UX) и даже для снижения показателя отказов. Однако плохо созданный может сделать прямо противоположное.

        К счастью, WordPress позволяет создавать настраиваемые меню в соответствии с потребностями вашего сайта. Вы даже можете использовать собственные функции, чтобы добавить компактное раскрывающееся меню WordPress, которое экономит место, но при этом обеспечивает четкое направление для ваших посетителей.

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

        Давайте нырнем!

        Введение в навигацию и раскрывающиеся меню WordPress

        Навигационные меню могут быть непритязательными, но являются жизненно важным элементом любого веб-сайта. Они помогают пользователям быстро находить наиболее подходящие страницы для достижения своих целей, а также дают новым посетителям представление о том, что вы предлагаете:

        Главное меню навигации веб-сайта Kinsta

        Наличие хорошо продуманного меню навигации — ключ к увеличению конверсии и снижению показателя отказов.Когда пользователи могут легко найти страницы, на которых расположен ваш продукт, форма для подписки по электронной почте или другой конвертирующий контент, вам будет проще убедить их совершить покупку или зарегистрироваться.

        Кроме того, если пользователи могут уверенно ориентироваться на вашем сайте, им не придется отказываться от ваших страниц, потому что они оказались в неправильном месте. Помогая им сделать все правильно с первого раза, вы сможете улучшить UX и минимизировать разочарование.

        В WordPress меню — это неотъемлемая функция. Любой сайт, созданный с помощью платформы, может отображать один или несколько из них.Тем не менее, темы WordPress также играют важную роль, когда дело доходит до стилизации и размещения вашего меню или меню.

        По этой причине ваше меню WordPress может принимать самые разные формы. Самым привычным является стандартное меню заголовка:

        Пример типичного меню заголовка

        Часто также можно включить дополнительное меню нижнего колонтитула внизу страниц. Он может отображать то же содержимое, что и ваше главное меню, или предлагать несколько другие варианты:

        Пример нижнего колонтитула

        Другой стиль — это наложение меню, которое пользователи могут открывать и закрывать по своему желанию:

        Пример оверлейного меню

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

        Пример меню боковой панели

        Или вы можете включить раскрывающееся меню, также иногда называемое «вложенным» меню:

        Пример выпадающего меню

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

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

        Как создать раскрывающееся меню в WordPress (за 5 шагов)

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

        Шаг 1. Создание пунктов меню

        Первый шаг к созданию меню — решить, что в него включить. Начните с перехода к Внешний вид> Меню на панели инструментов WordPress:

        Доступ к редактору меню на панели инструментов WordPress

        То, что вы видите в редакторе меню, может немного отличаться в зависимости от вашей темы.

        Однако сейчас важно отметить первую опцию на вкладке Edit Menus . Вы должны увидеть вариант, в котором вы можете выбрать одно из существующих меню для редактирования, а также возможность создать новое меню :

        Ссылка на создание нового меню в верхней части редактора меню WordPress

        В этом примере мы выберем последний вариант и создадим новое меню.Это включает в себя добавление заголовка и последующее нажатие на кнопку Create Menu :

        Присвоение имени и создание нового меню

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

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

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

        Добавление страниц в меню

        На боковой панели редактора меню просто установите флажки для каждой страницы или сообщения, которое вы хотите включить, и нажмите кнопку Добавить в меню :

        Ваш следующий вариант — включить Custom Links . Это включает в себя предоставление URL-адреса страницы, на которую вы хотите направить пользователей, а затем создание для нее короткой, но описательной метки.После этого вы можете снова нажать Добавить в меню :

        Добавление кастомной ссылки в меню

        Наконец, вы также можете добавить категорий страниц и сообщений в свое навигационное меню. Это переведет пользователей на страницу архива, где они смогут просмотреть весь контент по определенной теме.

        Блоги и другие сайты с большим количеством контента могут найти эту функцию особенно полезной:

        Добавление категорий в меню

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

        Шаг 2. Организуйте свое меню WordPress

        После того, как вы добавили все элементы меню, вы должны увидеть их в списке на отдельных плитках под Структура меню в редакторе:

        Раздел «Структура меню» редактора меню

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

        Есть несколько способов добавить выпадающие списки в меню WordPress.

        Самый простой — продолжить перетаскивание, но начать вкладывать одни пункты меню в другие:

        Вложенность категорий на странице блога

        Например, на изображении выше мы переместили три категории сообщений, которые мы добавили в меню, в Blog , сделав их «подпунктами». На веб-интерфейсе это создаст выпадающее меню, которое выглядит следующим образом:

        Пример выпадающего меню в WordPress

        Если вы хотите добавить раскрывающееся меню, которое включает все категории на вашем сайте, вы можете сделать это, добавив в свое меню настраиваемую ссылку .Используйте «#» в качестве URL-адреса и «Категории» или что-то подобное для ярлыка:

        Создание метки категорий для меню

        Затем вы можете добавить все свои категории в меню и вложить их под этот ярлык. Каждая категория будет интерактивной, но метка не будет:

        .

        Раскрывающееся меню Категории

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

        Добавьте еще одну настраиваемую ссылку, используя «#» в качестве URL-адреса и «Меню» в качестве метки.Затем вложите все остальные пункты меню под этим:

        Размещение всех навигационных ссылок под одной меткой меню

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

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

        Настоящее раскрывающееся меню навигации WordPress

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

        Подпишитесь на информационный бюллетень

        Мы увеличили наш трафик на 1187% с помощью WordPress.

        Мы покажем вам, как это сделать.

        Присоединяйтесь к более чем 20 000 других людей, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!

        Подпишись сейчас

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

        Шаг 3. Добавьте изображения в меню WordPress

        Если к концу шага 2 ваше раскрывающееся меню выглядит точно так, как вы его себе представляли, вы можете перейти к шагу 5, чтобы опубликовать его.Однако есть дополнительные шаги, которые вы можете предпринять, если хотите улучшить свое меню с помощью настроек.

        Одна из тактик, которую следует рассмотреть, — это включить в меню визуальные элементы, чтобы обеспечить дальнейшее руководство для посетителей. Хотя описательные метки жизненно важны, иногда изображение или значок могут помочь пользователям быстрее определить, куда ведет конкретная навигационная ссылка.

        Можно добавлять изображения с помощью настраиваемого CSS, о котором мы вскоре поговорим. Тем не менее, мы рекомендуем выбрать плагин, например Menu Image, Icons Made Easy:

        Выпадающее меню WordPress с изображениями

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

        Просто установите плагин и затем вернитесь в Внешний вид> Меню :

        Раздел «Изображение меню» в редакторе меню

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

        Шаг 4. Добавьте собственный CSS в раскрывающееся меню

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

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

        В редакторе меню щелкните Параметры экрана в правом верхнем углу:

        Вкладка «Параметры экрана» в редакторе меню

        Затем установите флажок CSS Classes :

        Флажок «Классы CSS» на вкладке «Параметры экрана»

        Это добавит поле CSS Classes на каждую страницу в вашем меню:

        Поле CSS Classes в редакторе меню

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

        Теперь вы можете перейти к своей таблице стилей или настройщику и приступить к работе над собственным стилем.

        Шаг 5: опубликуйте свое меню в лучших местах

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

        Этот процесс будет немного отличаться в зависимости от вашей темы и поддерживаемых ею мест меню. В этом примере мы собираемся использовать тему Twenty Twenty.

        В редакторе меню прокрутите вниз до раздела Настройки меню :

        Раздел «Настройки меню» в редакторе

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

        Под этой опцией вы увидите список флажков, обозначающих различные области вашего сайта, где вы можете отображать свое меню.

        Тема Twenty Twenty включает в себя различные области меню: Горизонтальное меню рабочего стола , Расширенное меню рабочего стола , Мобильное меню , Меню нижнего колонтитула , Социальное меню .

        В этом случае созданное нами меню лучше всего подходит для расположения Desktop Horizontal Menu , которое находится в заголовке сайта:

        Горизонтальное меню рабочего стола для темы Twenty Twenty

        Вы также можете рассмотреть возможность перехода на вкладку Manage Locations в области Menus вашей информационной панели.Здесь вы можете увидеть все местоположения меню, которые поддерживаются вашей темой, а также то, какое меню вы назначили каждому из них:

        Вкладка «Управление местоположениями»

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

        Управление с возможностью предварительного просмотра

        Нажмите кнопку Manage with Live Preview , чтобы увидеть, как ваше меню будет отображаться в выбранном вами месте, используя настройщик WordPress:

        Предварительный просмотр меню WordPress в настройщике

        Затем вы можете опубликовать свое меню или меню прямо из Настройщика.Если вам когда-либо понадобится добавить или удалить элементы из раскрывающегося меню, вы можете просто вернуться в редактор меню и внести необходимые изменения.

        Плагины

        WordPress для улучшения раскрывающихся меню

        Хотя вы можете создавать полнофункциональные навигационные меню WordPress без каких-либо дополнительных инструментов, иногда может быть полезно расширить функциональные возможности вашего меню. Если это так с вашим сайтом, вы можете изучить некоторые популярные плагины меню WordPress.

        Nested Pages — это эффективный способ для блогов с большим объемом контента создавать раскрывающиеся меню.Хотя он в основном используется для организации сообщений и страниц, этот плагин также автоматически создает меню, которое отражает структуру вашего контента:

        Плагин WordPress для вложенных страниц

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

        Если это так с вашим сайтом, Max Mega Menu может помочь вам объединить существующие меню WordPress в одно «мегаменю»:

        Max Mega Menu WordPress плагин

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

        WP Mobile Menu сочетается с любой адаптивной темой, чтобы помочь вам создать систему навигации для пользователей вашего сайта, которые находятся в пути:

        Плагин WP Mobile Menus для WordPress

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

        Вы можете использовать любой из этих плагинов, чтобы улучшить вашу текущую систему навигации и сделать раскрывающееся меню WordPress более эффективным.Только помните, что иногда, когда дело касается навигации, проще — лучше . Добавляйте дополнительные функции только в том случае, если это улучшит ваш UX и не загромождает ваш сайт.

        Устранение неполадок раскрывающегося меню WordPress

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

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

        Часто неисправное меню является результатом конфликта кода между вашим пользовательским меню и вашей темой. Первое, что вам следует сделать, если ваше меню не работает, — это переключиться на тему по умолчанию, например Twenty Twenty. Если ваше меню снова заработает, значит, проблема связана с вашей темой. Затем вы можете связаться с разработчиком вашей темы, чтобы найти решение.

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

        • Код с ошибками: Еще раз проверьте правильность добавленных вами настраиваемых CSS и что вы используете классы CSS, как описано в шаге 4.
        • Несовместимость подключаемых модулей: Попробуйте отключить все установленные подключаемые модули, относящиеся к меню, и посмотрите, решит ли это проблему.
        • Устаревший jQuery: Обновите jQuery до последней версии и попробуйте снова открыть раскрывающееся меню.

        Однако, как мы упоминали ранее, потенциальных причин неправильного меню много. Если ни одно из вышеперечисленных решений не работает, мы рекомендуем посетить форумы поддержки WordPress, обратиться к нашей опытной команде поддержки Kinsta WordPress или нанять разработчика WordPress, чтобы исправить это за вас.

        Меню навигации — ключ к UX вашего сайта. Но что, если у вас есть много пунктов меню, которые вам нужно показать? Выпадающее меню — это название игры! Посмотрите, как легко создать его, с помощью этого руководства 📑🗃️Нажмите, чтобы твитнуть

        Сводка

        Хотя это может показаться мелочью, навигация вашего сайта WordPress может принести успех или помешать ему. Использование раскрывающихся меню позволяет сэкономить место на экранах пользователей, а также позволяет им легко перемещаться по вашему сайту и повышать конверсию.


        Если вам понравилось это руководство, то вам понравится наша поддержка. Все планы хостинга Kinsta включают круглосуточную поддержку наших опытных разработчиков и инженеров WordPress. Общайтесь с той же командой, которая поддерживает наших клиентов из списка Fortune 500. Ознакомьтесь с нашими тарифами

        Раскрывающееся меню HTML

        , Ultimate HTML Dropdown Menu Builder

        Как добавить раскрывающееся меню на HTML-страницу?

        Раскрывающееся меню html обычно содержит список страниц вашего сайта, которые посетители могут выбрать из раскрывающегося списка.В следующем руководстве показано, как добавить на страницу раскрывающееся меню HTML. Давай сделаем это для проверки.

        Шаг 1

        Откройте существующую страницу локально в редакторе веб-страниц (например, Dreamweaver) или создайте новую страницу и сохраните ее в новой созданной папке (например, с именем «меню») на вашем компьютере.

        Шаг 2

        Запустите редактор выпадающего меню html (обычно мы используем Sothink DHTML Menu) и затем создайте выпадающее меню html, после того, как выпадающее меню html будет готово, сохраните выпадающее меню html как файл PGT в папку «меню», а затем щелкните кнопку «Опубликовать» и выберите вариант «Опубликовать JS… «. для публикации раскрывающегося меню html.

        Шаг 3

        Нажмите кнопку «Папка», чтобы выбрать каталог для сохранения сгенерированного файла js для раскрывающегося меню HTML. Здесь мы устанавливаем путь как «E: \ tutorial \ menu \ topmenu.js». Но убедитесь, что вы установили путь к файлу js внутри корневой папки сайта, иначе вам придется изменить путь к файлу js вручную.

        Шаг 4

        Нажмите первую кнопку «Копировать все», чтобы скопировать код меню в теге HTML-кода, а затем найдите на своей HTML-странице такие теги: и .

        Затем, пожалуйста, вставьте код меню между и вашей HTML-страницы.

        Шаг 5

        Затем нажмите вторую кнопку «Копировать все», чтобы скопировать код меню в теге HTML-кода, найдите теги и на своей HTML-странице и вставьте код меню между и там.

        Шаг 6

        Перейдите в Dreamweaver и сохраните HTML-страницу.

        Шаг 7

        Перейдите в меню Sothink DHTML и отметьте опцию «Копировать файлы ресурсов», чтобы скопировать и вставить файлы ресурсов, используемые в этом раскрывающемся меню HTML, в определенные папки; Затем нажмите ОК, программа автоматически скопирует и вставит файлы ресурсов.

        Наконец, вы можете просмотреть свое раскрывающееся меню HTML в браузере для проверки. Если он работает хорошо, это означает, что вы успешно добавили раскрывающееся меню html на свою веб-страницу.

        П.С. Выпадающее меню html — это место, где у вас есть несколько параметров, хранящихся в меню, доступном с помощью стрелки полосы прокрутки. Вы можете обратиться к этой странице с видеоуроком о добавлении раскрывающегося меню html на веб-страницу.

        Создание раскрывающегося меню CSS

        Одной из основных функций, которыми пользуется большинство веб-сайтов, является простое меню навигации, которое часто включает в себя какой-либо тип «раскрывающегося списка». В наши дни меню могут принимать любые формы и формы, от простого составного списка (слева внизу) до «мегаменю», включая фотографии и другие материалы (справа внизу).Мы собираемся создать простую версию слева, хотя эту начальную структуру можно легко изменить для создания более сложных меню.

        Существует столько же способов их кодирования, сколько и дизайнов, но основные функциональные возможности могут быть легко достигнуты с использованием чистого HTML и CSS (без какого-либо javascript), и это отличный инструмент, чтобы узнать больше о семантическом HTML и CSS в процесс.

        Давайте сначала сконцентрируемся на построении правильной структуры HTML на странице.Все начинается со скромного маркированного списка, например:

        • Дом
        • Около
        • Услуги
          • Веб-разработка
          • Графический дизайн
          • Брендинг
        • Портфолио
          • Дизайн
          • Фотография
          • Интерактивный
        • Контакт

        Это пример меню, которое можно найти на веб-сайте портфолио. Первый уровень маркеров («Домашняя страница», «О нас», «Услуги», «Портфолио», «Контакты») — это элементы навигации «верхнего уровня», которые всегда видны.

        Здесь есть два «подменю», которые представлены пунктами с отступом в разделах «Услуги» и «Портфолио». Мы должны увидеть их после того, как наведем курсор на верхний уровень.

        Кроме того, каждый из отмеченных пунктов меню должен быть ссылкой на соответствующую страницу. Хотя на самом деле мы не собираемся делать эти страницы здесь, для целей руководства мы добавим ссылки на каждый элемент с назначением отдельных HTML-страниц с одинаковыми именами.

        Шаг 1

        Вот как должен выглядеть наш HTML. Введите или вставьте это в свой HTML-файл в любом месте, где вы хотите, чтобы ваше меню отображалось (возможно, вверху страницы, под открывающим тегом ).

          

        Давайте сделаем небольшой обзор HTML:

        Тег

          — это неупорядоченный список, а тег
        • — это элемент списка. Эти элементы вместе создают список по умолчанию, который на вашей HTML-странице выглядит примерно так:

          Это отображается как маркированный список из-за тегов

            .Если бы вместо этого мы использовали теги
              , список был бы пронумерован. (См. Эту ссылку для получения дополнительной информации об упорядоченных списках.)

              Если вы следите за серией и используете HTML5Boilerplate в качестве основы, когда вы вставили это на свою страницу, вы, вероятно, НЕ видели маркеров, вместо этого ваш список, вероятно, будет выглядеть так:

              Это потому, что мы вложили наш список в элемент

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

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