Горизонтальное выпадающее меню html: Горизонтальное выпадающее многоуровневое меню

Содержание

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

Создать простое горизантальное меню на CSS не сложно, а довольно просто, нам не потребуется даже использовать JavaScript. Делается это очень просто, поэтому давайте сразу же перейдём к коду.

HTML

1. Создадим разметку кода в html. Дадим меню уникальный id.



CSS

Разметка готова, теперь добавим стили-CSS для неё, не забываем указывать нужное id.


#menu {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-family: Georgia;
	}
#menu li {
	list-style: none;
	float: left;
	height: 33px;
	padding: 0;
	margin: 0;
	width: 150px;
	text-align: center;
	background: #171717;
	position: relative;
	padding-top: 12px;
	}
#menu li ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 150px;
	display: none;
	position: absolute;
	left: 0;
	top: 45px;
	}
#menu li ul li {
	float: none;
	height: 33px;
	margin: 0;
	width: 150px;
	text-align: center;
	background: #7F7F7F;
	}
#menu li a {
	display: block;
	width: 150px;
	height: 33px;
	color: #fff;
	text-decoration: none;
	}
#menu li:hover ul, #menu li:hover ul {
	display: block;
	}
#menu li:hover, #menu li:hover {
	background: #424242;
	}

Просто вставьте этот код и меню будет работать.

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

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

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

.cbp-hrmenu {

    width: 100%;

    margin-top: 2em;

    border-bottom: 4px solid #47a3da;

}

/* general ul style */

.cbp-hrmenu ul {

    margin: 0;

    padding: 0;

    list-style-type: none;

}

/* first level ul style */

.cbp-hrmenu > ul,

.cbp-hrmenu .cbp-hrsub-inner {

    width: 90%;

    max-width: 70em;

    margin: 0 auto;

    padding: 0 1.875em;

}

.cbp-hrmenu > ul > li {

    display: inline-block;

}

.cbp-hrmenu > ul > li > a {

    font-weight: 700;

    padding: 1em 2em;

    color: #999;

    display: inline-block;

}

.cbp-hrmenu > ul > li > a:hover {

    color: #47a3da;

}

. cbp-hrmenu > ul > li.cbp-hropen a,

.cbp-hrmenu > ul > li.cbp-hropen > a:hover {

    color: #fff;

    background: #47a3da;

}

/* sub-menu */

.cbp-hrmenu .cbp-hrsub {

    display: none;

    position: absolute;

    background: #47a3da;

    width: 100%;

    left: 0;

}

.cbp-hropen .cbp-hrsub {

    display: block;

    padding-bottom: 3em;

}

.cbp-hrmenu .cbp-hrsub-inner > div {

    width: 33%;

    float: left;

    padding: 0 2em 0;

}

.cbp-hrmenu .cbp-hrsub-inner:before,

.cbp-hrmenu .cbp-hrsub-inner:after {

    content: " ";

    display: table;

}

.cbp-hrmenu .cbp-hrsub-inner:after {

    clear: both;

}

.cbp-hrmenu .cbp-hrsub-inner > div a {

    line-height: 2em;

}

.cbp-hrsub h5 {

    color: #afdefa;

    padding: 2em 0 0.6em;

    margin: 0;

    font-size: 160%;

    font-weight: 300;

}

/* Examples for media queries */

@media screen and (max-width: 52. 75em) {

    .cbp-hrmenu {

        font-size: 80%;

    }

}

@media screen and (max-width: 43em) {

    .cbp-hrmenu {

        font-size: 120%;

        border: none;

    }

    .cbp-hrmenu > ul,

    .cbp-hrmenu .cbp-hrsub-inner {

        width: 100%;

        padding: 0;

    }

    .cbp-hrmenu .cbp-hrsub-inner {

        padding: 0 2em;

        font-size: 75%;

    }

    .cbp-hrmenu > ul > li {

        display: block;

        border-bottom: 4px solid #47a3da;

    }

    .cbp-hrmenu > ul > li > a {

        display: block;

        padding: 1em 3em;

    }

    .cbp-hrmenu .cbp-hrsub {

        position: relative;

    }

    .cbp-hrsub h5 {

        padding-top: 0.6em;

    }

}

@media screen and (max-width: 36em) {

    .cbp-hrmenu .cbp-hrsub-inner > div {

        width: 100%;

        float: none;

        padding: 0 2em;

    }

}

Как сделать в css выпадающее меню? Пошаговая инструкция

От автора: всех приветствую.

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

План урока и разметка нашего меню

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

Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.

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

Собственно, вот она, вся разметка:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<nav id = "nav"> <ul> <li><a href = "#">Пункт 1</a> <ul class = "second"> <li><a href = "#">Подпункт</a></li> <li><a href = "#">Подпункт</a></li> <li><a href = "#">Подпункт</a></li> </ul> </li> <li><a href = "#">Пункт 2</a> <ul class = "second"> <li><a href = "#">Подпункт</a></li> <li><a href = "#">Подпункт</a></li> <li><a href = "#">Подпункт</a></li> </ul> </li> <li><a href = "#">Пункт 3</a> <ul class = "second"> <li><a href = "#">Подпункт</a></li> <li><a href = "#">Подпункт</a></li> <li><a href = "#">Подпункт</a></li> </ul> </li> <li><a href = "#">Пункт 4</a> <ul class = "second"> <li><a href = "#">Подпункт</a></li> <li><a href = "#">Подпункт</a></li> <li><a href = "#">Подпункт</a></li> </ul> </li> </ul> </nav>

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

