Два меню и поиск в мобильной версии
На сайте сверху два меню и форма поиска. Верстка адаптивная. Но при разрешении для мобильных, появляется гамбургер меню, в котором только одно меню, другое скрыто, и форма поиска тоже скрыта.
Вот часть кода:
<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 меню и форму поиска? Устроит даже две кнопки гамбургер - слева и справа, чтобы выезжали меню |
Возможно, вам подойдёт мой вариант:
<!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 |
| Часовой пояс GMT +3, время: 01:34. |