Строка поиска поверх элементов меню

256

30 апреля 2018, 22:16

Изначально input поиска не видно, он появляется при наведении на лупу и двигает всё меню, как можно сделать чтобы input становился поверх остальных пунктов меню?

<section class="header">
    <div class="header-inner">
        <img src="img/menu.svg">
        <img src="img/logo.png" alt="Bondi" class="logo">
        <div class="nav">
            <div class="nav-list">
                <li class="nav-list__item active">Home</li>
                <li class="nav-list__item">Services</li>
                <li class="nav-list__item">Portfolio</li>
                <li class="nav-list__item">About</li>
                <li class="nav-list__item">Contact</li>
            </div>
            <div class="search">
                <input class="search__input" type="text" placeholder="Search">
                <img  src="img/search.svg" class="search__icon" alt="">
            </div>
            <button class="btn">Login</button>
        </div>
    </div>
</section>

.search {
    padding: 0 15px;
    border-left: 1px solid #00C6BF;
    display: flex;
    align-items: center;
}
.search:hover > .search__input {
    width: 200px;
}
.search__icon {
    width: 24px;
}
.search__input {
    border: none;
    font-style: 18px;
    background-color: transparent;
    outline: none;
    color: rgba(255, 255, 255, .9);
    width: 0;
    transition: .5s ease-out;
}
.search__input:focus {
    width: 200px;
}

Answer 1

при hover скрываем span внутри которого иконка

input растягиваем на 100% form а при hover изменяем ширину на 50%

* { 
  list-style: none; 
  text-decoration: none; 
  margin: 0; 
  padding: 0; 
} 
 
nav, 
ul { 
  display: flex; 
} 
 
nav { 
  width: 100%; 
  justify-content: space-around; 
} 
 
ul { 
  width: 300px; 
  justify-content: space-around; 
} 
 
form { 
  width: 20px; 
  height: 20px; 
  position: relative; 
  transition: width .5s linear; 
} 
 
form:hover { 
  width: 50%; 
} 
 
form:hover span { 
  display: none; 
} 
 
form input[type="search"] { 
  display: block; 
  width: 100%; 
  visibility: hidden; 
} 
 
form:hover input[type="search"] { 
  visibility: visible; 
} 
 
form span { 
  position: absolute; 
  right: 0; 
  top: 0; 
  background: none; 
  filter: grayscale(100%); 
}

<nav> 
  <p class="logo">logo</p> 
  <ul> 
    <li><a href="">item1</a></li> 
    <li><a href="">item2</a></li> 
    <li><a href="">item3</a></li> 
  </ul> 
  <form action=""> 
    <input type="search"> 
    <span>&#128269;</span> 
  </form> 
 
</nav>