<nav id = "nav">

<ul>

<li><a href = "#">Пункт 1</a>

<ul class = "second">

<li><a href = "#">Подпункт</a></li>

<li><a href = "#">Подпункт</a></li>

<li><a href = "#">Подпункт</a></li>

</ul>

</li>

<li><a href = "#">Пункт 2</a>

<ul class = "second">

<li><a href = "#">Подпункт</a></li>

<li><a href = "#">Подпункт</a></li>

<li><a href = "#">Подпункт</a></li>

</ul>

</li>

<li><a href = "#">Пункт 3</a>

<ul class = "second">

<li><a href = "#">Подпункт</a></li>

<li><a href = "#">Подпункт</a></li>

<li><a href = "#">Подпункт</a></li>

</ul>

</li>

<li><a href = "#">Пункт 4</a>

<ul class = "second">

<li><a href = "#">Подпункт</a></li>

<li><a href = "#">Подпункт</a></li>

<li><a href = "#">Подпункт</a></li>

</ul>

</li>

</ul>

</nav>

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

Собственно, я задал всей навигации идентификатор nav, а всем вложенным спискам – стилевой класс second, чтобы понимать, что они являются вложенными.

Отлично, разметка у нас готова, можно посмотреть на результат:

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

Пишем css-стили

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

*{ margin: 0; padding: 0; }

*{

margin: 0;

padding: 0;

}

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

#nav{ height: 70px; } #nav ul{ list-style: none; }

#nav{

height: 70px;

}

#nav ul{

list-style: none;

}

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

#nav > ul > li{ float: left; width: 180px; position: relative; }

#nav > ul > li{

float: left;

width: 180px;

position: relative;

}

Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.

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

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

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

Тем временем, вот что у нас уже получилось:

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

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

#nav li a{ display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; } #nav li a:hover{ background: #2F718E; }

#nav li a{

display: block;

background: #90DA93;

border: 1px solid #060A13;

color: #060A13;

padding: 8px;

text-align: center;

text-decoration: none;

}

#nav li a:hover{

background: #2F718E;

}

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

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

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

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

#nav li .second{ display: none; position: absolute; top: 100%; }

#nav li .second{

display: none;

position: absolute;

top: 100%;

}

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

Реализуем выпадение

Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:

#nav li:hover .second{ display: block; }

#nav li:hover .second{

display: block;

}

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

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

#nav li li{ width: 180px; }

#nav li li{

width: 180px;

}

Все, проблема решена:

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

Переделываем меню в вертикальное

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

Во-первых, вам нужно будет убрать float:left у главных пунктов списка. Именно это свойство способствует тому, что наши пункты отображаются в одну строку, но зачем нам это, если навигация должна быть вертикальной?

Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:

#nav li .second{ display: none; position: absolute; left: 100%; top: 0; }

#nav li .second{

display: none;

position: absolute;

left: 100%;

top: 0;

}

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

Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.

Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.

Горизонтальное меню с несколькими уровнями

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

<li><a href = "#">Пункт 4</a> <ul class = "second"> <li><a href = "#">Подпункт</a> <ul class = "third"> <li><a href = "#">Подпункт подпункта</a></li> <li><a href = "#">Подпункт подпункта</a></li> </ul> </li> <li><a href = "#">Подпункт</a></li> <li><a href = "#">Подпункт</a></li> </ul> </li>

<li><a href = "#">Пункт 4</a>

<ul class = "second">

<li><a href = "#">Подпункт</a>

<ul class = "third">

<li><a href = "#">Подпункт подпункта</a></li>

<li><a href = "#">Подпункт подпункта</a></li>

</ul>

</li>

<li><a href = "#">Подпункт</a></li>

<li><a href = "#">Подпункт</a></li>

</ul>

</li>

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

#nav li li .third{ display: none; position: absolute; left: 100%; top: 0; } #nav li li:hover .third{ display: block; }

#nav li li .third{

display: none;

position: absolute;

left: 100%;

top: 0;

}

#nav li li:hover .third{

display: block;

}

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

Внимание! Чтобы абсолютное позиционирование работало для списка third, у списков second должно быть задано относительное позиционирование. Но как, если мы же задавали для него абсолютное позиционирование?

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

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

В общем, итог таков:

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

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

Итог

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Горизонтальное выпадающее меню на 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]

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

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

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

Если немного изменить, то должно получиться примерно следующее, что уже прописано в стилях:

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

После того, как мы применили CSS, у нас должно получиться что-то вроде этого:

Чтобы добавить многоуровневые выпадающие списки, мы повторим тот же процесс. Мы выбираем пункт меню, в который хотим добавить новое раскрывающееся меню, и добавим новый ul между li этого пункта меню.

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

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

Как ранее говорили в этом материале, здесь используем псевдоэлемент CSS3, где :only-child в нашем случае это проверяет, есть ли у родительского элемента какие-либо другие элементы внутри других тегов li, если нет, то он удаляет плюс +, который добавляется по умолчанию.

И вот как должен выглядеть конечный результат:

Приступаем к установке:

HTML

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

Код

