Многоуровневое адаптивное меню на CSS

27.04.2013

Сегодня мы бы хотели представить вам экспериментальную версию многоуровневого меню. Основная задача данной реализации сэкономить место на странице. Каждое под-меню будет появляться в отдельном блоке, в то время как блок “родитель” будет исчезать. Данное меню является “резиновым”, так что без проблем его можно внедрять в адаптивный макет.

Само меню представляет из себя ненумерованный список, содержащий другие списки.

<pre><div id="dl-menu">
    <button>Open Menu</button>
    <ul>
        <li>
            <a href="#">Item 1</a>
            <ul>
                <li><a href="#">back</a></li>
                <li><a href="#">Sub-Item 1</a></li>
                <li><a href="#">Sub-Item 2</a></li>
                <li><a href="#">Sub-Item 3</a></li>
                <li>
                    <a href="#">Sub-Item 4</a>
                    <ul>
                        <li><a href="#">back</a></li>
                        <li><a href="#">Sub-Sub-Item 1</a></li>
                        <li><a href="#">Sub-Sub-Item 2</a></li>
                        <li><a href="#">Sub-Sub-Item 3</a></li>
                    </ul>
                </li>
                <li><!-- ... --></li>
                <!-- ... -->
            </ul>
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</div><!-- /dl-menuwrapper --></pre>

Анимация осуществляется при помощи CSS:

<pre>.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;
    }
}</pre>

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

<pre>$( '#dl-menu' ).dlmenu({
    animationClasses : { in : 'animation-class-name', out : 'animation-class-name' }
});</pre>

Скачать:   Демо:  Источник:

Другие темы:

Photoshop CS5 от А до Я
WordPress - профессиональный блог за один день
Создаем свою CMS на PHP и MySQL. Часть 5
SEO-БОМБА