Все что нужно знать о выпадающих меню на CSS

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

HTML структура

  HTML код для любого выпадающего меню практически всегда одинаков, разница заключается лишь в указании и количестве применяемых селекторов.
  Код для самого простого двухуровневого выпадающего меню будет выглядеть примерно так:
 <ul class='menu'>
  <li><a href="#">Section 1</a></li>
  <li><a href="#">Section 2</a>
   <ul> <!--выпадающий блок-->
    <li><a href="#">Some page</a></li>
    <li><a href="#">Some page</a></li>
    <li><a href="#">Some page</a></li>
   </ul>
  </li>
  <li><a href="#">Section 3</a>
   <ul> <!--выпадающий блок-->
    <li><a href="#">Some page</a></li>
    <li><a href="#">Sub-section</a>
      <ul> <!--выпадающий блок второго уровня-->
       <li><a href="#">Some page</a></li>
       <li><a href="#">Some page</a></li>
       <li><a href="#">Some page</a></li>
      </ul>
    </li>
   </ul>
  </li>
 </ul>
  Как видим, меню строится на применении HTML списков - это просто и удобно, однако возможно сверстать такое меню на основе других HTML-тегов. В любом случаи, выпадающие блоки могут состоять не только из ссылок, в них возможно включать самые различные блочные и строчные элементы, например блоки с описанием или дополнительные изображения.

Принцип действия и CSS

  Итак, принцип действия выпадающих меню всегда одинаков - изначально перед посетителем обычное меню, но в ответ на какое-либо с ним действие(наведение курсора или клик) появляются дополнительные блоки - подменю. Такой подход позволяет размещать довольно большой объем ссылок для удобства навигации по сайту, занимая при этом минимум полезного пространства.
  Популярность таких меню обусловлена тем, что подобного эффекта (выпадения-появления) можно добиться используя лишь свойства CSS, без внедрения JavaScript.
  В большинстве случаев чтобы "оживить" меню, т.е. сделать его непосредственно "выпадающим", манипулируют CSS свойством display с различными значениями - none для сокрытия и block или inline-block для появления выпадающего блока.
Для сокрытия/появления блоков можно применять и иные свойства CSS, чаще это делается когда к меню применяется эффекты CSS3-анимации
  В зависимости от потребностей и дизайна сайта, тип выпадающего меню может быть вертикальным, горизонтальным, реже линейным. Структура кода CSS всегда сходна, но есть и отличия для различных типов.
 Пример кода CSS горизонтального меню:
/*обнуление стилей*/
*{
  margin: 0;
  padding: 0;
  border: none;
}
ul, li {
  list-style-type: none; /*убираем маркеры списка*/
}
li a {
  text-decoration: none; /*убираем подчеркивание ссылок*/
}
/*меню*/
.menu li {
  position: relative; /*позиционирование*/
  float: left; /*обтекание слева*/
}
.menu ul {
  position: absolute; /*позиционирование выпадающих блоков*/
  display: none; /*скрываем блоки*/
  min-width: 150px; /*минимальная ширина выпадающих блоков*/
}
.menu li:hover > ul {
  display: block; /*показываем блоки при наведении курсора на родителя*/
}
/*положение выпадающих блоков первого уровня*/
.menu ul {
  left: 0;
  top: 100%;
}
/*положение вложенных выпадающих блоков*/
.menu li ul li ul{
  left: 100%;
  top: 0%;
}
RESULT
При верстке вертикального выпадающего меню необходимо:
  - точно указать ширину (width) всего блока меню (в данном случаи для селектора .menu);
  - свойство обтекания float для основных разделов не указывается.   Для всех выпадающих блоков можно указать одно положение, относительно основного.
  Тогда код CSS будет выглядеть примерно так:
.menu {
  width: 150px; /*ширина всего блока*/
}
.menu li {
  position: relative;
}
.menu ul {
  position: absolute;
  display: none;
  min-width: 150px;
}
.menu li:hover > ul {
  display: block;
}
/*положение всех выпадающих блоков*/
.menu li ul {
  left: 100%;
  top: 0%;
}
  Теперь, чтобы сделать выпадающее меню для сайта в полном смысле этого слова, нужно лишь дополнить уже имеющийся "скелет", записывая для необходимых селекторов свойства CSS с желаемыми значениями.
  Пример CSS простейшего оформления:
/*меню*/
.menu {
  background: #000;
  border: 1px solid #666;
  border-radius: 3px;
  height: 40px;
}
.menu li {
  position: relative;
  float: left;
  height: 40px;
}
/*ссылки*/
.menu li a {
  display: block;
  padding: 0 5px;
  margin: 3px;
  font: normal normal 14px/28px Tahoma, sans-serif;
  color: #FFF;
}
.menu li:hover > a {
   background: #0C6;
}
/*выпадающие блоки*/
.menu ul {
  position: absolute;
  display: none;
  background: #666;
  border: 1px solid #999;
  min-width: 150px;
}
.menu li:hover > ul {
  display: block;
}
.menu ul {
  left: 0;
  top: 100%;
}
.menu li ul li ul{
  left: 100%;
  top: 0%;
}
RESULT