<nav>
  <ul>
  <li><a href="#">Главная</a></li>
  <li><a href="http://zornet.ru">Zornet.Ru</a>
  <ul>
  <li><a href="#">Стили CSS</a></li>
  <li><a href="#">Скрипты сайта</a></li>
  <li><a href="#">Шаблоны ресурса</a>
  </li>
  </ul>
  </li>
  <li><a href="#">Стилистика CSS</a></li>
  <li><a href="#">Раскрутка SEO</a></li>
  <li><a href="#">Дизайн</a></li>
  <li><a href="#">Связь</a></li>
  </ul>
</nav>


Как вы можете видеть в приведенном коде, где был добавлен неупорядоченные списки с несколькими элементами списка во втором li, что в этом случае является элементом меню. Здесь обязательно нужно обратить внимание на добавление ul, что прописан после тега привязки.

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

Поэтому добавьте следующее после вышеуказанного CSS:

Код

nav {
  margin: 0px 0;
  background-color: #c14018;
  width: 100%;
}

nav ul {
  padding:0;
  margin:0;
  list-style: none;
  position: relative;
  }

nav ul li {
  margin: 0px 0px 0 0;
  display: inline-block;
  background-color: #c1411a;
}

nav a {
  display: block;
  padding: 0 17px;
  color: #f5eeee;
  font-size: 19px;
  line-height: 59.9px;
  text-decoration: none;
}

nav a:hover {
  background-color: #69240e;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
}

nav ul li:hover > ul {
  display:inherit;
}

nav ul ul li {
  min-width:168px;
  display:list-item;
  position: relative;
}

nav ul ul ul {
  position: absolute;
  top:0;
  left:100%;
}

li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }


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

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

Позвольте мне знать в комментариях ниже.

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

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

Выпадающее меню можно сделать на CSS не используя скрипты и модули. Просто дописываем несколько строк в CSS файл и готово. Несмотря на простоту меню будет достаточно универсальным. Стили подходить под произвольное количество уровней вложенности. Хоть два хоть десять уровней. Код при этом остаётся тем же. В статье описаны три вида меню, но если вы только начинаете разбираться в вёрстке советую читать сначала. Так будет проще понять.

  1. Вертикальное выпадающее меню
  2. Горизонтальное выпадающее меню с одним уровнем вложенности
  3. Горизонтальное меню с несколькими уровнями вложенности

Сначала сделаем HTML разметку для меню. Принято делать меню списком. Это не стандарт просто так сложилось.

<ul>
  <li><a href="#">пункт 1</a>
    <ul>
      <li><a href="#">пункт 1.1</a></li>
      <li><a href="#">пункт 1.2</a></li>
    </ul>
  </li>
  <li><a href="#">пункт 2</a>
    <ul>
      <li><a href="#">пункт 2.1 многа букаф</a></li>
      <li><a href="#">пункт 2.2</a>
        <ul>
          <li><a href="#">пункт 2.2.1</a></li>
          <li><a href="#">пункт 2.2.2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">пункт 3</a></li>
  <li><a href="#">пункт 4</a></li>
  <li><a href="#">пункт 5</a></li>
</ul>

HTML файл мы больше трогать не будем. Все дальнейшие изменения производятся только за счёт CSS. Первое что нам нужно сделать - скрыть вложенные пункты.

ul.nav li ul {display: none;}

Ещё нужно убрать маркеры но это дело вкуса.

ul.nav li {list-style: none;}

Чтобы вложенные пункты появлялись при наведении на родительский пункт используем псевдокласс :hover, при этом нужно сделать так что бы появлялись только пункты первого уровня вложенности. Для этого используем знак >

ul.nav li:hover > ul {display: block;} 

В этой строчке заключается вся магия нашего выпадающего меню, поэтому разберём её подробнее. Благодаря псевдоклассу :hover, при наведении курсора на пункт меню, он же элемент списка li, для первого вложенного списка ul значение display станет block. Так открывается первый уровень вложенности. Если на этом уровне есть пункты содержащие подпункты, то при наведении на них также откроется только один вложенный уровень.

С основной механикой разобрались. Осталось переопределить место где будут появляться вложенные пункты. Для этого воспользуемся свойством position: absolute. При таком позиционировании отсчёт координат ведётся от края окна браузера если только для родительского элемента не задано свойство position с значением fixed, relative или absolute. В этом случае отсчёт ведётся от края родительского элемента.

Используя свойство position мы переместим вложенные пункты в право на расстояние равное ширине меню. В рассматриваемом способе есть одно ограничение. При позиционировании нам придётся жёстко задать ширину. С другой стороны вертикальное меню размещается в сайдбаре ширина которого заранее определена, поэтому привязка к ширине не должна вызвать проблем.

/* Вертикальное выпадающее меню*/
body{
  background: #DCDCDC;
}
/*блок меню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border: 1px solid #FFFFFF;
  list-style: none;
  width: 150px;         /*ширина блока меню*/
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}

/*Выпадающее меню*/

ul.nav li:hover {
  /* позиционирование вложенных элементов
   * будет расчитыватьться относительно
   * родительского элемента
   */
  position: relative;
  background: yellow;
}
ul.nav li:hover > ul {
  display: block;
}
ul.nav li:hover ul{
  position: absolute;
  top: 0;       /*Задаём координаты для вложенных пунктов*/
  left: 150px; /*меню раскрывается вправо*/
}

Вот что должно получиться в результате. демка

Для горизонтального меню мы будем так же применять позиционирование но есть несколько нюансов. Что бы сделать меню горизонтальным используем свойство float. Меню будет раскрываться вниз значит при позиционировании нужно учитывать высоту. Для начала сделаем меню с одним уровнем вложенности. Вложенное меню также будет горизонтальным. Для этого вложенное меню позиционируем относительно списка а не родительского пункта и задаём для него ширину.

