如何制作可折叠的搜索框以在点击时覆盖导航栏项目

Question

I want to put a search box on the right-hand side of my bootstrap navbar , and I want to make it expand and cover all the items in the navbar except the navbar-brand once the user clicks on it.

Here is what I have tried so far:

<div class="d-flex pt-3  mb-1 pb-0 align-self-end" style="background-color: transparent;" >

  <div class="container-search">
    <form class="searchbar" action="{% url 'search' %}"> 
      <input type="search" placeholder="Search" name="search" class="searchbar-input" value="{{ values.keywords}}" onkeyup="buttonUp();" required> 
      <input type="submit" class="searchbar-submit" value="GO"> 
      <span class="searchbar-icon"><i class="fa fa-search" aria-hidden="true"></i></span> 
    </form>
  </div>


</div>

CSS:

<style>
   .container-search {
     max-width: 600px;
    }

    .searchbar {
        position: relative;
        min-width: 50px;
        width: 0%;
        height: 50px;
        float: right;
        overflow: hidden;
        -webkit-transition: width 0.3s;
        -moz-transition: width 0.3s;
        -ms-transition: width 0.3s;
        -o-transition: width 0.3s;
        transition: width 0.3s
    }

    .searchbar-input {
        top: 0;
        right: 0;
        border: 0;
        outline: 0;
        background: #c5c5c5;
        width: 80vw;
        height: 50px;
        margin: 0;
        /* padding: 0px 55px 0px 20px; */
        font-size: 20px;
        color: #fff;
        overflow: hidden;
    }

    .searchbar-input::-webkit-input-placeholder {
        color: #fff
    }

    .searchbar-input:-moz-placeholder {
        color: #fff
    }

    .searchbar-input::-moz-placeholder {
        color: #fff
    }

    .searchbar-input:-ms-input-placeholder {
        color: #fff
    }

    .searchbar-icon,
    .searchbar-submit {
        width: 50px;
        height: 50px;
        display: block;
        position: absolute;
        top: 0;
        font-family: verdana;
        font-size: 22px;
        right: 0;
        padding: 0;
        margin: 0;
        border: 0;
        outline: 0;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
        color: #fff;
        background: #c2c2c2;
        border-left: 1px solid white
    }

    .searchbar-open {
        width: 100%;
    }
</style>

JS:

<script>  
  $(document).ready(function(){
    var submitIcon = $('.searchbar-icon');
    var inputBox = $('.searchbar-input');
    var searchbar = $('.searchbar');
    var isOpen = false;
    submitIcon.click(function(){
      if(isOpen == false){
      searchbar.addClass('searchbar-open');
      inputBox.focus();
      isOpen = true;
      } else {
      searchbar.removeClass('searchbar-open');
      inputBox.focusout();
      isOpen = false;
      }
    });
    submitIcon.mouseup(function(){
      return false;
    });
    searchbar.mouseup(function(){
      return false;
    });
    $(document).mouseup(function(){
      if(isOpen == true){
        $('.searchbar-icon').css('display','block');
        submitIcon.click();
      }
    });
  });

  function buttonUp(){
    var inputVal = $('.searchbar-input').val();
    inputVal = $.trim(inputVal).length;
    if( inputVal !== 0){
      $('.searchbar-icon').css('display','none');
    } else {
      $('.searchbar-input').val('');
      $('.searchbar-icon').css('display','block');
    }
  }

</script>

For example, I want to make something like the one in the bosch website.

The problem with my code is that after expansion, the input box expands towards the right and goes out of screen. Instead, I want it to expand inside the navbar, and cover the menu items.

Answer 1

Keeping things simple. So, below is simple code using only CSS and bootstrap.

 .navbar-nav{ position: relative; }.search:focus{ position: absolute; width: 100%; right:0; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav flex-grow-1 justify-content-end"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <input class="search" type="text" placeholder="Search"/> </li> </ul> </nav>