CSS3 анимированное меню

02012-10-2536002Денис Абдуллин

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

HTML

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

Code

<nav id="colorNav">
  <ul>
  <li class="green">
  <a href="#" class="icon-home"></a>
  <ul>
  <li><a href="#">Пункт номер 1</a></li>
  <li><a href="#">Пункт номер 2</a></li>

  

  </ul>
  </li>

  

  </ul>
</nav>

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

CSS

Как вы видите в HTML коде выше, мы используем маркированные списки, вложенные UL, таким образом, мы должны написать CSS осторожно. Мы не хотим, чтобы стиль верхнего UL для каскада был для всех элементов-потомков. К счастью, можно указать ребенка CSS селектора. Нужно использовать ">":

assets/css/styles.css

Code

#colorNav > ul {
width: 450px;
margin:0 auto;
}

Это ограничивает ширину только первого неупорядоченного списка, который является прямым потомком пункта #colorNav.

Code

#colorNav > ul > li {
  list-style: none;
  box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
  display: inline-block;
  line-height: 1;
  margin: 1px;
  border-radius: 3px;
  position:relative;
}

Мы ставим значение для display inline-block, чтобы все элементы списка отображались в одной строке, и мы даем относительное положение, чтобы сделать выпадение правильно. Вложенные элементы содержат иконки, это шрифт со значками.

Code

#colorNav > ul > li > a {
  color:inherit;
  text-decoration:none !important;
  font-size:24px;
  padding: 25px;
}

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

Code

#colorNav li ul {
  position:absolute;
  list-style:none;
  text-align:center;
  width:180px;
  left:50%;
  margin-left:-90px;
  top:70px;
  font:bold 12px 'Open Sans Condensed', sans-serif;

  /* Показать/скрытть CSS анимацию */
  max-height:0px;
  overflow:hidden;

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

Вот анимация запуска:

Code

#colorNav li:hover ul {
max-height:200px;
}

200px является произвольным значением, вам придется увеличить его, если выпадающий список содержит много значений. К сожалению, нельзя с помощью CSS вычислить высоту.

Следующий шаг заключается в стиле выпадающих пунктов:

Code

#colorNav li ul li {
  background-color:#313131;
}

#colorNav li ul li a {
  padding:12px;
  color:#fff !important;
  text-decoration:none !important;
  display:block;
}

#colorNav li ul li:nth-child(odd) {
  background-color:#363636;
}

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

#colorNav li ul li:first-child{
  border-radius:3px 3px 0 0;
  margin-top:25px;
  position:relative;
}

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

#colorNav li ul li:last-child {
  border-bottom-left-radius:3px;
  border-bottom-right-radius:3px;
}

И, конечно, мы поработали над цветами! Вот 5 версий:

Code

#colorNav li.green {
  /* Цвет пункта меню*/
  background-color:#00c08b;

  /* Цвет значка */
  color:#127a5d;
}

#colorNav li.red {background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue {background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow {background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple {background-color:#df6dc2;color:#9f3c85;}

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