/*Горизонтальное выпадающее меню с одним уровнем вложенности*/

body{
  background: #DCDCDC;
}

/* Блок меню*/

ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border-right: 1px solid #FFFFFF;
  float: left; /*делаем меню горизонтальным*/
  height: 30px;
  list-style: none;
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}
ul.nav li:hover {
  background: yellow;
}
/*Выпадающее меню*/
ul.nav {
  position: relative;
  background: #B3B3FF;
  height: 30px;
  width: 600px;
}
ul.nav li:hover > ul {
  background: #D0E0FF;
  border-top: 1px solid white;
  display: block;
  width: 600px;
  position: absolute;
  top: 30px;
  left: 0;
}

Вот что получиться в итоге демка.

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

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

body{
  background: #DCDCDC;
}

/* Блок меню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border-right: 1px solid #FFFFFF;
  float: left; /*делаем меню горизонтальным*/
  height: 30px;
  list-style: none;
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}
ul.nav { /*задаём высоту и ширину меню*/
  background: #B3B3FF;
  height: 30px;
  width: 600px;
}

/*Выпадающее меню*/

ul.nav li:hover {
  background: yellow;
  position: relative;
}
ul.nav li:hover > ul {
  border-top: 1px solid white;
  display: block;
  position: absolute;
  top: 30px; /*первый уровень меню раскрывается вниз*/
  left: 0;
}
/*Второй и последующие уровни вложенности*/
ul.nav li ul li{
  border-bottom: 1px solid white;
  height: auto;
  width: 150px;
}
ul.nav li:hover ul li ul{
  position: absolute;
  top: 0;
  left: 150px; /*второй и последующие уровни расскрываются вправо*/
}

Вот так будет выглядеть наше многоуровневое меню демка.

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

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

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

Но затем вы надеваете шляпу своего владельца сайта и — БАМ — вы совершенно другой человек! Все то, что вы раздражали на других сайтах, теперь гордо живет на ваших!

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

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

Содержание | Быстрая навигация

Раскрывающиеся вертикальные, горизонтальные меню сайта в навигации.

В частности, зачем вам от них избавляться и какие есть альтернативы.

Давайте начнем с этого:

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

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

4 причины, по которым ваше выпадающее меню должно умереть (и что делать вместо этого).

Причина № 1: Ваши посетители могут пропускать важные страницы.

Представьте, вы попали на этот сайт фрилансера.

Вы хотите узнать о них больше и навести курсор на этот ярлык навигации. Каковы шансы, что вы нажмете на ярлык «Моя история»?

Как меню вредит вашему сайту?

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

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

Какая альтернатива выпадающим меню?

Если ваше выпадающее меню состоит из 1-2 пунктов:

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

Причина № 2: Вы заставляете своих посетителей работать на это и вы создали тонкий контент.

По шкале от 0 до 10, насколько вам нравится нажимать «Наша миссия» или «Наши ценности»?

Представь, ты попал на этот сайт.

Какова вероятность того, что вы хотите узнать об их ценностях, миссии и одобрениях?

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

Как выпадающее меню вредит вашему сайту?

1. Вы просите своих посетителей проделать большую работу, чтобы узнать что-то простое,

… что означает, что они не собираются это делать.

Ваши посетители просто хотят узнать о вас больше, щелкнуть где-нибудь и просто прокрутить вниз, читая.

Но неа, ты решил заставить их работать на это!

2. Вы создали страницы с тонким содержанием.

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

В этом конкретном примере «О нас» ценности и страницы миссий имеют в среднем по 150 слов каждая. 3 страницы, содержащие всего 150 слов, которые не помогают вашим посетителям.

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

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

Какая альтернатива горизонтальным и вертикальным меню сайта?

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

Но, допустим, у вас нет выпадающего меню для раздела «О нас».

А как насчет услуг?

Причина № 3: Вам трудно найти соответствующую информацию.

Представь, ты попал на этот сайт.

Вы хотите узнать об их услугах, наведите курсор на меню «Услуги», и эта красота исчезнет.

Ваш следующий ход?

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

Попался! Нет такой вещи. Это просто текст.

Итак, вам нужно СЕЙЧАС решить, о каких услугах вы хотели бы узнать.

Не быстрое решение, особенно потому, что в 4 из 6 сервисов есть слово «маркетинг».

Но хорошо, вы нажимаете «Маркетинговый аудит» и начинаете читать.

Хотите узнать о других услугах?

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

Хотите вернуться к первому интересному сервису?

Какой выпадающий элемент был снова? Нет, не этот. Попробуйте еще раз!

Как это вредит вашему сайту?

Ваши посетители могут пропустить услугу, которая им действительно нужна (и вы можете потерять деньги).

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

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

Они не могут сосредоточиться так!

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

И это было только на рабочем столе! На мобильном телефоне, если вы не правильно реализуете макет выпадающего меню и не сразу видите элементы подменю, у ваших бедных посетителей сайта будет бесконечный список ссылок:

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

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

Ряд вариантов:

  • Создать страницу под названием «Услуги»
  • Добавьте в нее свои отдельные сервисы с заманчивым абзацем и визуально заметной ссылкой на соответствующую страницу для каждой услуги.
  • В вашей навигации, ссылка только на главную страницу услуг без каких-либо раскрывающихся списков

