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

В этом учебном руководстве я покажу вам, как создать горизонтальное выпадающее меню с эффектом прокрутки на css. Я буду использовать только CSS, а именно - псевдо-элемент after с дополнительными атрибутами. Убедитесь, что вы используете современный браузер с поддержкой CSS transition.

Сложность

Стандартная HTML разметка страницы:

<nav class="ph-lift"> 
  <ul> 
      <li class="active"><a href="#home" data-title="Home">Home</a></li> 
      <li><a href="#portfolio" data-title="My works">My works</a></li> 
      <li><a href="#about" data-title="Who am I?">Who am I?</a></li> 
      <li><a href="#contact" data-title="Contact me">Contact me</a></li> 
  </ul> 
  </nav> 

Обратите внимание, я добавил атрибуты data-title содержащие ссылку для каждого из пунктов горизонтального меню CSS. Идея состоит в том, чтобы добавить элемент li со свойством overflow:hidden. При наведении курсора на пункт меню, меняется цвет фона. Добавим внутреннюю тень с плавным переходом (не забудьте префиксы!).

nav.ph-lift ul li {
    float: left;
    height: 90px;
    line-height: 90px;
    background: white;
    overflow: hidden;
    transition: all.6s ease; }
    nav.ph-lift ul li:hover {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
      background: teal; }

При помощи псевдо-элемента :after, я создам "копию" ссылки, который расположен ниже. Для его содержания я использую атрибут data-title.

nav.ph-lift ul li a {
  display: block;
  text-decoration: none;
  color: #007e7e;
  padding: 0 45px;
  margin-top: 0;
  transition: all.6s ease; }
nav.ph-lift ul li:hover a {
  margin-top: -90px;
  color: white;
  text-shadow: 0 1px 2px  black; }
  nav.ph-lift ul li a:after {
    content: attr(data-title);
    display: block; }

В случае горизонтального выпадающего меню CSS, мы не можем использовать элемент li {overflow:hidden}. Придется изменить HTML разметку:

<nav class="ph-lift1"> 
  <ul> 
      <li class="active"><a href="#home" data-title="Home"><span data-title="Home">Home</span></a> 
  <ul> 
      <li><a href="#"><span data-title="Featured">Featured</span></a></li> 
      <li><a href="#"><span data-title="Top 10">Top 10</span></a></li> 
  </ul> 
  </li> 
      <li><a href="#portfolio"><span data-title="My works">My  works</span></a> 
  <ul> 
      <li><a href="#"><span data-title="Web design">Web  design</span></a></li> 
      <li><a href="#"><span data-title="Illustrations">Illustrations</span></a></li> 
      <li><a href="#"><span data-title="Patterns">Patterns</span></a></li> 
  </ul> 
  </li> 
      <li><a href="#"><span data-title="Who am I?">Who am  I?</span></a></li> 
      <li><a href="#"><span data-title="Contact me">Contact me</span></a> 
  <ul> 
      <li><a href="#"><span data-title="Email me">Email me</span></a></li> 
      <li><a href="#"><span data-title="Network">Network</span></a></li> 
  </ul> 
  </li> 
  </ul> 
  </nav> 

Теперь, я добавлю свойство overflow:hidden к элементу горизонтального меню CSS и сгенерирую псевдо-элемент для моего блока.

nav.ph-lift1 > ul > li {
   float: left; }
 nav.ph-lift1 ul li {
   height: 80px;
   line-height: 80px;
   background: white;
   -webkit-transition: all.6s ease;
   -moz-transition: all.6s ease;
   -o-transition: all.6s ease;
   -ms-transition: all.6s ease;
   transition: all.6s ease; }
   nav.ph-lift1 ul li ul {
     max-height: 0;
     -webkit-transition: all.6s ease;
     -moz-transition: all.6s ease;
     overflow: hidden;
     display: block; }
   nav.ph-lift1 ul li:hover {
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
     background: darkolivegreen; }
   nav.ph-lift1 ul li:hover ul {
     max-height: 300px; }
   nav.ph-lift1 ul li a {
     display: block;
     overflow: hidden;
     text-decoration: none;
     color: #546a2f;
     height: 80px; }
   nav.ph-lift1 ul li ul li a {
     color: #7e7e00; }
   nav.ph-lift1 ul li ul li:hover {
     background: olive; }
   nav.ph-lift1 ul li a span {
       -webkit-transition: all.6s ease;
       -moz-transition: all.6s ease;
       -o-transition: all.6s ease;
       -ms-transition: all.6s ease;
       transition: all.6s ease;
       display: block;
       padding: 0 40px; }
   nav.ph-lift1 ul li:hover > a span {
     margin-top: -80px;
     color: white;
     text-shadow: 0 1px 2px  black; }
     nav.ph-lift1 ul li a span:after {
       content: attr(data-title);
       display: block; }

ДЕМО СКАЧАТЬ Перевод статьи Pseudo elements with custom attributes to create a css3 menu that will bounce

Тэги: transitionmenu

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.