Показать сообщение отдельно
  #1 (permalink)  
Старый 12.12.2019, 21:24
Интересующийся
Отправить личное сообщение для serhio11 Посмотреть профиль Найти все сообщения от serhio11
 
Регистрация: 27.01.2014
Сообщений: 10

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

<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 меню и форму поиска? Устроит даже две кнопки гамбургер - слева и справа, чтобы выезжали меню
Ответить с цитированием