[Website Design][3] Sidebar 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, 02 Jul 2019

Hello world,

Sidebar banyak sekali digunakan dalam membuat sebuah website. Kebanyakan sidebar digunakan untuk halaman administrator dimana kalau kita cari template admin maka paling banyak menggunakan sidebar sebagai navigasi. Pada post kali ini saya membuat sebuah sidebar yang saya custom dari navbar standar dari bootstrap 4. Untuk kode awal navbar bootstrap 4 bisa dilihat di sini. Untuk membuat sidebar biasanya beberapa developer membuat versi kode html secara custom dan ditambah css yang mereka buat custom juga. Nah di sini saya membuat kode htmlnya masih sama persis atau masih mempertahankan struktur kode html dari navbar bootstrap 4 dari web resminya. Selain akan lebih mudah karena hanya tinggal mengubah kode css-nya, kita tidak perlu memikirkan struktur html seperti apa yang bagus atau rapih. 

Selanjutnya di bawah ini kode css yang saya buat custom. Kode ini masih terus saya kembangkan tetapi untuk sekarang ini sudah bisa digunakan dengan versi saat ini.

    .navbar-collapse {
        background: #f5f5f5;
        position: absolute;
        top: 54px;
        left: -300px;
        padding-bottom: 15px;
        width: 300px;
        height: calc(100vh - 54px) !important;
        transition: all 0.3s ease;
        display: block;
        overflow-y: scroll
    }
    .navbar-collapse.collapsing {
        transition: none;
        display: none;
    }
    .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
    }

    #content{
        margin-top: 50px;
        margin-left: 300px;
        transition: all 0.3s ease;
        padding: 15px
    }

    .dropdown-menu{
        background: none;
        border: none
    }
    .dropdown-menu a{
        border: none
    }

    @media (max-width: 700px) {
        #content{
            margin-left: 0;
        }
    }

Selain itu saya juga menambahkan perubahan pada javascript. Kode javascript di sini saya pakai untuk mengubah event pada navbar-toggler agar lebih responsive.

    function myFunction(x) {
        var element = document.getElementById("navbarCollapse");

        if (x.matches) { // If media query matches
            element.classList.remove("show");
        } else {
            element.classList.add("show");
            $('#navbarCollapse').on('hidden.bs.collapse', function () {
                // do something…
                $('#content').css('margin-left', '0');
            });
            $('#navbarCollapse').on('show.bs.collapse', function () {
                // do something…
                $('#content').css('margin-left', '300px');
            });
        }
    }

    var x = window.matchMedia("(max-width: 700px)")
    myFunction(x) // Call listener function at run time
    x.addListener(myFunction);

Setelah menambahan kode di atas silakan coba dijalankan di browser.

Full code-nya 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>
            .navbar-collapse {
                background: #f5f5f5;
                position: absolute;
                top: 54px;
                left: -300px;
                padding-bottom: 15px;
                width: 300px;
                height: calc(100vh - 54px) !important;
                transition: all 0.3s ease;
                display: block;
                overflow-y: scroll
            }
            .navbar-collapse.collapsing {
                transition: none;
                display: none;
            }
            .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
            }

            #content{
                margin-top: 50px;
                margin-left: 300px;
                transition: all 0.3s ease;
                padding: 15px
            }

            .dropdown-menu{
                background: none;
                border: none
            }
            .dropdown-menu a{
                border: none
            }

            @media (max-width: 700px) {
                #content{
                    margin-left: 0;
                }
            }
        </style>
    </head>
    <body>
        <nav class="navbar 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 dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                </ul>

            </div>
        </nav>
        <div id="content">
            <h1>Hello, world!</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus aliquet facilisis. Maecenas et hendrerit justo, sit amet vehicula velit. Curabitur felis nisi, mollis sed luctus vel, rutrum sit amet arcu. In pellentesque lobortis odio, ut malesuada turpis laoreet quis. Vivamus sodales ac mauris eu vulputate. Phasellus purus elit, consequat vitae augue eget, suscipit porttitor eros. Integer quis molestie massa. Suspendisse scelerisque purus in dui convallis, nec porta nisi porttitor. Sed nibh nunc, laoreet nec ornare et, blandit eget turpis. Donec volutpat interdum purus. Proin faucibus purus vel urna efficitur imperdiet.
            </p>
            <p>
                Duis eu varius lectus, interdum rhoncus nisl. Vestibulum vel erat in massa luctus interdum. Morbi tincidunt dignissim nulla nec posuere. Nam mauris sapien, tristique vitae euismod sit amet, tincidunt a ligula. Nam at elit nec ante elementum condimentum ut sed purus. Mauris vitae velit egestas velit cursus lobortis. Vivamus sed ultricies neque. Nulla pellentesque interdum porta. Phasellus imperdiet porttitor nunc at interdum. Phasellus consequat placerat purus sit amet sollicitudin. Donec pellentesque placerat elit, ac faucibus diam molestie vitae.
            </p>
            <p>
                Ut quis leo ac eros imperdiet faucibus non sit amet tellus. In sed congue ex. In feugiat placerat urna ac venenatis. Sed vitae nibh iaculis, lobortis quam id, feugiat lacus. Quisque ac efficitur turpis, vel elementum eros. Praesent facilisis massa risus, cursus porttitor ligula vehicula sit amet. Quisque eget cursus arcu. Pellentesque sit amet mi sed nulla suscipit dapibus. Curabitur varius nisi non ex consectetur, eget posuere quam condimentum. Donec urna nibh, posuere non lacinia ut, posuere sit amet quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut tincidunt eleifend pretium.
            </p>
            <p>
                Ut tincidunt tempor tempor. Maecenas cursus convallis pulvinar. Fusce convallis elementum ante, id commodo nunc. Donec pretium metus a massa mattis, a mollis tortor imperdiet. Phasellus eros nunc, laoreet ut odio non, tincidunt lacinia nunc. Fusce interdum malesuada lobortis. Nunc imperdiet porta tincidunt. Maecenas aliquam faucibus massa vel varius. Proin dictum ex sit amet ex pretium consectetur. Duis nec feugiat dui.
            </p>
            <p>
                Aenean lorem dui, eleifend bibendum urna sit amet, luctus mattis diam. Suspendisse elit libero, ornare sit amet risus eget, egestas pretium nibh. Suspendisse aliquet, urna nec auctor tempor, neque eros mollis libero, condimentum rhoncus diam lectus quis risus. Maecenas et egestas sapien. Sed sagittis scelerisque eleifend. Donec a luctus risus. Maecenas vitae dolor at odio suscipit pellentesque nec a augue. Suspendisse blandit velit dui, varius venenatis orci rhoncus a. Etiam condimentum lectus nec interdum tempus. Mauris eu nulla eleifend, mollis diam nec, congue leo.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus aliquet facilisis. Maecenas et hendrerit justo, sit amet vehicula velit. Curabitur felis nisi, mollis sed luctus vel, rutrum sit amet arcu. In pellentesque lobortis odio, ut malesuada turpis laoreet quis. Vivamus sodales ac mauris eu vulputate. Phasellus purus elit, consequat vitae augue eget, suscipit porttitor eros. Integer quis molestie massa. Suspendisse scelerisque purus in dui convallis, nec porta nisi porttitor. Sed nibh nunc, laoreet nec ornare et, blandit eget turpis. Donec volutpat interdum purus. Proin faucibus purus vel urna efficitur imperdiet.
            </p>
            <p>
                Duis eu varius lectus, interdum rhoncus nisl. Vestibulum vel erat in massa luctus interdum. Morbi tincidunt dignissim nulla nec posuere. Nam mauris sapien, tristique vitae euismod sit amet, tincidunt a ligula. Nam at elit nec ante elementum condimentum ut sed purus. Mauris vitae velit egestas velit cursus lobortis. Vivamus sed ultricies neque. Nulla pellentesque interdum porta. Phasellus imperdiet porttitor nunc at interdum. Phasellus consequat placerat purus sit amet sollicitudin. Donec pellentesque placerat elit, ac faucibus diam molestie vitae.
            </p>
            <p>
                Ut quis leo ac eros imperdiet faucibus non sit amet tellus. In sed congue ex. In feugiat placerat urna ac venenatis. Sed vitae nibh iaculis, lobortis quam id, feugiat lacus. Quisque ac efficitur turpis, vel elementum eros. Praesent facilisis massa risus, cursus porttitor ligula vehicula sit amet. Quisque eget cursus arcu. Pellentesque sit amet mi sed nulla suscipit dapibus. Curabitur varius nisi non ex consectetur, eget posuere quam condimentum. Donec urna nibh, posuere non lacinia ut, posuere sit amet quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut tincidunt eleifend pretium.
            </p>
            <p>
                Ut tincidunt tempor tempor. Maecenas cursus convallis pulvinar. Fusce convallis elementum ante, id commodo nunc. Donec pretium metus a massa mattis, a mollis tortor imperdiet. Phasellus eros nunc, laoreet ut odio non, tincidunt lacinia nunc. Fusce interdum malesuada lobortis. Nunc imperdiet porta tincidunt. Maecenas aliquam faucibus massa vel varius. Proin dictum ex sit amet ex pretium consectetur. Duis nec feugiat dui.
            </p>
            <p>
                Aenean lorem dui, eleifend bibendum urna sit amet, luctus mattis diam. Suspendisse elit libero, ornare sit amet risus eget, egestas pretium nibh. Suspendisse aliquet, urna nec auctor tempor, neque eros mollis libero, condimentum rhoncus diam lectus quis risus. Maecenas et egestas sapien. Sed sagittis scelerisque eleifend. Donec a luctus risus. Maecenas vitae dolor at odio suscipit pellentesque nec a augue. Suspendisse blandit velit dui, varius venenatis orci rhoncus a. Etiam condimentum lectus nec interdum tempus. Mauris eu nulla eleifend, mollis diam nec, congue leo.</p>
        </div>


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

        <script>
            function myFunction(x) {
                var element = document.getElementById("navbarCollapse");

                if (x.matches) { // If media query matches
                    element.classList.remove("show");
                } else {
                    element.classList.add("show");
                    $('#navbarCollapse').on('hidden.bs.collapse', function () {
                        // do something…
                        $('#content').css('margin-left', '0');
                    });
                    $('#navbarCollapse').on('show.bs.collapse', function () {
                        // do something…
                        $('#content').css('margin-left', '300px');
                    });
                }
            }

            var x = window.matchMedia("(max-width: 700px)")
            myFunction(x) // Call listener function at run time
            x.addListener(myFunction);
        </script>
    </body>
</html>

Selamat mencoba :)