—»     —»   Адаптивное многоуровневое меню
  Раздел: Меню и Навигация   Комментариев: 2  

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



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

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

Примечание: данное меню будет работать только в тех браузерах, которые оснащены поддержкой соответствующих 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' }
});

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

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 11375   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 23 апреля 2013 @ 10:25
Написал: Dimka Klusevich — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Прикольная меню, правда для кроссбразерности на jquery лучше делать, эффект не плох) Спасибо)
Комментарий #2: 24 апреля 2013 @ 18:54
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Поддержу комментарий, пример не плох... Но что б использовать в чистом виде придётся подождать полной совместимости всех свойств CSS браузерами.


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Заказ кадастрового паспорта
Кадастровые инженеры - комплекс услуг, чтобы получить кадастровый паспорт
gorproektservice.ru
Автономный газ
Газ в дом балонный! Газификация домов! Без предоплаты! Помощь
absolut-gaz.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930