Cara Membuat Slide Search di dalam Navbar Bootstrap

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Membuat Slide Search di dalam Navbar Bootstrap.

FungsiÂ form search itu sendiri adalah untuk mencari apa yang kita cari atau inginkan di dalam suatu website.

Sekarang saya akan membuat slide form search di dalam Navbar Bootstrap. Berikut tutorial singkat tentang Cara Membuat Slide Search di dalam Navbar Bootstrap:

â€“ Pertama teman-teman download framework bootstrapnya dulu.

â€“ Kedua buka text editor teman-teman lalu buka file bootstrap yang telah kita download dan buat file index.html dengan cara mengcopy default html yang sudah ada di website bootstrap, jangan lupa save di dalam folder bootstrap teman-teman

â€“ Ketiga kita buat kode html navbar-nya:

<div class="container-fluid pd">
    
    <!-- Second navbar for search -->
    <nav class="navbar bd navbar-inverse">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Dumetschool</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse-3">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Works</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
            <li>
              <a class="btn btn-default btn-outline btn-circle collapsed"  data-toggle="collapse" href="#nav-collapse3" aria-expanded="false" aria-controls="nav-collapse3">Search</a>
            </li>
          </ul>
          <div class="collapse nav navbar-nav nav-collapse slide-down" id="nav-collapse3">
            <form class="navbar-form navbar-right" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search" />
              </div>
              <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
            </form>
          </div>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->

</div><!-- /.container-fluid -->

â€“ Keempat kita masukan css customnya di sini saya menggunakan nama file ug.css untuk css customnya:

.pd {padding:0 0;}

.bd {border-radius:0; background-color:#3498db; border-color: none }

.navbar-inverse .navbar-brand { position: relative; z-index: 2; color:white;}
.navbar-inverse .navbar-nav > li > a {color:white;}
.btn-default:hover{border-color: #fff}

.navbar-nav.navbar-right .btn { position: relative; z-index: 2; 
                                padding: 4px 20px; margin: 10px auto; 
                                transition: transform 0.3s; }

.navbar .navbar-collapse { position: relative; overflow: hidden !important; }
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 22px; }

.navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0; 
                        right: 0; bottom: 0; margin: 0; padding-right: 120px; 
                        padding-left: 80px; width: 100%; }
.navbar.navbar-inverse .nav-collapse { background-color: #3498db }
.navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; }
.nav-collapse>li { float: right; }

.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }

.navbar-nav.navbar-right .btn:not(.collapsed) {
    background-color: rgb(62, 220, 236);
    border-color: rgb(81, 183, 162);
    color: rgb(255, 255, 255);
}

.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
    height: auto !important;
    transition: transform 0.3s;
    transform: translate(0px,-50px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
    transform: translate(0px,0px);
}


@media screen and (max-width: 767px) {
    .navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 15px; padding-right: 15px; } 
    
    .navbar .nav-collapse { margin: 7.5px auto; padding: 0; }
    .navbar .nav-collapse .navbar-form { margin: 0; }
    .nav-collapse>li { float: none; }
    
    .navbar.navbar-default .nav-collapse,
    .navbar.navbar-inverse .nav-collapse {
        transform: translate(-100%,0px);
    }
    .navbar.navbar-default .nav-collapse.in,
    .navbar.navbar-inverse .nav-collapse.in {
        transform: translate(0px,0px);
    }
    
    .navbar.navbar-default .nav-collapse.slide-down,
    .navbar.navbar-inverse .nav-collapse.slide-down {
        transform: translate(0px,-100%);
    }
    .navbar.navbar-default .nav-collapse.in.slide-down,
    .navbar.navbar-inverse .nav-collapse.in.slide-down {
        transform: translate(0px,0px);
    }
}

Setelah kita save maka hasilnya akan menjadi seperti ini:

Dan apabila kita klik pada button search maka akan tampil form search beranimasikan slide down. gambarnya sperti berikut:

Bagaimana teman-teman cukup mudahkan Membuat Slide Search di dalam Navbar Bootstrap.

Sekian artikel saya hari ini tentang Cara Membuat Slide Search di dalam Navbar Bootstrap.

Sehat selalu ya teman-teman, selamat mencoba.

Cara Membuat Slide Search di dalam Navbar Bootstrap

Kategori