Вертикальное многоуровневое меню для сайта
Вам необходимо создать креативное многоуровневое меню, кроме этого, чтобы оно было адаптивным, и было стилизованными эффектами. В данном уроке мы рассмотрим как все это можно реализовать. Главной идеей данной навигации являются пару вещей, первое из них, это экономия ценного места на странице, второе, это внедрение подменю и эффектного появления при нажатии. Каждое выпадающее меню будет относительное, то есть родительский элемент будет исчезать при вызове следующего подпункта.
Делаться это будет с помощью анимационных эффектов, которые мы выделим в отдельные классы. В итоге у нас получится плавающее меню, с достаточно простыми но оригинальными эффектами. И так, приступим.
Шаг 1. HTML
Первым делом нам необходимо создать простую разметку, мы будем использовать неупорядоченный список, что позволит создавать произвольное количество выпадающих списков:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <div> <button>Открыть меню</button> <ul> <li> <a href=»#»>Пункт </a> <ul> <li><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> <li><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
У нас уже есть заготовленная анимация, нам только необходимо вставить необходимые классы:
1 2 3 4 5 6 7 8 9 10 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | .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’ } }); |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Многоуровневое горизонтальное меню на HTML и CSS
В продолжение темы про меню я хочу описать еще один вид меню – многоуровневое меню. Если у вас на сайте имеется большое количество разделов – это то что вам нужно. 
Делать наше меню заново нету смысла, по-этому сегодня мы просто возьмем за основу “Простое горизонтальное меню”, которое я описывал здесь. Так что вы можете просто скачать исходники нашего меню и дописать всего пару строчек.
HTML
Разметка для нашего меню отличается от исходного только пару строчками, а именно еще одним вложенным списком уже во вложенный ранее список.
<ul>
<li><a href="#">О нас</a></li>
<li>
<a href="#">Статьи</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li>
<a href="#">jQuery</a>
<ul>
<li><a href="#">Вступление</a></li>
<li><a href="#">Начальный</a></li>
<li><a href="#">Продвинутый</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Видео курс</a>
</li>
<li>
<a href="#">Материалы</a>
</li>
<li>
<a href="#">Форум</a>
</li>
</ul> CSS
Стили особого изменения тоже не потерпят. Мы только подвинем наш “вдвойне вложенный” список немного вправо, а все остальное действует аналогично.
#menu {
padding: 0;
margin: 0;
font-family: Verdana;
}
#menu li {
list-style: none;
float: left;
height: 30px;
padding: 0;
margin: 0;
width: 150px;
text-align: center;
background: #95DF8E;
position: relative;
padding-top: 12px;
}
#menu li ul{
list-style: none;
padding: 0;
margin: 0;
width: 150px;
display: none;
position: absolute;
left: 0;
top: 42px;
}
#menu li ul li{
float: none;
height: 30px;
margin: 0;
width: 150px;
text-align: center;
background: #95DF8E;
}
#menu li a{
display: block;
width: 150px;
height: 30px;
color: #006A35;
text-decoration: none;
}
#menu li:hover ul{
display: block;
}
#menu li:hover{
background: #35C835;
}
#menu li ul li ul{
left:150px;
top: 0;
}
#menu li ul li ul li{display: none;}
#menu li ul li:hover ul li{display: block;}Готово
Вот и все – наше превращение закончено. Но не увлекайтесь – больше не значит лучше. Подсказка: если в вашем меню не все пункты меню разворачиваются – пометьте те, которые могут развернутся(например, знаком “+”, или картинкой на фоне)
Выпадающее многоуровневое меню с использованием CSS3
Все так же популярны меню на чистом CSS3. В основном это меню на структуре ul – li. В этом уроке мы продолжим создавать интересные меню. Это меню будет выпадающим многоуровневым, а его вложенные уровни будут появляться не при наведении указателя мыши, а при нажатии на пункт меню. Вот каким будет конечный результат нашей работы:
Вот демонстрация работы и исходный код:
Демонстрация работы – Скачать исходный код
Скачайте пример, и приступим к работе.
Шаг 1. Код HTML
Как обычно начнем с кода HTML.
Вот полный код HTML этого меню. Как Вы видите, это многоуровневое меню. Надеюсь, Вы без проблем разберетесь в коде. Меню создано из элементов ul – li.
index.html
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <div> <ul> <li><a href="http://www.script-tutorials.com/">Home</a></li> <li><a href="#" tabindex="1">Tutorials</a> <ul> <li><a href="http://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li> <li><a href="#" tabindex="1">JS / jQuery</a> <ul> <li><a href="http://www.script-tutorials.com/category/jquery/">jQuery</a></li> <li><a href="http://www.script-tutorials.com/category/javascript/">JS</a></li> </ul> </li> <li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li> <li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li> <li><a href="http://www.script-tutorials.com/category/xslt/">XSLT</a></li> <li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li> </ul> </li> <li><a href="#" tabindex="1">Resources</a> <ul> <li><a href="#" tabindex="1">By category</a> <ul> <li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li> <li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li> <li><a href="#" tabindex="1">Menu1</a> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#" tabindex="1">Menu3</a> <ul> <li><a href="#">Menu31</a></li> <li><a href="#">Menu32</a></li> <li><a href="#">Menu33</a></li> <li><a href="#">Menu34</a></li> </ul> </li> <li><a href="#">Menu4</a></li> </ul> </li> <li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li> </ul> </li> <li><a href="#" tabindex="1">By tag name</a> <ul> <li><a href="http://www.script-tutorials.com/tag/captcha/">captcha</a></li> <li><a href="http://www.script-tutorials.com/tag/gallery/">gallery</a></li> <li><a href="http://www.script-tutorials.com/tag/animation/">animation</a></li> </ul> </li> </ul> </li> <li><a href="http://www.script-tutorials.com/about/">About</a></li> <li><a href="http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/">Go Back To The Tutorial</a></li> </ul> </div>
Шаг 2. Код CSS
Вот использованные стили CSS. Первые два селектора — верстка страницы примера. Все остальное относится к меню.
css/style.css
/* стили страницы примера */
body {
background:#eee;
margin:0;
padding:0;
}
.example {
background:#fff url(../images/tech.jpg);
width:770px;
height:570px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* стили главного меню */
#nav,#nav ul {
background-image:url(../images/tr75.png);
list-style:none;
margin:0;
padding:0;
}
#nav {
height:41px;
padding-left:5px;
padding-top:5px;
position:relative;
z-index:2;
}
#nav ul {
left:-9999px;
position:absolute;
top:37px;
width:auto;
}
#nav ul ul {
left:-9999px;
position:absolute;
top:0;
width:auto;
}
#nav li {
float:left;
margin-right:5px;
position:relative;
}
#nav li a {
background:#c1c1bf;
color:#000;
display:block;
float:left;
font-size:16px;
padding:8px 10px;
text-decoration:none;
}
#nav > li > a {
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
overflow:hidden;
}
#nav li a.fly {
background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
padding-right:15px;
}
#nav ul li {
margin:0;
}
#nav ul li a {
width:120px;
}
#nav ul li a.fly {
padding-right:10px;
}
/* стили при наведении указателя мыши */
#nav li:hover > a {
background-color:#858180;
color:#fff;
}
/* стили активного элемента*/
#nav li a:focus {
outline-width:0;
}
/* стили всплывающего элемента */
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
left:0;
}
#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
left:140px;
}Шаг 3. Изображения
В этом меню используются только три изображения: arrow.gif, tech.jpg и tr75.png. Первые два очень маленькие, а последнее — просто фоновое изображение, так что они не выложены в тексте урока. Вы можете скачать их вместе с исходным кодом.
Демонстрация работы – Скачать исходный код
Заключение
Надеемся, Вам понравился этот урок и он Вам пригодится.
Изначальная идея дизайна была взята у Stu Nicholls.
Автор урока Andrew Prikaznov
Перевод — Дежурка
Смотрите также:
Многоуровневое выпадающее меню с помощью CSS3
В сегодняшнем уроке мы рассмотрим замечательный прием, который поможет сохранить место у вас на сайте, а именно многоуровневое выпадающее меню, которое позволит сэкономить много на сайте, при этом пользователю интуитивно понятно, что следует за дочерним элементом. Благодаря такой навигации вы можете сократить количество отображаемой информации на сайте при этом качественно ее оформить. Данный пример разработан исключительно средствами CSS. Так же мы добавили и версию с применением jQuery.
Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:
Чтобы получить такую функцию мы использовали несколько знакомых Вам, с уроков ранее, а именно псевдо-класс :checked. И так, давайте приступим.
Шаг 1. HTML
HTML структура довольно-таки проста: аккордеон представляет собой ненумерованный список. Если у элемента есть вложенность, то мы добавляем input[type=checkbox] и название. Так же присваиваем этому элементу класс .has-children. Все “стандартные” элементы списка содержат ccылки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <ul> <li> <input type=»checkbox» name =»group-1″ checked> <label for=»group-1″>Главная</label>
<ul> <li> <input type=»checkbox» name =»sub-group-1″> <label for=»sub-group-1″>Уроки</label>
<ul> <li><a href=»#0″>Новые</a></li> <li><a href=»#0″>Старые</a></li> <li><a href=»#0″>Популярные</a></li> </ul> </li> <li> <input type=»checkbox» name =»sub-group-2″> <label for=»sub-group-2″>Контакты</label>
<ul> <li> <input type=»checkbox» name =»sub-group-level-3″> <label for=»sub-group-level-3″>Интересно</label>
<ul> <li><a href=»#0″>Как сделать</a></li> <li><a href=»#0″>Подробно</a></li> </ul> </li> <li><a href=»#0″>Разработка</a></li> </ul> </li> <li><a href=»#0″>Веб-дизайн</a></li> <li><a href=»#0″>Вопросы</a></li> </ul> </li> |
Для отслеживания выборки элемента мы используем специальную технику: используя элемент checkbox, мы сможем воспользоваться псевдо-классом :checked и сменить отображение потомков с “none” на “block”.
Шаг 2. СSS
Теперь нам нужно настроить checkbox под себя. Во-первых, при клике по label, checkbox должен заполняться или очищаться. Для этого мы используем атрибут “for” элемента label (атрибут label “for” = атрибуты input “name” и “id”). Таким образом мы можем спрятать элемент input и работать с label.
.cd-accordion-menu input[type=checkbox] { position: absolute; opacity: 0; } .cd-accordion-menu label, .cd-accordion-menu a { position: relative; display: block; padding: 18px 18px 18px 64px; background: #4d5158; box-shadow: inset 0 -1px #555960; color: #ffffff; font-size: 1.6rem; } |
Теперь обратите внимание на HTML: input, label и ненумерованный список — соседи. При клике checkbox, извлекается <ul> элемент и меняется режим отображения с “none” на “block”:
.cd-accordion-menu ul { display: none; }
.cd-accordion-menu input[type=checkbox]:checked + label + ul, .cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul { display: block; } |
Если вы хотите добавить анимацию, то подключите .js файл. После этого добавьте класс .animate элементу .cd-accordion-menu (смена направления стрелок).