Вертикальное многоуровневое css меню: создаём меню — HTML Academy – Вертикальное меню для сайта — разметка и примеры оформления

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

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

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

Шаг 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

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

.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

Многоуровневое выпадающее меню с помощью CSS3В сегодняшнем уроке мы рассмотрим замечательный прием, который поможет сохранить место у вас на сайте, а именно многоуровневое выпадающее меню, которое позволит сэкономить много на сайте, при этом пользователю интуитивно понятно, что следует за дочерним элементом. Благодаря такой навигации вы можете сократить количество отображаемой информации на сайте при этом качественно ее оформить. Данный пример разработан исключительно средствами CSS. Так же мы добавили и версию с применением jQuery.

 

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

Многоуровневое выпадающее меню с помощью CSS3

Чтобы получить такую функцию мы использовали несколько знакомых Вам, с уроков ранее, а именно псевдо-класс :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”.

Многоуровневое выпадающее меню с помощью CSS3

Шаг 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 (смена направления стрелок).

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

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *