Выпадающее горизонтальное меню на css: Как сделать горизонтальное выпадающее меню для сайта на CSS

Разное 

Содержание

Как сделать в 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

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

<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>
<li><a href=»#»>Меню 3</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=»#»>Меню 4</a></li>
<li><a href=»#»>Меню 5</a></li>
</ul>

Работоспособность данной конструкции проверена в трех основных браузерах: Mozilla Firefox, Opera, и Internet Explorer.

Этот CSS проходит проверку по стандарту CSS3 !

* {
margin:0;
padding:0;
}
#nav {
font:13px verdana, arial, helvetica, sans-serif;
list-style-type:none;
width:100%;
height:25px;
display:inline-block;
background:#A39E92;
line-height:25px;
}
#nav li{
float:left;
width:120px;
margin-top:-10000px;
}
#nav li a {
width:120px;
text-decoration:none;
text-align:center;
color:#3A3732;
position:relative;
float:left;
margin-right:-119px;
margin-top:10000px;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
background:#797466;
margin-right:0;
color:#fff;
}
#nav li ul {
background:#A39E92;
float:left;
margin-top:-25px;
padding-top:25px;
margin-bottom:-10000px;
list-style-type:none;
}
#nav li ul li {
float:none;
margin:0;
width:auto;
}
#nav li ul li a {
float:none;
display:block;
margin:0;
margin-right:-1px;
background:#BFBCB5;
}

Скачать выпадающее горизонтальное меню

Иногда работающие в IE и Firefox’е стили, неработают или работают не корректно в Oper’е и наоборот, перед тем как применить «рецепт» проверяйте его работу в разных браузерах.

Выпадающее меню на 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; /*второй и последующие уровни расскрываются вправо*/
}

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

Создание меню на CSS – руководство для новичков

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

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

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

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

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

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

Разновидности меню в CSS

Существует сразу несколько видов и типов CSS меню:

  1. Главное меню. Это список определённых ссылок на ключевые разделы веб-сайта.
  2. Дополнительное меню. Такое меню имеет иерархическую структуру и бывает трёх типов:
    • Выпадающее меню. Раскрывается при наведении курсора мыши на пункт;
    • Всплывающее меню сайта. Раскрывается при клике на определённом пункте;
    • Статическое дополнительное меню для CSS. Древовидная структура, представленная в уже раскрытом виде.

Как создать меню в CSS?

Приведём пример создания простого горизонтального и вертикального меню на CSS с пояснениями.

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

<head>
<title>Горизонтальное меню сайта</title>

<style type="text/css">
.navigation {
   list-style: none; /* Отключение отображения маркеров. */
}
.navigation li {
   float: left; /* Выстраивание элементов списка в один ряд. */
   margin-right: 1px; /* создание отступов для того, чтобы не сливались пункты меню. */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Указание типа шрифта.  */
   font-size: 14px; /* Размер текста в ссылках. */
}
.navigation li a {
   display: block; /* Изменение отображения на блочное для того чтобы иметь возможность задать внутренние отступы. */
   padding: 15px 20px;  /* Внутри блочные отступы. */
   background: #0db5b5; /* Цвет блоков меню. */
   color: #3f3f3f; /* Цвет текста в блоках меню. */
   text-decoration: none; /* Устранение подчёркивания ссылок. */
   position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
}
.navigation li a:hover {
   background: #92d3d3; /* Цвет блока при наведении курсора. */
   color: #6b6b6b;  /* Цвет текста при наведении курсора. */
}
</style>
</head>
<body>
<ul> 
   <!-- Описание ссылок в меню и сами ссылки. -->
   <li><a href="https://www.internet-technologies.ru/news" target="_blank">Новости</a></li>
   <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Статьи</a></li>
   <li><a href="https://www. internet-technologies.ru/templates/" target="_blank">Шаблоны</a></li>
   <li><a href="https://www.internet-technologies.ru/books" target="_blank">Книги</a></li>
   <li><a href="https://www.internet-technologies.ru/scripts" target="_blank">Скрипты</a></li>
   <li><a href="https://www.internet-technologies.ru/lessons" target="_blank">Видео</a></li>
   <li><a href="http://talk.internet-technologies.ru/" target="_blank">Форум</a></li>
</ul>
<body>
</body>
</html>

В конечном итоге получается подобное горизонтальное меню:

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

<head>
<title>Вертикальное меню сайта</title>
<style type="text/css">
.navigation {
   list-style: none; /* Отключение отображения маркеров. */
   width: 120px;  /* Ширина меню. */
}
.navigation li {
   margin-top: 5px; /* Отступ между блоками по высоте, необходимый для того чтобы пункты меню не сливались */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Тип шрифта пунктов меню */
   font-size: 14px; /* Размер текста меню */
}
. navigation li a {
   display: block; /* Изменение отображения на блочное для того, чтобы иметь возможность задать внутренние отступы.  */
   padding: 4px 15px;  /* Отступы внутри блоков. */
   background: #0db5b5; /* Цвет блоков меню. */
   color: #3f3f3f; /* Цвет текста в блоках меню. */
   text-decoration: none; /* Устранение подчёркивания ссылок. */
   position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
}
.navigation li a:hover {
   background: #92d3d3; /* Цвет фона при наведении курсора мыши */
   color: #6b6b6b;  /* Цвет текста при наведении курсора мыши */
}
</style>
</head>
<body>
<!-- Описание ссылок в меню и сами ссылки. -->
<ul> 
   <li><a href="https://www.internet-technologies.ru/news" target="_blank">Новости</a></li>
   <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Статьи</a></li>
   <li><a href="https://www. internet-technologies.ru/templates/" target="_blank">Шаблоны</a></li>
   <li><a href="https://www.internet-technologies.ru/books" target="_blank">Книги</a></li>
   <li><a href="https://www.internet-technologies.ru/scripts" target="_blank">Скрипты</a></li>
   <li><a href="https://www.internet-technologies.ru/lessons" target="_blank">Видео</a></li>
   <li><a href="http://talk.internet-technologies.ru/" target="_blank">Форум</a></li>
</ul>
<body>
</body>
</html>

Вертикальное меню, полученное при помощи данного кода, выглядит так:

Руководствуясь всеми вышеперечисленными принципами, приведём код для простого выпадающего меню:

<ul>
  <li><a href="https://www.internet-technologies.ru/news">Новости</a></li>
  <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Статьи</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="https://www. internet-technologies.ru/templates/">Шаблоны</a>
    <ul>
      <li><a href="#">Ссылка 1</a></li>
    </ul>
  </li>
  <li><a href="https://www.internet-technologies.ru/books">Книги</a></li>
  <li><a href="https://www.internet-technologies.ru/scripts">Скрипты</a></li>
  <li><a href="https://www.internet-technologies.ru/lessons">Видео</a></li>
  <li><a href="http://talk.internet-technologies.ru">Форум</a></li>
</ul>

<style type="text/css">	

#menu {
  background: #0db5b5;
  width: 60%;
  padding:1;
  text-align: center;
  float:left;
  font-family: Verdana, Arial, Helvetica, sans-serif; 
}
#menu a {
  color: #3f3f3f;
  text-decoration: none;
}
#menu a:hover {
  color: #6b6b6b;
}
#menu ul {
  padding:0;
  margin:0;
}
#menu li {
  list-style: none;
  padding: 0 15px 0 0;
  width:100px;
  margin: 0 auto;
  float:left;
  line-height: 50px;
}
#menu li ul { 
  position:absolute;
  display: none;
} 
#menu li ul li {
  float: none;
  display: inline;
  width:100px;
  line-height:35px;
}
#menu li ul li:hover {
  background: #c392b;
}
#menu li:hover ul {
  display:block;
}
#menu li ul li { 
  display: block; 
  background:#92d3d3;
}
</style>

Получаем такое выпадающее меню:

Как вы видите, достаточно простая HTML разметка и всего несколько строк CSS кода позволяют создать простое, но стильное меню, которое обязательно найдёт свое место в каком-либо веб-сайте. Обязательно попробуйте реализовать что-то подобное самостоятельно.

Желаем удачи!

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

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

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

Создаем горизонтальное выпадающее меню на CSS – Zencoder

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

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

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

Код, написанный на SASS (SCSS) короче и логически читается проще, чем CSS. Поэтому, рекомендую изучить этот вопрос в статьях “SASS (SCSS) в картинках — Часть 1”, “SASS (SCSS) в картинках — Часть 2”.

Мы же приступим к созданию горизонтального меню с подменю “на коленках”. Почему говорю так? Дело в том, что существует масса готовых примеров и кода, а также генераторов различных меню. Но они неинтересны — нам нужно разобраться в принципе построения и возможности самому написать такую навигацию. Как обычно, начинаем с каркаса меню, выполненного на HTML:

