Многоуровневое выдвижное меню

Дата публикации: 2013-09-23

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

Сегодня мы хотим поделиться с вами еще одним экспериментальным меню. Конечно, вы уже знакомы с так называемой off-canvas-навигацией (скрытой и открывающейся по требованию, например, при нажатии на кнопку) в мобильных приложениях и его реализацией для адаптивных вебсайтов вроде этого, созданного Дэвидом Бушелом (David Bushell). Мы пытались исследовать возможность создания вложенного многоуровневого меню, что могло оказаться весьма кстати для меню с большим количеством контента (такого, как навигация онлайн-магазинов). Результатом стало «выдвижное» меню, способное (теоретически) содержать бесконечные вложенные подменю. При открытии подуровня навигации все содержимое сдвигается еще больше, при этом видимым остается кусочек родительского меню. На выбор – его можно оставить видимым, а можно убрать, в таком случае подменю просто закроет родительский элемент.

Работать с вложенными элементами довольно сложно, потому что, например, при перемещении родительского элемента вместе с ним, естественно, перемещаются и все дочерние. Поэтому мы применим парочку приемов, которые будут поддерживать нужные 3D-трансляции подменю и их дочерних элементов. Основная мысль заключается в увеличении значения для трансляции с тем, чтобы гарантировать, что подуровни не будут показываться, когда мы все немного сдвинем для демонстрации краев родительских элементов. Конечно, это не является необходимым в том случае, когда подменю закрывает родительский элемент.
Пожалуйста, обратите внимание, что мы используем 3D-преобразования, которые работают только в современных браузерах. Пример альтернативного варианта для неподдерживающих браузеров вы найдете в конце файла component.css, где просто показано меню первого уровня. То же самое мы делаем в случае отсутствия JS.

Для меню мы используем следующую вложенную структуру:

<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
    <div class="mp-level">
        <h2 class="icon icon-world">All Categories</h2>
        <ul>
            <li class="icon icon-arrow-left">
                <a class="icon icon-display" href="#">Devices</a>
                 
                <div class="mp-level">
                    <h2 class="icon icon-display">Devices</h2>
                    <ul>
                        <li class="icon icon-arrow-left">
                            <a class="icon icon-phone" href="#">Mobile Phones</a>
 
                            <div class="mp-level">
                                <h2>Mobile Phones</h2>
                                <ul>
                                    <li><a href="#">Super Smart Phone</a></li>
                                    <li><a href="#">Thin Magic Mobile</a></li>
                                    <li><a href="#">Performance Crusher</a></li>
                                    <li><a href="#">Futuristic Experience</a></li>
                                </ul>
                            </div>
 
                        </li>
                        <li class="icon icon-arrow-left">
                            <!-- ... -->
                        </li>
                        <li class="icon icon-arrow-left">
                            <!-- ... -->
                        </li>
                    </ul>
                </div>
            </li>
            <li><!-- ... --></li>
            <!-- ... -->
        </ul>
    </div>
</nav>
<!-- /mp-menu -->

<h2 class="icon icon-world">All Categories</h2>

<ul>

<a class="icon icon-display" href="#">Devices</a>

<h2 class="icon icon-display">Devices</h2>

<ul>

<a class="icon icon-phone" href="#">Mobile Phones</a>

<h2>Mobile Phones</h2>

<ul>

<li><a href="#">Super Smart Phone</a></li>

<li><a href="#">Thin Magic Mobile</a></li>

<li><a href="#">Performance Crusher</a></li>

<li><a href="#">Futuristic Experience</a></li>

</ul>

</div>

</li>

</li>

</li>

</ul>

</div>

</li>

</ul>

</div>

</nav>

…где каждый уровень обернут в раздел с классом mp-level. В норме мы применили бы к меню такого рода фиксированное позиционирование, но так как с этим весьма необычная «проблема» (преобразования заставят его вести себя как элемент с абсолютным позиционированием), то нам придется использовать абсолютное позиционирование, которое поставит нас лицом к проблеме некоторого нежелательного поведения сайта (прокрутке меню и зависимости от высоты документа). Поэтому мы применим небольшую хитрость, чтобы избежать прокрутки меню и его отсечения, если содержимое сайта окажется слишком коротко, взяв следующую структуру страницы:

<div class="container">
    <!-- Push Wrapper -->
    <div class="mp-pusher" id="mp-pusher">
 
        <!-- mp-menu -->
        <nav id="mp-menu" class="mp-menu">
            <!-- ... -->
        </nav>
        <!-- /mp-menu -->
 
        <div class="scroller"><!-- this is for emulating position fixed of the nav -->
            <div class="scroller-inner">
                <!-- site content goes here -->
                </div>
            </div><!-- /scroller-inner -->
        </div><!-- /scroller -->
 
    </div><!-- /pusher -->
</div><!-- /container -->

</nav>

</div>

</div>

</div>

</div>

</div>

Где назначаем элементам следующие стили:

html, 
body, 
.container,
.scroller {
    height: 100%;
}
 
.scroller {
    overflow-y: scroll;
}
 
.scroller,
.scroller-inner {
    position: relative;
}
 
.container {
    position: relative;
    overflow: hidden;
    background: #34495e;
}

html,

body,

.container,

.scroller {

height: 100%;

}

.scroller {

overflow-y: scroll;

}

.scroller,

.scroller-inner {

position: relative;

}

.container {

position: relative;

overflow: hidden;

background: #34495e;

}

Это позволит прокручивать контент при закрытом меню, а еще оно станет 100% от высоты окна. По сути, вы имитируем то, чего добилось бы здесь фиксированное позиционирование. Вот как можно вызывать плагин:

new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );

1	new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );

Или, если подменю должны закрывать предыдущие уровни:

new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ), {
    type : 'cover'
} );

new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ), {

type : 'cover'

} );

Для демо-примеров мы пользуемся прекрасными иконными шрифтами Linicons Сергея Шмидта (Sergey Shmidt), созданными с помощью приложения IcoMoon. Надеемся, что это меню вам понравится и окажется полезным.

Автор: Mary Lou

Источник: //tympanus.net/

Редакция: Команда webformyself.

Метки: многоуровневое меню