"Animated search bar"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="searching"> <center> <a href="javascript:void(0)" class="search-open"> <i class="fa fa-search"></i> </a> </center> <div class="search-inline"> <form> <input type="text" class="form-control" placeholder="Searching..."> <button type="submit"> <i class="fa fa-search"></i> </button> <a href="javascript:void(0)" class="search-close"> <i class="fa fa-times"></i> </a> </form> </div> </div> <script> var sp = document.querySelector('.search-open'); var searchbar = document.querySelector('.search-inline'); var shclose = document.querySelector('.search-close'); function changeClass() { searchbar.classList.add('search-visible'); } function closesearch() { searchbar.classList.remove('search-visible'); } sp.addEventListener('click', changeClass); shclose.addEventListener('click', closesearch); </script>
/* search start */ .search-inline { width: 100%; left: 0; padding-left: 15px; padding-right: 15px; top: 0; height: 10%; position: absolute; opacity: 0; visibility: hidden; background-color: #efefef; z-index: 9; transition: all .5s ease-in-out; } .search-inline.search-visible { opacity: 1; visibility: visible; animation: fadeInDown 0.4s ease-in-out; } .search-inline button[type="submit"] { position: absolute; right: 52px; top: 0; background-color: transparent; border: 0px; top: 0; right: 80px; padding: 0px; cursor: pointer; width: 80px; height: 99%; background: #222; color: #fff; } .search-inline .form-control { border: 0px; padding-left: 0; font-size: 2rem; position: absolute; left: 1%; top: 0; height: 100%; width: 99%; font-family: "Montserrat", sans-serif; font-weight: 700; outline: none; } .search-inline .search-close { position: absolute; top: 0; right: 0; color: #616161; width: 80px; height: 100%; text-align: center; display: table; background: #efefef; text-decoration: none; } .search-inline .search-close i { display: table-cell; vertical-align: middle; } .form-control { display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #efefef; background-clip: padding-box; border: 1px solid #efefef; border-radius: .25rem; transition: border-color .3s ease-in-out, box-shadow .3s ease-in-out; } @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -20%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

Related: See More


Questions / Comments:

Not getting how this works. I've applied everything. The look of the form is correct, but there's no search result at all. It just reloads the same page with no results.

vernontnh (-1) - 1 year ago - Reply -1