На сайте сверху два меню и форма поиска. Верстка адаптивная. Но при разрешении для мобильных, появляется гамбургер меню, в котором только одно меню, другое скрыто, и форма поиска тоже скрыта.
Вот часть кода:
<script type="text/javascript">
jQuery(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
<div class="menu-main">
<ul class="nav menu mod-list">
<li class="item-118 default current active"><a href="/">Link 1</a></li>
<li class="item-119"><a href="#">Link 2</a></li>
<li class="item-120 deeper parent"><a href="#">Dropdown</a>
<ul class="nav-child unstyled small">
<li class="item-121"><a href="#">Dropdown Link 1</a></li>
<li class="item-122"><a href="#">Dropdown Link 2</a></li>
<li class="item-123"><a href="#">Dropdown Link 3</a></li>
<li class="item-124"><a href="#">Dropdown Link 4</a></li>
<li class="item-125"><a href="#">Dropdown Link 5</a></li>
<li class="item-126"><a href="#">Dropdown Link 6</a></li>
</ul>
</li>
<li class="item-128"><a href="#">Link 4</a></li>
<li class="item-129"><a href="#">Link 5</a></li>
<li class="item-130"><a href="#">Link 6</a></li>
</ul>
</div>
<div class="menu-ads">
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
<li><a href="#"><span>Link 8</span></a></li>
<li><a href="#"><span>Link 9</span></a></li>
</ul>
</div>
<a href="#" id="pull"><img class="mobile" src="logo_mini.png" border="0" /></a>
</nav>
<div class="search">
<form action="#" method="post">
<div class="row-fluid adsmanager_search_module">
<div class="floatleft">
<div class="control-group">
<label class="control-label" for="tsearch"></label>
<div class="controls">
<input class="inputbox" type="text" name="tsearch" placeholder="Поиск..." value="" />
</div>
</div>
</div>
<input type="hidden" value="1" name="new_search" />
<div class="floatleft">
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<input type="submit" class="button" value="" />
</div>
</div>
</div>
</div>
</form>
</div>
Пробовал переместить строку <nav class="clearfix"> наверх, чтобы захватить первое меню и убрал у первого ul свойство display: none, но всё равно в выпадающем гамбургер меню отображается только второй блок ul.
Может есть какой-нибудь готовый пример адаптивного CSS меню, в которое можно поместить два блока ul меню и форму поиска? Устроит даже две кнопки гамбургер - слева и справа, чтобы выезжали меню