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

https://i.imgur.com/TMJ86GL.jpg
Структура меню представляет собой неупорядоченный список, который может иметь произвольное количество вложенных списков:

Код:
<div id="dl-menu" class="dl-menuwrapper">
    <button>Открыть меню</button>
    <ul class="dl-menu">
        <li>
            <a href="#">Пункт 1</a>
            <ul class="dl-submenu">
                <li class="dl-back"><a href="#">back</a></li>
                <li><a href="#">Подпункт 1</a></li>
                <li><a href="#">Подпункт 2</a></li>
                <li><a href="#">Подпункт 3</a></li>
                <li>
                    <a href="#">Подпункт 4</a>
                    <ul class="dl-submenu">
                        <li class="dl-back"><a href="#">back</a></li>
                        <li><a href="#">Подподпункт 1</a></li>
                        <li><a href="#">Подподпункт 2</a></li>
                        <li><a href="#">Подподпункт 3</a></li>
                    </ul>
                </li>
                <li><!-- ... --></li>
                <!-- ... -->
            </ul>
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</div><!-- /dl-menuwrapper -->

Анимация определеятся для соответствующих классов:

Код:
.dl-menu.dl-animate-out-1 {
    animation: MenuAnimOut1 0.4s linear forwards;
}
 
@keyframes MenuAnimOut1 {
    50% {
        transform: translateZ(-250px) rotateY(30deg);
    }
    75% {
        transform: translateZ(-372.5px) rotateY(15deg);
        opacity: .5;
    }
    100% {
        transform: translateZ(-500px) rotateY(0deg);
        opacity: 0;
    }
}
 
.dl-menu.dl-animate-in-1 {
    animation: MenuAnimIn1 0.3s linear forwards;
}
 
@keyframes MenuAnimIn1 {
    0% {
        transform: translateZ(-500px) rotateY(0deg);
        opacity: 0;
    }
    20% {
        transform: translateZ(-250px) rotateY(30deg);
        opacity: 0.5;
    }
    100% {
        transform: translateZ(0px) rotateY(0deg);
        opacity: 1;
    }
}

А плагин называется следующим образом:

Код:
$( '#dl-menu' ).dlmenu({
    animationClasses : { in : 'animation-class-name', out : 'animation-class-name' }
});

Исходники: 

[think=http://www.kolobok.us/smiles/standart/yahoo.gif] 😎  Мы надеемся, что вам нравится этот небольшой эксперимент и Вы найдете его полезным для себя![/think]

Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему