[Website Design][2] Mobile Side Nav Bootstrap 4 (versi 2)

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
Monday, 01 Jul 2019

Hello world,

Melanjutkan postingan sebelumnya yang sudah terlalu lama belum saya lanjutkan yaitu mengenai website desain. Masih sama dengan yang sebelumnya, kali ini pembahasannya adalah tentang bagaimana membuat versi custom navbar bootstrap 4. Seperti pada contoh sebelumya (mobile-side-navbar-bootstrap-4), Contoh kali ini hanya sedikit saya buat versi dengan css yang berbeda. Dengan bentuk list navbar yang sedikit diubah pada saat versi mobile.

Tentu saja masih sama juga dengan contoh sebelumnya, saya mengambil kode awal navbar dari website resminya bootstrap. Bisa dicopy di sini. Kemudian kita tambahkan kode css di bawah ini untuk mengubah stylenya.

    @media (max-width: 992px) {
        .navbar-collapse {
            background: #f5f5f5;
            position: absolute;
            top: 54px;
            left: -300px;
            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;
        }

        .navbar-nav{
            padding: 0;
        }

        .nav-item a{
            border-bottom: 1px solid #cccccc;
            background: #f5f5f5;
            padding: 15px !important;
        }

        .nav-item a:hover{
            background: #cccccc;
            color: #ffffff !important
        }
    }

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 Codenya akan menjadi seperti berikut:

<!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-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;
                }

                .navbar-nav{
                    padding: 0;
                }

                .nav-item a{
                    border-bottom: 1px solid #cccccc;
                    background: #f5f5f5;
                    padding: 15px !important;
                }

                .nav-item a:hover{
                    background: #cccccc;
                    color: #ffffff !important
                }
            }
        </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 :)