Подскажите пожалуйста, как сделать, чтобы строка поиска открывалась поверх меню навигации и занимала всю его ширину не сдвигая его в сторону? Сейчас она просто сдвигает его в бок.
$('body').on('click', 'button', function(e) {
if ($('#search').val() == '' || !$('.field').hasClass('opened')) {
e.preventDefault();
e.stopPropagation();
$('.field').toggleClass('opened');
}
});
$('body').on('click', '.field', function(e) {
e.stopPropagation();
});
$('html').on('click', function(e) {
$('.field').removeClass('opened');
});
* {
padding: 0px;
margin: 0px;
border: 0px;
text-decoration: none;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
max-width: 1000px;
height: 100px;
padding: 0 20px;
font-family: Arial, Helvetica, sans-serif;
background-color: blueviolet;
}
.header__logo {
color: #fff;
font-size: 34px;
}
.header__block {
display: flex;
align-items: center;
flex: 0 1 auto;
}
.menu__list {
display: flex;
}
.menu__item {
margin: 0 30px 0 0;
list-style: none;
}
.menu__link {
color: #fff;
text-transform: uppercase;
}
.header__search {}
.search-header {
height: 40px;
margin-left: 0;
position: relative;
}
.search-header__button {
width: 40px;
height: 40px;
background: none;
cursor: pointer;
}
.actions {
float: right;
width: 10%;
}
.field.search {
float: right;
display: block;
width: 0;
transition: all 0.3s ease 0s;
box-sizing: border-box;
overflow: hidden;
outline: none;
}
.field.search.opened {
width: 90%;
transition: all 0.3s ease 0s;
}
.search-header__input {
width: 100%;
height: 40px;
}
.button {
padding: 15px 35px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
color: #fff;
letter-spacing: 2px;
background-color: rgb(26, 170, 26);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header class="header">
<div class="header__container">
<a href="" class="header__logo">Logo</a>
<div class="header__block">
<div class="header__menu">
<nav class="menu__body">
<ul class="menu__list">
<li class="menu__item">
<a href="" class="menu__link">Link</a>
</li>
<li class="menu__item">
<a href="" class="menu__link">Link</a>
</li>
<li class="menu__item">
<a href="" class="menu__link">Link</a>
</li>
<li class="menu__item">
<a href="" class="menu__link">Link</a>
</li>
<li class="menu__item">
<a href="" class="menu__link">Link</a>
</li>
</ul>
</nav>
</div>
<div class="header__search">
<form action="#" class="search-header">
<div class="actions action-button">
<button type="submit" class="search-header__button"><span style="font-size: 25px;">🔍</span></button>
</div>
<div class="field search">
<input id="search" autocomplete="off" type="text" name="form[]" data-error="Ошибка" placeholder="" class="search-header__input">
</div>
</form>
</div>
</div>
<div class="header__button">
<a href="#" class="button">Button</a>
</div>
</div>
</header>