[Website Design][1] Mobile Side Navbar Bootstrap 4

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Tuesday, 05 Mar 2019

Hello world,

Kali ini saya akan melebarkan pembahasan ke materi lain yaitu apa saja yang dapat kita lakukan untuk membuat tampilan custom dari Bootstrap 4. Bootstrap merupakan framework untuk website design yang sudah sangat banyak penggunanya. Berdasarkan data dari trends.builtwith.com, total pengguna Bootstrap mencapai 17,884,534 website pada 2019/01. Sebagian diantaranya sudah mampu memodifikasi tampilan sedemikian rupa hingga sesuai dengan keinginan. Nah di sini saya akan mencoba berbagi desain-desain custom yang pernah saya buat menggunakan Bootstrap 4. 

Contoh kali ini cukup sederhana yaitu membuat navbar versi SideNavbar saat dibuka di mobile. Kode awal yang saya digunakan adalah contoh dari navbar bootstrap 4 yang bisa dicopy di sini https://getbootstrap.com/docs/4.3/components/navbar/. Versi yang saya buat adalah versi navbar yang jika diklik toggle button-nya maka akan memunculkan list menu secara perlahan dari kiri ke kanan seperti sidebar pada aplikasi-aplikasi Android. Nah setelah mencoba ngulik dan mencari referensi dari forum-forum akhirnya jadilah css yang sesuai dengan yang saya inginkan seperti contoh di bawah. Jika kalian sudah membuat file html yang berisi navbar, silakan tambahkan css di bawah ini pada file html kalian.

             @media (max-width: 992px) {
                .navbar-collapse {
                    background: #f5f5f5;
                    position: absolute;
                    top: 54px;
                    left: -300px;
                    padding-left: 15px;
                    padding-right: 15px;
                    padding-bottom: 15px;
                    width: 300px;
                    height: 100vh !important;
                    transition: all 0.3s ease;
                    display: block;
                }
                .navbar-collapse.collapsing {
                    height: 100vh;
                    margin-right: 50%;
                    transition: all 0.3s ease;
                    display: block;
                }
                .navbar-collapse.show {
                    left: 0;
                }
            }

Pada contoh yang saya buat di atas saya gunakan @media max-width: 990px yang artinya kode css yang ada di dalamnya akan berfungsi pada saat website dibuka di mobile (tablet dan hp). 

Full Code

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <title>Hello, world!</title>
        <style>
            @media (max-width: 992px) {
                .navbar-collapse {
                    background: #f5f5f5;
                    position: absolute;
                    top: 54px;
                    left: -300px;
                    padding-left: 15px;
                    padding-right: 15px;
                    padding-bottom: 15px;
                    width: 300px;
                    height: 100vh !important;
                    transition: all 0.3s ease;
                    display: block;
                }
                .navbar-collapse.collapsing {
                    height: 100vh;
                    margin-right: 50%;
                    transition: all 0.3s ease;
                    display: block;
                }
                .navbar-collapse.show {
                    left: 0;
                }
} </style> </head> <body> <nav class="navbar navbar-expand-lg navbar-light fixed-top bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="">Brand</a> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>


Selamat mencoba :)