21
Feb
2016
Когда я задумавал эту серию статей, я предполагал, что сначала у меню будет блок про горизонтальное меню, а потом еще целый блок про вертикальное меню. Когда я добрался до второй части, оказалось, что рассказывать мне в принципе нечего. И сейчас вы поймете почему…
В статье | Все статьи |
Смотрите CSS 🙂 |
|
Вертикальное меню – это тоже горизонтальное, начиная со 2-го уровня. Т.е. при создании вертикального меню нам надо удалить код, отвечающий за построение списка в одну линию
Code
(example_1::github)
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 |
<div class="sidebar"> <ul> <!-- Пункт меню 1 --> <li><a href="#">Пункт 1</a> <ul> <li><a href="#">подпункт 1.1</a></li> <li><a href="#">подпункт 1.2</a> <ul> <li><a href="#"> подпункт 1.2.1 </a> <ul> <li><a href="#"> подпункт 1.2.1.1 </a></li> <li><a href="#"> подпункт 1.2.1.2</a> <ul> <li><a href="#"> подпункт 1.2.1.2.1 </a></li> <li><a href="#"> подпункт 1.2.1.2.2</a></li> <li><a href="#"> подпункт 1.2.1.2.3</a></li> <li><a href="#"> подпункт 1.2.1.2.4</a></li> <li><a href="#"> подпункт 1.2.1.2.5</a></li> </ul> </li> <li><a href="#"> подпункт 1.2.1.3</a></li> <li><a href="#"> подпункт 1.2.1.4</a></li> <li><a href="#"> подпункт 1.2.1.5</a></li> </ul> </li> <li><a href="#"> подпункт 1.2.2</a> <ul> <li><a href="#"> подпункт 1.2.2.1 </a></li> <li><a href="#"> подпункт 1.2.2.2 </a></li> <li><a href="#"> подпункт 1.2.2.3 </a></li> <li><a href="#"> подпункт 1.2.2.4 </a></li> <li><a href="#"> подпункт 1.2.2.5 </a></li> </ul> </li> <li><a href="#"> подпункт 1.2.3</a></li> <li><a href="#"> подпункт 1.2.4</a></li> <li><a href="#"> подпункт 1.2.5</a> <ul> <li><a href="#"> подпункт 1.2.5.1 </a></li> <li><a href="#"> подпункт 1.2.5.2</a></li> <li><a href="#"> подпункт 1.2.5.3</a></li> <li><a href="#"> подпункт 1.2.5.4</a></li> <li><a href="#"> подпункт 1.2.5.5</a></li> </ul> </li> </ul> </li> <li><a href="#">подпункт 1.3</a> <ul> <li><a href="#"> подпункт 1.3.1 </a></li> <li><a href="#"> подпункт 1.3.2 </a></li> <li><a href="#"> подпункт 1.3.3 </a></li> <li><a href="#"> подпункт 1.3.4 </a></li> <li><a href="#"> подпункт 1.3.5 </a></li> </ul> </li> <li><a href="#">подпункт 1.4</a></li> <li><a href="#">подпункт 1.5</a> <ul> <li><a href="#">подпункт 1.5.1 </a></li> <li><a href="#"> подпункт 1.5.2</a></li> <li><a href="#"> подпункт 1.5.3</a></li> <li><a href="#"> подпункт 1.5.4</a></li> <li><a href="#"> подпункт 1.5.5</a></li> </ul> </li> </ul> </li> <!-- Пункт меню 2 --> <li><a href="#">Пункт 2</a> <ul> <li><a href="#">подпункт 2.1</a> <ul> <li><a href="#"> подпункт 2.1.1 </a> <ul> <li><a href="#"> подпункт 2.2.1.1 </a></li> <li><a href="#"> подпункт 2.2.2.2 </a></li> <li><a href="#"> подпункт 2.2.3.3 </a></li> <li><a href="#"> подпункт 2.2.4.4 </a></li> <li><a href="#"> подпункт 2.2.5.5 </a></li> </ul> </li> <li><a href="#"> подпункт 2.1.2</a></li> <li><a href="#"> подпункт 2.1.3</a></li> <li><a href="#"> подпункт 2.1.4</a></li> <li><a href="#"> подпункт 2.1.5</a></li> </ul> </li> <li><a href="#">подпункт 2.2</a></li> <li><a href="#">подпункт 2.3</a></li> <li><a href="#">подпункт 2.4</a></li> <li><a href="#">Длинный подпункт, длинный подпункт</a></li> </ul> </li> <!-- Пункт меню 3 --> <li><a href="#">Длинный пункт меню 3</a> <ul> <li><a href="#">подпункт 3.1</a> <ul> <li><a href="#"> подпункт 3.1.1 </a></li> <li><a href="#"> подпункт 3.1.2 </a></li> <li><a href="#"> подпункт 3.1.3 </a></li> <li><a href="#"> подпункт 3.1.4 </a></li> <li><a href="#"> подпункт 3.1.5 </a></li> </ul> </li> <li><a href="#">подпункт 3.2</a> <ul> <li><a href="#"> подпункт 3.2.1 </a></li> <li><a href="#"> подпункт 3.2.2 </a></li> <li><a href="#"> подпункт 3.2.3 </a></li> <li><a href="#"> подпункт 3.2.4 </a></li> <li><a href="#"> подпункт 3.2.5 </a></li> </ul> </li> <li><a href="#">подпункт 3.3</a></li> <li><a href="#">подпункт 3.4</a></li> <li><a href="#">подпункт 3.5</a></li> </ul> </li> <!-- Пункт меню 4 --> <li><a href="#">Пункт 4</a> <ul> <li><a href="#">подпункт 4.1</a> <ul> <li><a href="#"> подпункт 4.1.1 </a></li> <li><a href="#"> подпункт 4.1.2 </a></li> <li><a href="#"> подпункт 4.1.3 </a></li> <li><a href="#"> подпункт 4.1.4 </a></li> <li><a href="#"> подпункт 4.1.5 </a></li> </ul> </li> <li><a href="#">подпункт 4.2</a></li> <li><a href="#">подпункт 4.3</a> <ul> <li><a href="#"> подпункт 4.3.1 </a></li> <li><a href="#"> подпункт 4.3.2 </a></li> <li><a href="#"> подпункт 4.3.3 </a></li> <li><a href="#"> подпункт 4.3.4 </a></li> <li><a href="#"> подпункт 4.3.5 </a></li> </ul> </li> <li><a href="#">подпункт 4.4</a></li> <li><a href="#">подпункт 4.5</a></li> </ul> </li> <!-- Пункт меню 5 --> <li><a href="#">Пункт 5</a> <ul> <li><a href="#">подпункт 5.1</a> <ul> <li><a href="#"> подпункт 5.1.1 </a></li> <li><a href="#"> подпункт 5.1.2 </a></li> <li><a href="#"> подпункт 5.1.3 </a></li> <li><a href="#"> подпункт 5.1.4 </a></li> <li><a href="#"> подпункт 5.1.5 </a></li> </ul> </li> <li><a href="#">подпункт 5.2</a></li> <li><a href="#">подпункт 5.3</a></li> <li><a href="#">подпункт 5.4</a></li> <li><a href="#">подпункт 5.5</a></li> </ul> </li> </ul> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.sidebar > ul > li { /* 1 уровень */ /*float: left;*/ /* CHANGED теперь не надо делать меню 1-го уровня в одну линию */ border: 1px solid #222; } .sidebar > ul li ul { /* Прячем все меню ниже 1 уровня */ display: none; position: absolute; } /* Если без JS, то раскомментировать */ /*.sidebar > ul li:hover > ul { /!* Показываем все меню при наведении на родительский li, которые находятся ниже 1 уровня*!/*/ /*display: block;*/ /*}*/ .sidebar ul li { position: relative; /* Для того чтобы top:0 для меню >=2 уровня выравнивал по li, а не по ul */ } .sidebar > ul ul { /* Начиная с 2-го уровня размещать списки справа от родительского li */ top: 0; left: 100%; } |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(function() { $('.sidebar ul li').hover( /* Функция исполняется, когда мышь входит в область меню */ function mouseOver() { clearTimeout($.data(this, 'timer')); /* если мы успели вернуться мышкой на меню, до того как прошла задержка на закрытие, то таймер обнуляется и сворачивание меню не произойдет*/ /* если использовать stop(true, FALSE), то скачка на конец анимации не будет (false стоит по умолчанию) */ $(this).find('> ul').stop(true).slideDown(1000); /* анимация разворачивания меню */ }, /* Функция исполняется, когда мышь покидает область меню */ function mouseOut() { var $this = $(this); /* запоминаем окружение, т.к. в Таймере мы до него не достучимся*/ $.data(this, 'timer', setTimeout( /* Устанавливаем таймер, чтобы закрытие меню не начиналось сразу после того как мышь покинет li */ function () { $this.find('> ul').stop(true).slideUp(1000); /* анимация сворачивания меню */ }, 200) /* задержка закрытия меню */ ); }); }); |
Как видите поменялась только 1 строчка в CSS.
В планах написать еще пару статей про адаптивные менюшки