Перемещение пунктов меню влево при расширении окна поиска - PullRequest
Новая
       10

Перемещение пунктов меню влево при расширении окна поиска

0 голосов
/ 22 мая 2019

У меня есть окно поиска, которое расширяется влево при нажатии на него. Но ссылки рядом с окном поиска также должны перемещаться влево, когда поле поиска расширяется.

Это код, над которым я работаю

Пример JsFiddle 

<nav class="header-menu">
  <ul>
    <li><a href="">Menu 1</a></li>
    <li><a href="">Menu 2</a></li>
    <li><a href="">Menu 3</a></li>

    <li class="search-wrap">
      <input class="search" type="search" placeholder="Search"></li>
  </ul>
</nav>

.header-menu ul li {
  display: inline-block;
  vertical-align: middle;
}

.search-wrap {
  width: 175px;
  position: relative;
  height: 27px;
  vertical-align: middle;
  display: inline-block;
}

.search {
  border: 1px solid #ccc;
  padding: 5px 7px;
  margin-left: 15px;
  width: 175px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  position: absolute;
  right: 0;
  top: 0;
}

.search:focus {
  width: 225px;
}

В настоящее время при щелчке окна поиска оно расширяется влево, но пункты меню не перемещаются влево.

Как я могу это исправить. Буду признателен за любую помощь или предложение.

Заранее спасибо

1 Ответ

2 голосов
/ 22 мая 2019

Вам нужно использовать text-align: right для родительского UL 

.header-menu ul {
  text-align:right;
 }

.header-menu ul li {
  display: inline-block;
  vertical-align: middle;
}

.search-wrap {
  width: 175px;
  position: relative;
  height: 27px;
  vertical-align: middle;
  display: inline-block;
  border: 1px solid #ccc;
  margin-left: 15px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.search {
  border: none;
  padding: 5px 7px;
  width: 100%;
}

.search-wrap:focus-within {
  width: 225px;
}

Если вам нужно какое-то абсолютное позиционирование, вы можете использовать позиционирование для элемента nav, а не для li или внутренних элементов.

смотри эту скрипку https://jsfiddle.net/qz1m5hub/

...