… Без выпадающего списка под меткой навигации по сервисам, которая ссылается на это:

Причина № 4: Вы сводите посетителей вашего сайта с ума.

Какая альтернатива?

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

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

Что-то вроде этого:

4 альтернативы выпадающему меню, которое улучшит ваш сайт.

  1. Если у вас есть только один выпадающий элемент:
    • либо поместите его как элемент навигации верхнего уровня
    • или удали это.
  2. Если это имеет смысл, объедините информацию на отдельных страницах из раскрывающегося меню и сделайте из нее одну страницу (например, если у вас есть раскрывающееся меню в разделе «О программе» на верхнем элементе навигации).
  3. Если у вас есть раскрывающееся меню Службы:
    • либо используйте только пункт «Услуги» верхнего уровня, который ведет на выделенную страницу «Услуги»
    • или, если вы предлагаете только 1-2 услуги, удалите элемент навигации «Службы» и создайте ссылку на соответствующие службы прямо из навигации верхнего уровня.
  4. Если у вас нет выбора, кроме как предложить своим посетителям множество вариантов навигации, используйте мега-меню.

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

Заключительные слова мудрости.

Будьте внимательным к посетителям сайта.

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

Тогда подумайте о своем сайте. Скорее всего, вы делаете те же ошибки.

✔️ Что такое выпадающее меню?

Это меню в верхней навигации сайта которое показывает подкатегории.

✔️ В чем недостатки выпадающего меню?

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

✔️ Стоит ли отказаться от выпадающего меню?

Откажитесь от выпадающих меню. Вы прячете от пользователя информацию.

✔️ Что делать если уже есть выпадающее меню?

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

✔️ Как сделать горизонтальный выпадающий список?

Установите раскрывающийся список, включив раскрывающееся меню атрибута 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

Создание горизонтального раскрывающегося списка - HTML и CSS - Форумы SitePoint

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

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

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

HTML

  

CSS

 .меню{
    float: right;
    обивка-верх: 1%;
}
.menu li {
    дисплей: встроенный блок;
}
.menu li: first-child {
    маржа слева: 0;
}
.menu li a {
    дисплей: блок;
    размер шрифта: 18 пикселей;
    отступ: 10 пикселей 10 пикселей;
    цвет: #FFF;
    -webkit-transition: легкость всего 0.3s;
    -moz-transition: легкость всего 0.3s;
    -o-переход: легкость всего 0.3s;
    переход: вся легкость 0,3 с;
    font-weight: 300;
}
.menu li a: hover, .menu li.active a {
    фон: # 000000;
    цвет: # 4BCAFF;
}
#nav .current a {
    красный цвет;
}
.toggleMenu {
    дисплей: нет;
    отступ: 2px 0px 0px 0px;
}
.nav: раньше,
.nav: after {
    содержание: " ";
    дисплей: таблица;
}
.nav: after {
    ясно: оба;
}
.nav ul {
    стиль списка: нет;
}
  

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

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

Спасибо за помощь!

Скрипка JS

HTML

  <тело>



EditRegion3
<нижний колонтитул>

Лаборатория Тейлора
Центр биомедицинских исследований Leichtag 4 этаж, ком.412
Калифорнийский университет в Сан-Диего
9500 Гилман Др.mc0654
Ла-Хойя, Калифорния 92093
Тел: (858) 534-8190
Факс: (858) 534-8193

CSS li ul { дисплей: нет; }

  li: hover ul {
  дисплей: блок;
}
тело {
    маржа: 0px;
    цвет фона: #CCCCCC;
}
.содержание {
    цвет фона: #FFFFFF;
    отступ справа: 6 пикселей;
    отступ слева: 6 пикселей;
}
.footer {
    цвет фона: # 357f7f;
    семейство шрифтов: Arial, Helvetica, sans-serif;
    размер шрифта: 8 пикселей;
    цвет: #FFFFFF;
    позиция: абсолютная;
}
#содержание {
    цвет фона: #FFFFFF;
    ширина: 100%;
    высота: 100%;
    маржа: 0 авто;
    минимальная высота: 100%;
    высота: авто;
}


a {
    текстовое оформление: нет;
}
#wrapper {
    цвет фона: #FFFFFF;
    ширина: 1280 пикселей;
    минимальная высота: 100%;
    положение: относительное;
    высота: авто;
    мин-высота: 100%
    margin-top: 0;
    маржа-право: авто;
    нижнее поле: 0;
    маржа слева: авто;
 }
# content-spacer-top {
    высота: 10 пикселей;
}

# content-spacer-bottom {
    высота: 1%;
}

#header {
    цвет фона: # 357f7f;
    высота: 2%;
    ширина: 100%;
}
#mainnav a {
    семейство шрифтов: Arial, Helvetica, sans-serif;
    размер шрифта: 16 пикселей;
    цвет: # 000000;
    текстовое оформление: нет;
    цвет фона: #FFFFFF;
    плыть налево;
    выравнивание текста: центр;
    ширина: 14.28%;
    padding-top: 6 пикселей;
    отступ справа: 0 пикселей;
    padding-bottom: 6 пикселей;
    отступ слева: 0 пикселей;
    дисплей: блок;
    тип-стиль-список: нет;
    ясно: нет;
    маржа: 0px;
    высота: 2%;
    ширина верхней границы: тонкий;
    граница-правая-ширина: тонкая;
    ширина нижней границы: тонкий;
    граница-левая-ширина: тонкая;
    стиль верхней границы: твердый;
    граница-правый-стиль: нет;
    стиль нижнего края: сплошной;
    граница-левый-стиль: нет;
    цвет верхней границы: # 357F7F;
    цвет границы-справа: # 357F7F;
    цвет нижней границы: # 357F7F;
    цвет левой границы: # 357F7F;
}
#mainnav ul {
тип-стиль-список: нет;
маржа: 0px;
отступ: 0 пикселей;
}

#mainnav a: hover, # mainnav a: active, # mainnav a: focus {
цвет: #FFFFFF;
текстовое оформление: нет;
цвет фона: # 357F7F;
}
.style2 {
размер шрифта: маленький;
цвет: #FFFFFF;
}

а: посетил {
цвет: #FFFFFF;
цвет фона: # 357F7F;
}
.style4 {font-size: x-small}
.style5 {цвет фона: # 357f7f; семейство шрифтов: arial;}
#footer {
ширина: 1280 пикселей;
высота: 120 пикселей;
плыть налево;
семейство шрифтов: Arial, Helvetica, sans-serif;
размер шрифта: 10 пикселей;
преобразование текста: прописные буквы;
}
  

Решено с помощью CSS! Выпадающие меню

CSS

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


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

Поиск в Google по запросу «раскрывающееся меню» дает множество примеров.

Давайте посмотрим, сможем ли мы создать одно из этих меню только с помощью CSS.Мы создадим список ссылок внутри навигационного компонента, например:

    

Теперь предположим, что нам нужно раскрывающееся подменю для второго элемента навигации. Мы можем сделать то же самое и включить список ссылок в этот элемент списка:

    

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

  li {
 дисплей: блок;
 продолжительность перехода: 0,5 с;
}

li: hover {
  курсор: указатель;
}

ul li ul {
  видимость: скрыта;
  непрозрачность: 0;
  позиция: абсолютная;
  переход: легкость всего 0,5 с;
  верхняя маржа: 1 бэр;
  слева: 0;
  дисплей: нет;
}

ul li: hover> ul,
ul li ul: hover {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}

ul li ul li {
  ясно: оба;
  ширина: 100%;
}  

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

Проблема

Это начинает выглядеть так, как мы хотим, но мы еще далеки от завершения. Доступность в Интернете - это основная часть разработки вашего продукта, и прямо сейчас это прекрасная возможность поднять этот вопрос. Добавление role = "navigation" - хорошее начало, но для того, чтобы панель навигации была доступна, нужно иметь возможность перемещаться по ней (и фокусироваться на нужном элементе в разумном порядке), а также иметь экран читатель точно прочитал вслух то, на чем сосредоточено внимание.

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

Теперь важно отметить, что теоретически вы сосредоточены на этом другом элементе, и что программа чтения с экрана сможет его проанализировать, прочитав Sub-One , но пользователи клавиатуры не смогут увидеть, что происходит, и будут сбиться с пути.

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

К счастью, есть новый псевдокласс CSS, который даст нам именно то, что мы хотим в данном случае, и он называется : focus-within .

Решение:

: фокус в пределах

Псевдоселектор : focus-within является частью спецификации CSS Selectors Level 4 Spec и сообщает браузеру применить стиль к родительскому элементу, когда любой из его дочерних элементов находится в фокусе.В нашем случае это означает, что мы можем перейти к Sub-One и применить стиль : focus-within вместе со стилем : hover родительского элемента и точно увидеть, где мы находимся в раскрывающемся меню навигации. В нашем случае это будет ul li: focus-within> ul :

  ul li: hover> ul,
ул ли: фокус внутри> ул,
ul li ul: hover {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}  

Sweet! Оно работает!

Быстрый объезд! Если вы поддерживаете только современные браузеры, CSS, который мы видели до сих пор, подойдет.Но вы должны знать, что когда какой-либо браузер не понимает часть селектора, он выбрасывает весь селектор. Поэтому, если вы хотите поддерживать IE 11, вы не можете смешивать часть : focus-within .

  / * Этот составной селектор по-прежнему будет работать в IE 11, потому что: focus-within не смешивается с * /
ul li: hover> ul,
ул ли ул: наведите указатель мыши,
ul li ul: focus {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}

/ * IE 11 не получит этого, но, по крайней мере, меню верхнего уровня будут работать * /
ul li: focus-within> ul {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}  

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

В большинстве случаев, например, для прямых ссылок, мы обычно можем просто написать что-то вроде:

  a: парение,
фокус {
  ...
}  

Но в этом случае, поскольку мы применяем стили наведения на основе родительского li , мы снова можем использовать : focus-within , чтобы получить то же ощущение при переходе через табуляцию. Это потому, что мы не можем на самом деле сфокусировать на li (если мы не добавим tabindex = "0" ). На самом деле мы фокусируемся на ссылке ( a ) внутри нее.: focus-within позволяет нам по-прежнему применять стили к родительскому li при фокусировке на ссылке (чертовски круто!):

  ли: парение,
li: focus-within {
  ...
}  

На этом этапе, поскольку мы применяем стиль фокусировки, мы можем сделать что-то, что обычно не рекомендуется (удалить стиль этого синего контура кольца фокусировки). Мы можем сделать это по:

  li: focus-within a {
  наброски: нет;
}  