Применение различных свойств для сокрытия выпадающих блоков

  Как было замечено выше, наиболее часто применяемое CSS свойство, которое используют для того чтобы скрыть/показать дополнительные блоки - display. Однако, оно далеко не основное, получить желаемый эффект возможно и применяя иные свойства, например overflow или смещая выпадающий блок далеко за видимую область экрана с помощью свойств top или left.
  Вариант кода с использованием св-ва overflow
.menu {
  background: #000;
  border: 1px solid #666;
  border-radius: 3px;
  height: 40px;
}

.menu li {
  position: relative;
  float: left;
  height: 40px;
  overflow: hidden; /*все блоки вне видимой области будут скрыты*/
}
/*ссылки*/
.menu li a {
  display: block;
  padding: 0 5px;
  margin: 3px;
  font: normal normal 14px/28px Tahoma, sans-serif;
  color: #FFF;
}
.menu li:hover > a {
   background: #0C6;
}
/*выпадающие блоки*/
.menu ul {
  position: absolute;
  *display: none;
  background: #666;
  border: 1px solid #999;
  min-width: 150px;
}

.menu li:hover {
  overflow: visible; /*при наведении покажет скрытую область*/
}
.menu ul {
  left: 0;
  top: 100%;
}
.menu li ul li ul{
  left: 100%;
  top: 0%;
}
  Вариант кода с использованием св-ва top
.menu {
  background: #000;
  border: 1px solid #666;
  border-radius: 3px;
  height: 40px;
}
.menu li {
  position: relative;
  float: left;
  height: 40px;
}
/*ссылки*/
.menu li a {
  display: block;
  padding: 0 5px;
  margin: 3px;
  font: normal normal 14px/28px Tahoma, sans-serif;
  color: #FFF;
}
.menu li:hover > a {
  background: #0C6;
}
/*выпадающие блоки*/
.menu ul {
  position: absolute;
  background: #666;
  border: 1px solid #999;
  min-width: 150px;

  top: -9999em; /*изначальное смещение выпадающих блоков*/
}
.menu li:hover > ul {
  left: 0;
  top: 100%;
}
.menu li ul li:hover > ul {
  left: 100%;
  top: 0%;
}
RESULTS
  Данные методы на сегодняшний день становятся все более популярными, т.к. позволяют применять к выпадающим меню анимационные эффекты доступные в CSS3.

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

  Эффекты, применяемые к появляющимся блокам меню могут быть самыми разными, например: плавное проявление или развертывание выпадающего блока.
DEMO
  Таких результатов позволяет добиться использование свойства transition, которое плавно изменять значения свойств элемента.
.menu {
  background: #000;
  border: 1px solid #666;
  border-radius: 3px;
  height: 40px;
}
.menu li {
  position: relative;
  float: left;
  height: 40px;
  overflow: hidden;
}
/*ссылки*/
.menu li a {
  display: block;
  padding: 0 5px;
  margin: 3px;
  font: normal normal 14px/28px Tahoma, sans-serif;
  color: #FFF;
}
.menu li:hover > a {
   background: #0C6;
}

.menu ul {
  position: absolute;
  background: #666;
  border: 1px solid #999;

/*установленные начальные параметры*/
  width: 0px;
  opacity: 0;
/*параметры применяемой анимации*/
  -webkit-transition: all .25s ease .1s;
  -moz-transition: all .25s ease .1s;
  -o-transition: all .25s ease .1s;
  -ms-transition: all .25s ease .1s;
  transition: all .25s ease .1s;
}
.menu li:hover {
  overflow: visible;
}

/*приобретаемые параметры при наведении на родителя*/
.menu li:hover > ul {
  opacity: 1;
  width: 150px;
}
.menu ul {
  left: 0;
  top: 100%;
}
.menu li ul li ul{
  left: 100%;
  top: 0%;
}
Параметры для свойства transition задаются в следующем порядке:
[свойство|продолжительность анимации|тип анимации|пауза перед выполнением]
Например:
  transition: height 1s easy-in .5s;
  Что на словах можно истолковать как: плавно изменить высоту элемента, в течении 1 секунды, ускоряясь в завершении, начав анимацию с паузой в полсекунды.
  Значении all указывает что анимация должна воздействовать на все доступные свойства.
  Подобные эффекты можно применять как для блока, так и для каждого элемента в отдельности.

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

©http://magentawave.com

4 комментария:

  1. Восхитительно. Спасибо за подробное описание!

    ОтветитьУдалить
  2. Анонимный16.12.2014, 14:59

    Как мне выровнять по центру пункты меню, такие как section1 и section2?

    ОтветитьУдалить
  3. Сергей20.08.2015, 01:40

    Не могу понять,что делает универсальный селектор "*" перед display:block в варианте, с Overflov? Подскажет кто-нибудь?

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

      Удалить

Следующее Предыдущее

BestProject