Здравствуйте. Помогите разобраться, как сделать сайдбар с выпадающим меню. Сейчас всё обстоит так:
1. По нажатию на волшебную кнопку появляется скрытый ранее bootstrap-столбец, при этом с помощью JQuery я переопределяю классы для элементов, которые расположены справа от сайдбара, элементы перестраиваются и сдвигаются (картинка №1 - сайдбар не отображается, картинка №2 - сайдбар отображается и элементы смещены):
Картинка 1 и Картинка 2
2. При нажатии на какой-либо из пунктов (например, Blog) появляется ещё один bootstrap-столбец, который тоже был скрыт. Элементы смещаются ещё правее (картинка №3).
При этом мой убогий код выглядит примерно так:
<div class="col-lg-3 main-menu no-padding">
<div class="menu-container">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Store</a></li>
<li class="blog">
Blog
</li>
<li><a href="">Community</a></li>
<li><a href="">Contest</a></li>
<li><a href="">About</a></li>
<li><a href="">Content</a></li>
</ul>
</div>
<div class="contact-container"></div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 sub-menu">
submenu
</div>
Как видите, элемент, который содержит подменю, находится вне основного списка элементов меню, что, конечно же, неправильно. Помогите, пожалуйста, разобраться, как сделать так, чтобы всё было семантически верно и подменю было внутри списка основного меню.
Спасибо.