<ul>
  <li>
    <a href="#">Link_1</a>
      <ul>
      <li>
        <a href="#">Link_1-1</a>
      </li>
      <li>
        <a href="#">Link_1-2</a>
      </li>
      <li>
        <a href="#">Link_1-3</a>
      </li>
      <li>
        <a href="#">Link_1-4</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link_2</a>
  </li>
  <li>
    <a href="#">Link_3</a>
      <ul>
      <li>
        <a href="#">Link_3-1</a>
      </li>
      <li>
        <a href="#">Link_3-2</a>
      </li>
      <li>
        <a href="#">Link_3-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link_4</a>
  </li>
  <li>
    <a href="#">Link_5</a>
      <ul>
      <li>
        <a href="#">Link_5-1</a>
      </li>
      <li>
        <a href="#">Link_5-2</a>
      </li>
      <li>
        <a href="#">Link_5-3</a>
      </li>
      <li>
        <a href="#">Link_5-4</a>
      </li>
      <li>
        <a href="#">Link_5-5</a>
      </li>
    </ul>
  </li>
</ul>

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

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

Приступим к оформлению нашего меню с помощью CSS. Сразу оговорюсь, что примеры кода, представленного здесь, написаны на SASS (SCSS). Начнем с того, что расположим навигацию горизонтально:

.hormenu{
  margin: 50px 0 0 50px;
  overflow: hidden;
  li{
    float: left;
    margin-left: 1px;
    &:first-child{
      margin-left: 0;
    }

Думаю, ничего загадочного в этой части кода нет. Делаем отступ для меню и располагаем элементы li внутри него горизонтально с помощью свойства float: left. Предотвращаем схлопывание (collapse) блока-родителя ul, прописав для него overflow: hidden.

Чтобы пункты меню были легко различимы, сделаем промежуток между ними с помощью левого margin в 1px. И для аккуратности уберем левый margin у первого элемента li.

Далее оформляем ссылки внутри пунктов li. Делаем ссылки блочными, чтобы кликабельной была вся область пункта навигации и задаем для нее высоту. Также указываем интерлиньяж, чтобы выровнять текст по вертикали и text-align для выравнивания по горизонтали. Цвет фона и цвет текста — как обычно.

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

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

При скрытии же подменю пункты основного меню будут “сжиматься”, уменьшая ширину до своей собственной. Вот для этой цели и применяется явное задание ширины элемента a:

a{
  display: block;
  line-height: 25px;
  height: 25px;
  width: 130px;
  text-align: center;
  background-color: #ccc;
  color: #ccc - #555;
  position: relative;
}

Продолжим стилизацию нашей навигации и займемся подменю, а точнее — его подпунктами li. Уберем у этих элементов плавание влево float и левый margin, чтобы они не наследовали эти свойства. Убираем плавание, чтобы элементы li расположились вертикально, а левый margin — убрать “лесенку”:

li{
  float: none;
  margin: 0 0 1px 0;

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

a{
  background-color: #ccc + #111;
  color: #ccc - #333;
  &:hover{
    background-color: #ccc + #222;
  }
}

Теперь самое главное — сделаем подпункты меню выпадающими. Для этого сначала спрячем его, убрав из DOM-модели HTML-документа с помощью значения свойства dislay: none:

.sub-hormenu{
  display: none;

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

&:hover .sub-hormenu{
  display: block;
}

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

Как раз здесь нам и понадобиться относительное позиционирование для ссылок, о котором говорилось ранее. Создание стрелки “поручим” отдельному классу arrow, который будем “вешать” только на нужные нам ссылки:

. arrow:after{
  content: '';
  position: absolute;
  top: 50%;
  left: 80%;
  width: 0;
  height: 0;
  border-top: 4px solid #ccc - 666;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  margin-top: -2px;
}

Вот, в принципе, и все. Основная задача выполнена и горизонтальное меню с выпадающим подменю у нас работает. Конечно, можно озадачиться целью “окрасить” активный пункт основного меню в тот же цвет, что и у подменю. Но эта проблема не входит в рассмотрение поставленной нами задачи. Ниже представлен полный код правил CSS (SCSS) для нашего меню:

@import "compass/reset";

 a{
   text-decoration: none;
 }

 .arrow:after{
   content: '';
   position: absolute;
   top: 50%;
   left: 80%;
   width: 0;
   height: 0;
   border-top: 4px solid #ccc - 666;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   margin-top: -2px;
 }

 .hormenu{
   margin: 50px 0 0 50px;
   overflow: hidden;
   li{
     float: left;
     margin-left: 1px;
     &:first-child{
       margin-left: 0;
     }
     &:hover . sub-hormenu{
       display: block;
     }
     .sub-hormenu{
       display: none;
       li{
         float: none;
         margin: 0 0 1px 0;
         a{
           background-color: #ccc + #111;
           color: #ccc - #333;
           &:hover{
             background-color: #ccc + #222;
           }
           &:after{
             content: none;
           }
         }
       }
     }
     a{
       display: block;
       line-height: 25px;
       height: 25px;
       width: 130px;
       text-align: center;
       background-color: #ccc;
       color: #ccc - #555;
       position: relative;
     }
   }
 }

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

На этом все.

cssdropdown menu

горизонтальное » Скрипты для сайтов

8 259 Скрипты / Menu & Nav

Эффект зачеркивания при наведении в меню

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

5 909 Скрипты / Menu & Nav

Гибкое горизонтальное меню

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

6 230 Скрипты / Menu & Nav

Диагональное меню на CSS

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

2 982 Скрипты / Menu & Nav

Горизонтальное меню на CSS3

Симпатичное горизонтальное CSS3 меню с всплывающими пунктами при наведении.

5 468 Скрипты / Menu & Nav

Выпадающее меню на CSS3

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

3 263 Скрипты / Menu & Nav

Размытое меню на CSS3

Простое горизонтальное меню с эффектом размытия и с элементом адаптивности. Используется CSS3 и HTML5.

3 133 Скрипты / Menu & Nav

HorizontalNav — горизонтальная навигация

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

4 252 Скрипты / Menu & Nav

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

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

2 182 Скрипты / Menu & Nav

Меню с эффектом подпрыгивания

Интересное подпрыгивающее меню (bounce), сделанное с помощью псевдо элементов и пользовательских атрибутов на CSS3. В примере простое горизонтальное и горизонтальное с выпадающими под пунктами меню.

3 195 Скрипты / Menu & Nav

Многоуровневое выпадающее меню

Многоуровневое выпадающее меню на CSS2. При этом работает оно в IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) и Google Chrome.

2 267 Скрипты / Menu & Nav

Многоцветное меню на CSS3

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

2 949 Скрипты / Menu & Nav

Выпадающее CSS3 меню

Выпадающее меню на CSS3 сделанное на базе UI созданного Владимиром Кудиновым.

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

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

Я сделаю это в два этапа:

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

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

Ничего особенного. Теперь давайте посмотрим на css:

 ul # Horiznav {
маржа: 0;
отступ: 0;
тип-стиль-список: нет;
высота: 32 пикс.
}

#horiznav li {
плыть налево;
ширина: 150 пикселей
}

#horiznav li a {
дисплей: блок;
ширина: 150 пикселей;
высота строки: 30 пикселей;
выравнивание текста: центр;
цвет белый;
текстовое оформление: нет;
цвет фона: # EA9531;
граница: сплошной белый 1px
}

