WEB лаборатория DLE » Другое для WEB » jQuery и JavaScript » Адаптивное многоуровневое меню
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 2
    Пользователей: 0
    Гостей: 2


    Последние комментарии
    ...
    HI-tech:
    0

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

    Автор: Robot_DLElabкатегория: Другое для WEB » jQuery и JavaScriptдата: 22-04-2013, 17:15
    Адаптивное многоуровневое меню


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

    Примечание: данное меню будет работать только в тех браузерах, которые оснащены поддержкой соответствующих css-свойств.

    Структура меню содержит ненумерованный список, в который можно вносить любое количество подсписков:
    <div id="dl-menu" class="dl-menuwrapper">
        <button>Open Menu</button>
        <ul class="dl-menu">
            <li>
                <a href="#">Item 1</a>
                <ul class="dl-submenu">
                    <li class="dl-back"><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 class="dl-submenu">
                            <li class="dl-back"><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 -->

    Анимации определяются в классах animation:
    .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' }
    });

    Надеемся, этот эксперимент вам понравился, и вдохновил вас на собственные проекты!



    Скачать бесплатно

    Теги: jQuery, меню

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.