Форум

serhio11 · #1 (**permalink**) 12.12.2019, 21:24

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

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

MOT · #2 (**permalink**) 18.12.2019, 18:08

Возможно, вам подойдёт мой вариант:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#hamb1 {
display: none;
}
.line1, .line2, .line3 {
width: 30px;
height: 5px;
background: black;
position: fixed;
transition: 0.5s;
}
#hamb1 ~ .line1 {
left: 8px;
top: 8px;
}
#hamb1 ~ .line2 {
left: 8px;
top: 18px;
}
#hamb1 ~ .line3 {
left: 8px;
top: 28px;
}
#hamb1:checked ~ .line1 {
transform: rotate(45deg);
left: 20px;
top: 12px;
width: 20px;
}
#hamb1:checked ~ .line3 {
transform: rotate(-45deg);
left: 20px;
top: 24px;
width: 20px;
}
.padding {
position: fixed;
left: 8px;
top: 8px;
width: 30px;
height: 26px;
}
.search {
height: 16px;
width: 150px;
border-right: 4px solid #216558;
border-bottom: 4px solid #216558;
border-top: 4px solid #2B8473;
border-left: 4px solid #2B8473;
border-radius: 4px 0 0 4px;
transition: 0.5s;
position: fixed;
left: 50px;
}
.search:focus {
animation: bigwidth 0.5s 1 linear;
animation-fill-mode: forwards;
}
@keyframes bigwidth {
0% {
width: 150px;
}
100% {
width: 200px;
}
}
.search {
animation: smallwidth 0.5s 1 linear;
animation-fill-mode: forwards;
}
@keyframes smallwidth {
0% {
width: 200px;
}
100% {
width: 150px;
}
}
.button {
height: 26px;
width: 56px;
border-right: 4px solid #216558;
border-bottom: 4px solid #216558;
border-top: 4px solid #2B8473;
border-left: 4px solid #2B8473;
border-radius: 0 4px 4px 0;
transition: 0.5s;
position: fixed;
left: 200px;
}
.search ~ .button {
left: 200px;
}
.search:focus ~ .button {
left: 256px;
}
.logo {
position: fixed;
right: 8px;
border-right: 4px solid #216558;
border-bottom: 4px solid #216558;
border-top: 4px solid #2B8473;
border-left: 4px solid #2B8473;
border-radius: 4px 4px 4px 4px;
}
.search ~ .logo {
opacity: 1;
transition: 0.25s;
}
.search:focus ~ .logo {
opacity: 0;
}
.menu {
position: fixed;
top: 38px;
left: 0px;
right: 0px;
bottom: 0px;
background: linear-gradient(to right bottom, #49E2C4, #216558);
}
.menu a {
color: white;
}
#hamb1 ~ .menu {
display: none;
}
#hamb1:checked ~ .menu {
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="hamb1">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<label for="hamb1">
<div class="padding"></div>
</label>
<header>
<input class="search">
<input type="button" class="button" value="Поиск">
<div class="logo">Что-то</div>
</header>
<div class="menu">
<hr>
<a href="#">Ссылка 1</a>
<hr>
<a href="#">Ссылка 2</a>
<hr>
<a href="#">Ссылка 3</a>

В данном коде приведено увеличение формы для Android устройства, однако увеличение input можно изменить и для любого другого устройства при помощи чудесной возможности CSS - calc()
http://htmlbook.ru/css/calc

Форум

Справочник

Discord чат

Курсы javascript