#horiznav li a: hover {
цвет: # 333333
}

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

  • . Этот код дает нам это:

    Добавление раскрывающегося списка

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

      , вложенных в соответствующий элемент
    • . Как это:

      Хорошо, теперь о css. Нам нужно сделать несколько дополнений — отмечено красным:

      ul # Horiznav, #horiznav ul {
маржа: 0;
отступ: 0;
тип-стиль-список: нет;
высота: 32 пикс.
}

#horiznav li {
плыть налево;
width: 152px;
позиция: относительная
}

#horiznav li a {
дисплей: блок;
ширина: 150 пикселей;
высота строки: 30 пикселей;
выравнивание текста: центр;
цвет белый;
текстовое оформление: нет;
цвет фона: # EA9531;
граница: сплошной белый 1px
}

#horiznav li a: hover {
цвет: # 333333
}

#horiznav li ul {
дисплей: нет;
позиция: абсолютная;
слева: 0;
верх: 32 пикселя
}

#horiznav li: hover ul {
дисплей: блок
}

#horiznav li ul a {
цвет фона: # FFB33B
}

      См. Пояснения в комментариях к коду.На самом деле удивительно небольшое количество css. Выпадающие списки обычно скрыты и появляются при наведении курсора на родительский

    • . Это дает нам (как и вверху страницы):

      Вы увидите, что при использовании абсолютного позиционирования раскрывающийся список появляется поверх всего остального на странице — это то, что мы хотим. И это прекрасно работает практически во всех популярных сегодня браузерах. В частности, я тестировал IE7, IE8, FF3, Chrome, Opera9, Opera 10, Safari4. Вы заметите, что чего-то не хватает.Никаких призов за угадание того, какой браузер вызывает дополнительные трудности…

      Работа с раскрывающимся списком в IE6

      IE6 не поддерживает: hover, за исключением элементов . Так что без лишнего кода наше красивое раскрывающееся меню вообще не будет работать в IE6. К счастью, есть решение под названием csshover, которое вы найдете здесь вместе с инструкциями по его использованию. Я лично считаю версию 2 этого программного обеспечения наиболее надежной.

      Добавление анимации с помощью jQuery

      Чтобы добавить анимацию — плавные переходы, слайды и т. Д. — взгляните на мой плагин jQuery здесь, который позволяет использовать более сложную анимацию для пользователей javascript, сохраняя при этом подход css для тех, у кого нет.

      Решено с помощью 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 состояния и настройка исчезновения кольца фокусировки

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

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

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

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

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

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

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

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

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

      Подробнее о

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

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

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

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

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

      HTML

      CSS

        .menu {
    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;
    -о-переход: легкость всего 0,3 с;
    переход: вся легкость 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.

      1. Начните со следующего HTML-документа, содержащего неупорядоченный список:
         




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


<основной>
<заголовок>
 
         Горизонтальная навигация с раскрывающимся меню
    • Без CSS он будет выглядеть следующим образом:
  • Создайте файл для внешней таблицы стилей и создайте ссылку на него из HTML, используя следующий тег:
  • Внутри таблицы стилей используйте следующий CSS для создания базового горизонтального меню:
     
ol, ul {
стиль списка: нет;
}
#главное меню {
маржа: 10 пикселей;
ширина: 900 пикселей;
семейство шрифтов: без засечек;
}
#mainMenu li {
дисплей: блок;
ширина: 120 пикселей;
плыть налево;
маржа слева: 2px;
граница: 1px solid # 000;
}

#mainMenu a {
дисплей: блок;
отступ: 3 пикселя;
текстовое оформление: нет;
цвет фона: #fff;
цвет: # 009;
}

#mainMenu a: hover {
цвет фона: # 009;
цвет: #fff;
}
  • Откройте HTML-страницу в браузере.Этот код отображает следующее:
  • В HTML добавьте вложенный список под элементом списка «О программе».
  • В CSS установите относительное положение элементов главного меню.Нам нужно будет позиционирование подменю с использованием абсолютного позиционирования, но с абсолютным позиционированием элементы располагаются в пределах их ближайшего нестатически позиционированного, содержащего элемент. Итак, чтобы подготовиться к этому, мы сначала сделаем основные элементы списка относительно позиционируется:
     
#mainMenu li {
 позиция: относительная; 
дисплей: блок;
ширина: 120 пикселей;
плыть налево;
маржа слева: 2px;
граница: 1px solid # 000;
}
  • Абсолютно позиционируйте подменю. Подменю содержатся в элементах ul внутри li элементов.Следующее правило использует абсолютное позиционирование для позиционирования их непосредственно под этими элементами li: 
    #mainMenu li ul {
позиция: абсолютная;
маржа: 0px;
отступ: 0 пикселей;
слева: -3px;
верх: 22px;
}
  • Скрыть подменю. Добавить дисплей: нет; к правилу выше, чтобы скрыть подменю. 
    #mainMenu li ul {
 дисплей: нет; 
позиция: абсолютная;
маржа: 0px;
отступ: 0 пикселей;
слева: -3px;
верх: 22px;
}
  • Стиль опций подменю.Два правила ниже добавляют границы вокруг подменю. параметры. Мы отключаем верхнюю границу для всех, кроме первого варианта, который мы определяем с псевдоклассом: first-child, чтобы мы не получали двойную толщину граница, полученная из верхней и нижней границ смежных параметров.
     
#mainMenu li ul {
позиция: абсолютная;
маржа: 0px;
отступ: 0 пикселей;
слева: -3px;
верх: 22px;
дисплей: нет;
}
#mainMenu li ul li {
ширина: 150 пикселей;
размер шрифта: меньше;
граница-верх: нет;
}
#mainMenu li ul li: first-child {
border-top: 1px solid # 000;
}
  • Отображать подменю, когда пользователь наводит курсор на основную опцию.Современный браузеры позволяют использовать псевдокласс: hover почти для всех элементов, включая список пунктов. В приведенном ниже коде для свойства отображения подменю устанавливается значение блокировать, когда пользователь наводит курсор на родительский элемент списка: 
    #mainMenu li: hover ul {
дисплей: блок;
}
  • Готовый CSS должен выглядеть следующим образом:
     
#главное меню {
маржа: 10 пикселей;
ширина: 900 пикселей;
семейство шрифтов: без засечек;
}
#mainMenu li {
положение: относительное; отображение: блок;
ширина: 120 пикселей;
плыть налево;
маржа слева: 2px;
граница: 1px solid # 000;
}
#mainMenu a {
дисплей: блок;
отступ: 3 пикселя;
текстовое оформление: нет;
цвет фона: #fff;
цвет: # 009;
}
#mainMenu a: hover {
цвет фона: # 009;
цвет: #fff;
}
#mainMenu li ul {
позиция: абсолютная;
маржа: 0px;
отступ: 0 пикселей;
слева: -3px;
верх: 22px;
дисплей: нет;
}
#mainMenu li ul li {
ширина: 150 пикселей;
размер шрифта: меньше;
граница-верх: нет;
}
#mainMenu li ul li: first-child {
border-top: 1px solid # 000;
}
#mainMenu li: hover ul {
дисплей: блок;
}
  • Откройте HTML-страницу в браузере.Этот код отображает следующее:

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

    Простое горизонтальное выпадающее меню 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; }
    Раскрывающееся меню CSS

    — Учебное пособие по Dreamweaver

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

    Вот пример горизонтального меню Drop Down css, который мы создадим в видеоуроке Dreamweaver:

    1.Разметка HTML для раскрывающегося меню

    Скопируйте и вставьте этот HTML-код для раскрывающегося меню CSS на свою веб-страницу:

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

    2. Добавьте стили CSS для выпадающего меню

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

     #navMenu {
    маржа: 0;
    ширина: авто;
 }

  #navMenu ul {
    маржа: 0;
    отступ: 0;
    высота строки: 30 пикселей;
 }

  #navMenu li {
    маржа: 0;
    отступ: 0;
    стиль списка: нет;
    плыть налево;
    положение: относительное;
    фон: # 999;
 }

  #navMenu ul li a {
    выравнивание текста: центр;
    высота: 30 пикселей;
    ширина: 150 пикселей;
    дисплей: блок;
    цвет: # 000;
    семейство шрифтов: "Comic Sans MS", курсив;
    текстовое оформление: нет;
    цвет: #FFF;
    граница: сплошная 1px #FFF;
    тень текста: 1px 1px 1px # 000;
 }

  #navMenu ul ul {
    позиция: абсолютная;
    видимость: скрыта;
    верх: 32 пикселя;
 }

  #navMenu ul li: hover ul {
    видимость: видимая;
    z-индекс: 9999;
 }

  / ********************************************* /

  / * устанавливает цвет наведения верхнего уровня * /

  #navMenu li: hover {
   фон: # 09F;
 }

  / * устанавливает цвет и фон наведения элементов ссылок * /

  #navMenu ul li: hover ul li a: hover {
    цвет: # 000;
    фон: #CCC;
 }

  / * Изменяет цвет текста при наведении курсора на главное меню * /

  #navMenu a: hover {
  цвет: # 000;
 }
  
 / * Содержит поплавок * /

 .clearFloat {
    ясно: оба;
    маржа: 0;
    отступ: 0;
 }

 / * Исправление отображения IE7 * /
 
 #navmenu ul li {

  дисплей: встроенный;
 
 }
    Выпадающие меню

    CSS и, в частности, выпадающие меню Horizontal css являются производными от исходного меню JavaScript suckerfish. Dreamweaver имеет возможность создавать раскрывающееся меню Spry, но в этом методе используется много кода, который в современных браузерах, использующих современные возможности css, не нужен в основном потому, что раскрывающееся меню Spry загружается дольше, чем раскрывающееся меню в CSS.Быстрое меню также создает много тяжелого кода и загромождает ваши веб-страницы. Многие веб-мастера-любители не будут знать, как минимизировать свой JavaScript, и поэтому останутся с медленной загрузкой веб-страницы и большим количеством беспорядка в своих html-документах.

    Выпадающее меню CSS занимает особое место теперь, когда W3C объявил, что больше не будет поддерживать Internet Explorer 6. Пользователи IE6 потеряют часть возможности фонового наведения, поскольку IE6 позволяет использовать только псевдо-наведение. селектор на ‘a’, а не какой-либо другой селектор CSS.Конечно, есть способ обойти это, но с учетом того, что по состоянию на май 2010 года оставалось только 7,9% оставшихся пользователей IE6, и тот факт, что пользователи в основном из неанглоязычных стран, зачем тратить время на обслуживание этих реликвий последнего десятилетия?

    комментарии от Disqus. комментарии в блоге, разработанные

    Создание горизонтальной панели меню с раскрывающимися меню — простой HTML и

    Как создать и отобразить горизонтальное раскрывающееся меню с простым эффектом наведения в HTML и CSS

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

    Итак, давайте начнем.

    При этом мы будем последовательно выполнять следующие шаги:

    Шаг 1. Создание элемента списка в HTML для главного или родительского меню.

    Шаг 2. Настройка списков HTML в CSS для выравнивания по горизонтали

    Шаг 3. Создание элементов подсписка для главного или родительского меню, которые мы создали ранее в HTML

    Шаг 4. Настройка меню подсписка в CSS

    STEP1 : Создание родительского меню в HTML:

    Этот первый шаг относительно проще; нам нужно создать список HTML с необходимыми элементами списка.Где нам создавать элементы списка? Что ж, ответ очень прост — в том же самом месте, где мы хотим, чтобы наша строка меню отображалась. В моем случае я хотел, чтобы строка меню отображалась вверху страницы; Итак, я буду создавать элемент списка HTML вверху страницы, чуть ниже открывающего тега тела. Вы можете создавать его где угодно.

    Сначала я создам элемент div, используя имя класса «menu-holder», и мы заключим наш элемент списка в этот элемент div.

    Итак, мы создали список HTML, завернутый в элемент div с именем класса « menu-holder ».В этом случае мы использовали тип неупорядоченного списка, что означает, что созданный список будет вертикальным, а стиль списка должен быть маркированным по умолчанию.

    ШАГ2:

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

    Убедившись, что связь между главной HTML-страницей и внешним CSS-файлом установлена, мы приступим к настройке нашего элемента списка HTML с именем класса, которое мы использовали для завершения списка:

    style.css

    .меню-держатель {

    ширина: 100%;

    набивка: 1 бэр;

    / * фон: # fffd82; * /

    размер коробки: бордюр-бокс;

    нижнее поле: 10 пикселей;

    нижняя граница: сплошной 1 пиксель #cccccc;

    }

    .держатель меню ul {

    стиль списка: нет;

    }

    . держатель меню ul li {

    поплавок: левый;

    граница справа: сплошной 1px # ff0000;

    }

    .menu-holder ul li a {

    ширина: авто;

    дисплей: блочный;

    маржа: 0 1бэр;

    текстовое оформление: нет;

    выравнивание текста: по центру;

    цвет: #dddddd;

    }

    .держатель меню ul li a: hover {

    фон: # ff0000;

    цвет: #FFF;

    }

    Теперь, если мы зайдем на сайт, мы должны увидеть что-то вроде этого:

    А теперь давайте объясним. В первом случае мы создали элемент div с именем класса «menu-holder»; мы сначала настроим его. Это то, что наблюдается в первой части кода, мы настроили имя класса «держатель меню».

    .меню-держатель {

    Недвижимость: стоимость

    }

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

    .menu-holder ul {

    стиль списка: нет;

    }

    С помощью этого свойства мы заявили, что не должно быть никакого типа в стиле списка для неупорядоченного списка внутри имени класса «menu-holder».

    В следующем случае нам нужно настроить элементы списка в неупорядоченном списке с тем же именем класса «menu-holder». Таким образом, синтаксис записывается как:

    .menu-holder ul li {

    поплавок: левый;

    граница справа: сплошной 1px # ff0000;

    }

    Условие

    « float: left » должно выравнивать элементы списка по горизонтали. Условие « border-right » должно устанавливать границу справа вдоль правой стороны каждого элемента списка в меню.

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

    .menu-holder ul li a {

    ширина: авто;

    дисплей: блочный;

    маржа: 0 1бэр;

    текстовое оформление: нет;

    выравнивание текста: по центру;

    цвет: #dddddd;

    }

    В этом контексте я хотел бы добавить, что CSS читает любое имя селектора справа налево.Например, имя селектора ‘.menu-holder ul li a’ следует читать как любую активную ссылку (a) в элементе списка (li) неупорядоченного списка первого порядка (ul) под любым именем класса ‘.menu -holder ‘должен иметь следующие свойства внутри, как упомянуто выше в фигурных скобках.

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

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

    .clearfix {

    ясно: оба;

    }

    И нам нужно использовать это имя класса с элементом div, сразу под элементами списка, которые мы создали в главном меню в index.html :


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

    ШАГ3 :

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

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

    Пропустить часть «цвет фона»; вы всегда можете добавить фоновый цвет к имени класса «держатель меню», в этом нет никакого смысла; вы можете добавить один или удалить цвет фона. Но самое удивительное — это горизонтальное выравнивание элементов подсписка. До сих пор мы не добавляли к ним никаких свойств CSS, тогда почему же они выровнены по левому краю? Что ж, ответ довольно прост; меню подсписка наследует свои свойства от главного или родительского меню.

    ШАГ4 :

    Теперь давайте настроим подменю. Исходный код синтаксиса CSS в его окончательном виде —

    style.css полный исходный код

    .меню-держатель ul {

    стиль списка: нет;

    }

    .menu-holder ul li {

    поплавок: левый;

    граница справа: сплошной 1px # ff0000;

    позиция: относительная;

    }

    .держатель меню ul li a {

    ширина: авто;

    дисплей: блочный;

    маржа: 0 1бэр;

    текстовое оформление: нет;

    выравнивание текста: по центру;

    цвет: #dddddd;

    }

    .menu-holder ul li a: hover {

    фон: # ff0000;

    цвет: #FFF;

    }

    / * Элемент подсписка создан * /

    .menu-holder ul li ul {

    стиль списка: нет;

    позиция: абсолютная;

    }

    .держатель меню ul li ul li {

    float: нет;

    граница-правая: нет;

    }

    .меню-держатель ul li ul li a {

    выравнивание текста: по левому краю! Важно;

    текстовое оформление: нет;

    дисплей: нет; / * Во время загрузки подменю не должно отображаться * /

    ширина: авто;

    margin-top: 3 пикселя;

    набивка: 0,5 бэр;

    размер коробки: бордюр-бокс;

    фон: васильковый;

    z-index: 1;

    -moz-transition: фон 0.3 с линейный, цвет 1 с линейный;

    -webkit-transition: фон 0,3 с линейный, цвет 1 с линейный;

    -ms-transition: фон 0,3 с линейный, цвет 1 с линейный;

    -o-переход: фон 0,3 с линейный, цвет 1 с линейный;

    переход: фон 0,3 с линейный, цвет 1 с линейный;

    }

    .menu-holder ul li ul li a: hover {

    фон: #cccccc;

    цвет: # 756767;

    }

    .держатель меню ul li: hover ul li a {

    дисплей: блочный; / * При наведении курсора должен отображаться элемент подсписка * /

    }

    .clearfix {

    ясно: оба;

    }

    Давайте сначала объясним.

    Есть несколько определенных правил CSS для настройки элементов подсписка внутри основного элемента списка; нам нужно настроить таргетинг на список внутри основного списка. Вот что здесь было сделано. Поскольку мы создали еще один неупорядоченный список внутри главного меню, нам нужно сначала настроить таргетинг на него.Таким образом, здесь идет имя селектора «.menu-holder ul li ul», который нацелен на неупорядоченный список, созданный внутри элемента списка главного меню (в этом случае мы зациклили еще один неупорядоченный список внутри раздела «Портфолио»). С другой стороны, мы заявили, что позиция этого неупорядоченного списка второго порядка должна оставаться «абсолютной».

    В следующем случае мы нацелены на элемент списка второго порядка в неупорядоченном списке второго порядка. Это то, что мы использовали в следующем названии селектора — ‘.menu-holder ul li ul li’.В нем говорится, что любой элемент списка в неупорядоченном списке, который входит в элемент списка его первого порядка или родительский неупорядоченный список в имени класса ‘menu-holder’, не должен перемещаться в каком-либо направлении, и не должно быть никаких граница-правая тоже. При этом подменю подсписка должно оставаться вертикальным.

    В следующем случае нам нужно настроить активные ссылки в этом неупорядоченном списке второго порядка. Это то, что мы сделали в последнем месте — «.menu-holder ul li ul li a».

    Теперь «абсолютная» позиция не работает, пока родительский контейнер не находится в «относительной» позиции.Итак, какой именно? Мы хотим, чтобы при наведении курсора на элемент списка главного меню соответствующие элементы подсписка должны были выпадать. Вот почему нам нужно установить элемент списка главного меню так, чтобы он помещался в «относительную» позицию, а не что-либо еще. Это то, что мы сделали с ‘.menu-holder ul li’, сохранив его относительную позицию.

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

    Итак, «style.css ’, как показано выше; и соответствующий HTML-код должен быть —

    Index.html

    <заголовок>

    Это общее обсуждение

    <тело>


    Вот четыре видео друг за другом, чтобы вы могли глубже понять суть дела:

    Горизонтальная строка меню в HTML и CSS: Часть 1


    Горизонтальная строка меню в HTML и CSS: Часть 2


    Горизонтальная строка меню в HTML и CSS — Часть 3


    Горизонтальная строка меню в HTML и CSS — Часть 4


    .

    No related posts.

    Автор записи

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

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