0

Подскажите пожалуйста, как сделать, чтобы строка поиска открывалась поверх меню навигации и занимала всю его ширину не сдвигая его в сторону? Сейчас она просто сдвигает его в бок.

$('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;">&#128269;</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>

1 ответ 1

0

Когда твой поиск открывается, блок занимает больше места и сдвигает соседей. Поэтому, header__search нужно сделать абсолютом и задать размер (тогда иконка не будет сдвигаться). Чтобы абсолют сработал, тебе нужно добавить .header__block {position: relative;}, тогда блок будет выравниваться относительно родителя.

$('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;

position: relative;
}

.menu__list {
  display: flex;
}

.menu__item {
  margin: 0 30px 0 0;
  list-style: none;
}

.menu__link {
  color: #fff;
  text-transform: uppercase;
}

.header__search {
    position: absolute;
    right: 0;
width: 70%;

}

.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;">&#128269;</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>

3
  • Спасибо за ответ и помощь. Но в таком случае ссылки в меню навигации перестают быть кликабельными. Если поставить им больше z-index чем у header__search , то ссылки отображаются поверх header__search. 4 апр 2022 в 16:29
  • Нашел я решение, правда, не знаю насколько оно правильное, в общем: в header__block задаем точную ширину, например, flex: 0 1 500px; в header__search полностью убираем width, а в .field.search.opened прописываем width, который необходим и ссылки становятся кликабельными. Но, повторюсь, не знаю насколько это правильное решение. 4 апр 2022 в 17:25
  • твое решение рабочее. Будут проблемы в том случае, если нужно добавить еще один пункт. Так что при возможности, заложи свободное расстояние.
    – VladykoD
    4 апр 2022 в 19:29

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.