Приведенный выше код указывает, что когда мы фокусируемся на элементах списка через ссылку ( a ), не применяем схему к элементу ссылки ( a ).Это довольно безопасно писать таким образом, потому что мы задаем стили исключительно для состояния наведения, а в браузерах, которые не поддерживают : focus-within , ссылка все равно будет иметь кольцо фокусировки. Теперь наше меню выглядит так:

Окончательное меню с использованием : focus-within , : hover States и настройка исчезновения кольца фокусировки

А как насчет ARIA?

Если вы знакомы с доступностью, возможно, вы слышали о ярлыках и состояниях ARIA. Вы можете использовать их в своих интересах, чтобы одновременно создавать такие типы выпадающих списков со встроенной доступностью! Здесь вы можете найти отличный пример Хейдона Пикеринга.При включении разметки ARIA ваш код будет выглядеть примерно так:

    

Вы добавляете aria-haspopup = "true" к родительскому элементу раскрывающегося меню, чтобы указать альтернативное состояние, и включаете aria-label = "submenu" в само раскрывающееся меню (в данном случае наш список с class = "dropdown" .

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

Предупреждение о поддержке браузера

Говоря о предостережениях, давайте поговорим о поддержке браузером. Хотя : focus-within действительно имеет довольно хорошую поддержку браузера , важно отметить, что Internet Explorer и Edge не поддерживаются, поэтому ваши пользователи на этих платформах не смогут видеть навигацию.

Настольный компьютер
902 9020 Мобильный планшет
Chrome Firefox IE Edge Safari
60 52 Нет 79
Android Chrome Android Firefox Android iOS Safari
90 87 90 10.3

Окончательным решением здесь было бы использование как разметки ARIA, так и CSS : focus-within для обеспечения надежного раскрывающегося списка для ваших пользователей.

Если вы хотите иметь возможность использовать эту функцию в будущем, проголосуйте за нее на Edge User Voice! И проголосуйте за : кольцо фокусировки , пока вы на нем, так что мы сможем стилизовать это кольцо фокусировки и создать красивый интерактивный веб-интерфейс для всех 😀

Подробнее о

: фокус в пределах и A11Y

Простое горизонтальное раскрывающееся меню




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

HTML код:

 



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





 
Код CSS:
 / * CSSTerm.com Простое горизонтальное выпадающее меню CSS * /

.drop_menu {
фон: # 005555;
отступ: 0;
маржа: 0;
тип-стиль-список: нет;
высота: 30 пикселей;
}
.drop_menu li {float: left; }
.drop_menu li a {
отступ: 9 пикселей 20 пикселей;
дисплей: блок;
цвет: #fff;
текстовое оформление: нет;
шрифт: 12px arial, verdana, sans-serif;
}

/ * Подменю * /
.drop_menu ul {
позиция: абсолютная;
слева: -9999 пикселей;
верх: -9999 пикселей;
тип-стиль-список: нет;
}
.drop_menu li: hover {позиция: относительная; фон: # 5FD367; }
.drop_menu li: hover ul {
слева: 0px;
верх: 30 пикселей;
фон: # 5FD367;
отступ: 0 пикселей;
}

.drop_menu li: hover ul li a {
отступ: 5 пикселей;
дисплей: блок;
ширина: 168 пикселей;
текстовый отступ: 15 пикселей;
цвет фона: # 5FD367;
}
.drop_menu li: hover ul li a: hover {background: # 005555; }
 

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

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

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

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

  
Должно выглядеть примерно так

Теперь HTML-часть готова. Если вы хотите добавить больше уровней / вложенного меню, самое время добавить это в код. Мы больше не будем трогать HTML-файл. Все дальнейшие изменения производятся в CSS.Первое, что нам нужно сделать, это скрыть вложенные элементы. Чтобы скрыть меню, мы будем использовать display: none . Чтобы удалить маркеры, используйте стиль списка : none

 ul.navbar li ul {display: none;}
ul.nav li {стиль списка: none;} 

Используйте : hover , чтобы вложенные элементы отображались при наведении курсора на родительский элемент. Нам нужно убедиться, что отображаются только элементы первого уровня вложенности. Для этого мы используем >

 ул.навигационная панель li: hover> ul {display: block;} 

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

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

Также читайте:

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

 / * Горизонтальное раскрывающееся меню * /

тело{
  фон: # e06377;
}

/ * Меню Blcok * /
ul {
  маржа: 0;
  отступ: 0;
}
ul.navbar li {
  фон: # f9d5e5;
  граница справа: сплошная 1px #FFFFFF;
  плыть налево; / * Горизонтальное меню * /
  высота: 30 пикселей;
  стиль списка: нет;
}
ul.navbar li a {
  текстовое оформление: нет;
  дисплей: блок;
  отступ: 5px 5px 5px 15px;
}
ул.navbar li ul {
  дисплей: нет; / * Скрыть вложенный элемент * /
}
ul.navbar {/ * установить высоту и ширину элемента * /
  фон: # f9d5e5;
  высота: 30 пикселей;
  ширина: 600 пикселей;
}

/*Выпадающее меню*/

ul.navbar li: hover {
  фон: # eeac99;
  положение: относительное;
}
ul.navbar li: hover> ul {
  border-top: сплошной белый 1px;
  дисплей: блок;
  позиция: абсолютная;
  верх: 30 пикселей; / * Уровень меню расширяется вниз * /
  слева: 0;
}
/ * Вложенное меню * /
ul.navbar li ul li {
  нижняя граница: сплошной белый 1px;
  высота: авто;
  ширина: 150 пикселей;
}
ул.navbar li: hover ul li ul {
  позиция: абсолютная;
  верх: 0;
  слева: 150 пикселей; / * Вложенное меню раскрывается справа * /
} 

CSS Horizontal Dropdown Menu (демонстрация)

Для горизонтального меню тоже применим позиционирование, но есть несколько нюансов. Чтобы сделать меню горизонтальным, используйте свойство float. Меню будет расширяться, поэтому при позиционировании необходимо учитывать высоту. Во-первых, давайте составим меню с одним уровнем вложенности. Подменю также будет горизонтальным. Для этого мы позиционируем вложенное меню относительно списка, а не родительского элемента, и устанавливаем его ширину.

 body {
  фон: # e06377;
}

/ * Блок меню * /

ul {
  маржа: 0;
  отступ: 0;
}
ul.navbar li {
  фон: # f9d5e5;
  граница справа: сплошная 1px #FFFFFF;
  плыть налево; / * Горизонтальное меню * /
  высота: 30 пикселей;
  стиль списка: нет;
}
ul.navbar li a {
  текстовое оформление: нет;
  дисплей: блок;
  отступ: 5px 5px 5px 15px;
}
ul.navbar li ul {
  дисплей: нет; / * Скрыть вложенные элементы * /
}
ul.navbar li: hover {
  фон: # eeac99;
}
/*Выпадающее меню*/
ul.navbar {
  положение: относительное;
  фон: # f9d5e5;
  высота: 30 пикселей;
  ширина: 600 пикселей;
}
ул.navbar li: hover> ul {
  фон: # eeac99;
  border-top: сплошной белый 1px;
  дисплей: блок;
  ширина: 600 пикселей;
  позиция: абсолютная;
  верх: 30 пикселей;
  слева: 0;
} 

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

Введение

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

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

Его вывод будет примерно таким:

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

Шаг 1

Прежде всего, добавьте таблицу стилей и форму или страницу HTML.

Затем на странице HTML или в веб-форме .NET добавьте «Div» и назовите его «divMenu».

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

    • Home1
      • Homea
      • < a href = "#"> Homeb
      • Homec
    • Home2
      • Homed
      • Homee
      • Homef
    • Home3
      • Homeg
      • < href = "#"> Homeh
      • Homei
    • Home4
    • Home5
    • Home6

Шаг 2

Прямо сейчас ваш код не более чем этот:

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

Добавьте этот код в свою таблицу стилей:

  1. #divMenu, ul, li, li li {
  2. margin: 0;
  3. отступ: 0;
  4. }
  5. #divMenu {
  6. width: 150px;
  7. высота: 27 пикселей;
  8. }
  9. #divMenu ul
  10. {
  11. line-height: 25px;
  12. }
  13. #divMenu li {
  14. стиль списка: нет;
  15. позиция: относительная;
  16. фон: # 641b1b;
  17. }
  18. #divMenu li li {
  19. стиль списка: нет;
  20. позиция: относительная;
  21. фон: # 641b1b;
  22. слева: 148 пикселей;
  23. верх: -27 пикселей;
  24. }
  25. #divMenu ul li a {
  26. width: 148px;
  27. высота: 25 пикселей;
  28. дисплей: блочный;
  29. текстовое оформление: нет;
  30. выравнивание текста: по центру;
  31. font-family: Georgia, Times New Roman, с засечками;
  32. цвет: #ffffff;
  33. граница: 1px solid #eee;
  34. }
  35. #divMenu ul ul {
  36. позиция: абсолютная;
  37. видимость: скрыта;
  38. верх: 27 пикселей;
  39. }
  40. #divMenu ul li: hover ul {
  41. видимость: видимая;
  42. }
  43. #divMenu li: hover {
  44. background-color: # 945c7d;
  45. }
  46. #divMenu ul li: hover ul li a: hover {
  47. background-color: # 945c7d;
  48. }
  49. #divMenu a: hover {
  50. font-weight: bold;
  51. }

