» Создание меню :: Вертикальное

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

В статье	Все статьи
Смотрите CSS 🙂	Одноуровневое меню Двухуровневое меню Многоуровневое меню Mega Menu Меню на CSS + JS Вертикальное меню (sidebar)

Вертикальное меню – это тоже горизонтальное, начиная со 2-го уровня. Т.е. при создании вертикального меню нам надо удалить код, отвечающий за построение списка в одну линию

Code
(example_1::github)

HTML

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

<ul>

<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>

<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>

<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>

<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>

<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

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

}

$(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.

В планах написать еще пару статей про адаптивные менюшки

Related Posts

Code (example_1::github)

Code
(example_1::github)