Автор

Вертикальное многоуровневое меню для сайта

Вертикальное многоуровневое меню для сайта


 

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

 

ДЕМО
ИСХОДНИКИ

 

Делаться это будет с помощью анимационных эффектов, которые мы выделим в отдельные классы. В итоге у нас получится плавающее меню, с достаточно простыми но оригинальными эффектами. И так, приступим.

Шаг 1. HTML

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

<div id="dl-menu" class="dl-menuwrapper">
 <button>Открыть меню</button>
 <ul class="dl-menu">
 <li>
 <a href="#">Пункт </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="#">Sub-Item 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>

Количество подпунктов вы можете добавить самостоятельно в необходимом количестве.

Шаг 2. CSS

У нас уже есть заготовленная анимация, нам только необходимо вставить необходимые классы:

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

Шаг 3. jQuery

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

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Вертикальное многоуровневое меню для сайта

В передыдущем уроке «Интересные кнопки поделиться в соцсетях на CSS3» я уже писал как можно сделать красивые кнопки для соцсетей. Продолжая эту тему хочу поделиться еще одним примером как можно оформить свой сайт! В данном примере используется только CSS и не каких скриптов!


Вертикальное многоуровневое меню для сайта

Сила CSS3 огромна и в этом уроке мы увидим, как это использовать. Мы собираемся создать несколько эскизов эффекта наведения, переходы CSS3. Наведите указатель мыши на эскиз, мы раскроем некоторые описания миниатюр, с использованием различных стилей в каждом примере.


Вертикальное многоуровневое меню для сайта

Прогресс веб-дизайна не стоит на месте,большие гиганты ит-индустрии диктуют нам правила и направления в разработке дизайна, совсем недавно все стали переводить свои дизайны в минимализм, а именно в тренд Metro UI, объемные сайты постепенно стали исчезать ведь им производят рестайлинг, в скором времени будем на них любоваться как на динозавров. Буквально за несколько недель, с момента показа новой iOS 7, произошел легкий сдвиг в сознании не только у дизайнеров, но и у пользователей, имя ему — плоский дизайн.


Вертикальное многоуровневое меню для сайта

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close