Здесь я использовал идентификатор

, другими словами «divMenu».

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

Выход


Показать скрыть раскрывающееся меню при наведении курсора мыши с помощью CSS

Тема: HTML / CSSPrev | След.

Ответ: Используйте CSS

: hover псевдокласс

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

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

  



 Показать скрыть раскрывающийся список с помощью CSS 
<стиль>
    ul {
        отступ: 0;
        стиль списка: нет;
        фон: # f2f2f2;
    }
    ul li {
        дисплей: встроенный блок;
        положение: относительное;
        высота строки: 21 пикс;
        выравнивание текста: слева;
    }
    ul li a {
        дисплей: блок;
        отступ: 8px 25px;
        цвет: # 333;
        текстовое оформление: нет;
    }
    ul li a: hover {
        цвет: #fff;
        фон: # 939393;
    }
    ul li ul.падать {
        минимальная ширина: 100%; / * Устанавливаем ширину раскрывающегося списка * /
        фон: # f2f2f2;
        дисплей: нет;
        позиция: абсолютная;
        z-индекс: 999;
        слева: 0;
    }
    ul li: hover ul.dropdown {
        дисплей: блок; / * Показать раскрывающийся список * /
    }
    ul li ul.dropdown li {
        дисплей: блок;
    }



    

  

Вопросы и ответы по теме

Вот еще несколько часто задаваемых вопросов по этой теме:

.
Оставить комментарий

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

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

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.