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

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


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

Пример 1

Простое горизонтальное одноуровневое меню

HTML

<nav class="ph-lift">
    <ul>
        <li class="active"><a href="#home" data-title="Главная">Главная</a></li>
        <li><a href="#portfolio" data-title="Портфолио">Портфолио</a></li>
        <li><a href="#about" data-title="Обо мне">Обо мне</a></li>
        <li><a href="#contact" data-title="Контакты">Контакты</a></li>
    <ul>
</nav>

К ссылкам мы добавили атрибут data-title, который служит названием для каждой ссылки. Идея состоит в том, чтобы иметь li элемент с overflow:hidden;.

CSS

Первый эффект при наведении изменяет цвет фона и добавляет внутреннюю тень с плавным переходом.

  nav.ph-lift ul li {
    float: left;
    height: 90px;
    line-height: 90px;
    background: white;
    overflow: hidden;
    -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-lift ul li:hover {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
      background: teal; }

C помощью псевдо элмента :after мы создаем "копию" ссылки, которую распологаем ниже этой ссылки. В качествве контента этой "ссылки-копии" используется атрибут data-title. При наведении мышки ссылка изменяет своё свойство margin-top с плавным переходом.

    nav.ph-lift ul li a {
      display: block;
      text-decoration: none;
      color: #007e7e;
      padding: 0 45px;
      margin-top: 0;
      -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-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; }

Пример 2

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

В этом меню к li элементам мы не можем применять overflow:hidden;, иначе не увидим выпадающее под меню.

HTML

CSS

Основная идея таже, но теперь overflow:hidden; применяем к элменту a внутри li и добавляем атрибуты data-title уже к тегу span:

Скачать 1430Загрузок 5,33 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи