Membuat Multi Level Dropdown Bootstrap 4

Hallo teman teman, sudah sangat banyak sekali yang mengembangkan framework tampilan responsive untuk sebuah website. Pada kesempatan kali ini saya akan memberikan satu trik tentang bootstrap 4, Pada saat kalian menggunakan bootstrap, passti saatnya kalian akan menggunakan navbar yang ada pada bootstrap. Penggunaan Navbar di bootstrap secara default hanya akan ada satu tingkatan, yang menjadi masalah adalah bagaimana ketika kita ingin menambahkan submenu yang berlapis-lapis seperti kategori pada sebuah portal berita.

Saat ini kita akan coba untuk membuat sebuahnavbar dengan menu berlapis atau biasa disebut multi level menu pada bootstrap 4. Caranya sangat mudah, pertama pastikan kalian mendownload plugin tambahan yang akan kita gunakan pada link github berikut.

Bootstrap 4 Multi Level Menu

Setelah download, kalian pisahkan folder js dan css yang ada di dalam file zip yang kalian download ke folder project kalian, sekarang kita buat struktur dasar bootstrap

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap NavBar</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        <link href="css/bootstrap-4-navbar.css" rel="stylesheet">

    </head>
    <body>

 

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

        <script src="js/bootstrap-4-navbar.js"></script>
    </body>
</html>

 

Pastikan file terhubung dengan benar, sekarang saya akan berikan contoh dari struktur bootstrap 4 multi level menu.

<nav class="navbar navbar-expand-md navbar-light bg-light">
                <div class="container">
                    <a class="navbar-brand" href="#">Navbar</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNavDropdown">
                        <ul class="navbar-nav">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Features</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Pricing</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Dropdown link
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                    <li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#">Submenu action</a></li>
                                            <li><a class="dropdown-item" href="#">Another submenu action</a></li>


                                            <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="#">Subsubmenu action aa</a></li>
                                                    <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                                                </ul>
                                            </li>
                                            <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="#">Subsubmenu action bb</a></li>
                                                    <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#">Submenu action 2</a></li>
                                            <li><a class="dropdown-item" href="#">Another submenu action 2</a></li>


                                            <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="#">Subsubmenu action 1 3</a></li>
                                                    <li><a class="dropdown-item" href="#">Another subsubmenu action 2 3</a></li>
                                                </ul>
                                            </li>
                                            <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu 3</a>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="#">Subsubmenu action 3 </a></li>
                                                    <li><a class="dropdown-item" href="#">Another subsubmenu action 3</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div> <!-- /container -->
            </nav>

Pada struktur diatas telah banyak di modifikasi agar bisa menjadi lebih mudah saat dibuat dinamis menggunakan PHP. Demikian artikel kali ini yang membahas tentang cara membuat multi level dropdown bootstrap 4. Semoga bermanfaat.

 

27 Desember 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat