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

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

От автора: Эта статья рассказывает о том, как создать простое выпадающее меню с простой анимацией, используя при этом только CSS3, без JavaScript.

 

Это анимированное выпадающее меню является усовершенствованной версией предыдущего выпадающего меню. Оно имеет практически такую же HTML структуру и базовые CSS стили.

HTML структура

Настоящее меню состоит из одного простого элемента div (с идентификатором (id) «top-menu») и ненумерованных вложенных списков внутри этого элемента. Ниже представлен HTML код подобной структуры:

<div id="top-menu">
  <ul>
    <li>
      <ul>
        <li><a href="#">Ruby</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li>
          <ul>
            <li><a href="#">CakePHP</a></li>
            <li><a href="#">Symfony</a></li>
            <li><a href="#">Zend</a></li>
            <li><a href="#">CodeIgniter</a></li>
          </ul>
          <a href="#">PHP</a>
        </li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">C++</a></li>
      </ul>
      <a href="#">Languages</a>
    </li>
    <li>
      <ul>
        <li><a href="#">Chrome</a></li>
        <li>
          <ul>
            <li><a href="#">Mobile</a></li>
            <li><a href="#">Desktop</a></li>
          </ul>
          <a href="#">Opera</a>
        </li>
        <li><a href="#">IE</a></li>
        <li><a href="#">Firefox</a></li>
        <li><a href="#">Safari</a></li>
      </ul>
      <a href="#">Browsers</a>
   </li>
   <li>
     <ul>
       <li><a href="#">Windows</a></li>
       <li><a href="#">Linux</a></li>
       <li><a href="#">FreeBSD</a></li>
       <li><a href="#">Mac OS</a></li>
     </ul>
     <a href="#">Operation systems</a>
   </li>
   <li><a href="#">Others</a></li>
  </ul>
</div>

CSS стили

Для настоящего меню CSS стили можно разделить на три логические группы:

Базовые CSS стили. Они называются «движком» анимированного выпадающего меню. Эти стили выполняют всю основную работу.

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

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

Базовые CSS стили

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

#top-menu ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#top-menu > ul > li {
  float: left;
}

#top-menu > ul > li > ul {
  top: 100%;
  left: 0;
}

#top-menu li {
  position: relative;
}

#top-menu a {
  display: block;
  white-space: nowrap;
}

#top-menu ul li li ul {
  top: 0;
  left: 100%;
}

#top-menu ul ul {
  visibility: hidden;
  position: absolute;
}

#top-menu li:hover > ul {
  visibility: visible;
}

Демо-пример

CSS стили для дизайна

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

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

#top-menu {
  padding: 0 5px;
}

#top-menu,
#top-menu > ul {
  background-color: #9DA4AD;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#top-menu:after {
  content: "";
  clear: both;
  display: block;
}

#top-menu a {
  text-decoration: none;
  color: #FFFFFF;
  padding: 5px 10px 5px 10px;
  line-height: 1.2;
}

#top-menu > ul > li > a {
  padding: 5px 10px;
  margin: 2px 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#top-menu > ul > li > ul + a {
  padding-bottom: 7px;
  margin-bottom: 0;
}

#top-menu > ul > li > ul + a:after {
  content: " \25bc";
}

#top-menu > ul > li:hover > a {
  background-color: #4672B3;
}

#top-menu > ul > li:hover > ul + a {
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

#top-menu > ul > li > ul {
  min-width: 100%;
  background-color: rgb(70, 114, 179);
  background-color: rgba(70, 114, 179, 0.8);
}

#top-menu > ul > li li > ul + a:after {
  content: " \25b6";
}

#top-menu > ul > li > ul > li:last-child,
#top-menu > ul > li > ul {
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

#top-menu ul li li:hover,
#top-menu ul li li ul,
#top-menu ul li li ul li:hover {
  background-color: rgb(124, 147, 178);
  background-color: rgba(124, 147, 178, 0.8);
}

Демо-пример

CSS стили для анимации

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

#top-menu > ul > li > ul,
#top-menu ul li li ul {
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}

#top-menu > ul > li > ul {
  top: 400%;
  opacity: 0;
}

#top-menu > ul > li:hover > ul {
  top: 100%;
  opacity: 1;
}

#top-menu ul li ul li ul {
  left: 400%;
  opacity: 0;
}

#top-menu ul li ul li:hover ul {
  left: 100%;
  opacity: 1;
}

Демо-пример

Заключение

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

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

Ниже приведены CSS стили, которые изменяют размер шрифта у всего меню, без необходимости вносить правки в уже написанные стили меню:

#top-menu a {
  font-size: 22px;
}

Демо-пример

Источник: http://basicuse.net/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Iryna

    Круто!
    Сразу даже и не поверила, что здесь нет jQuery)
    Возможности CSS3 не перестают удивлять)
    Спасибо большое.

  2. Евгений

    Отличный урок, большое спасибо!

  3. Денис

    А у меня что то она не появляется,как бы сказать нету эфектта всплывания

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree