Cara Membuat Modal Menu Bootstrap 4

07/01/2020    Risman Hakim    367     Website

Cara Membuat Modal Menu Bootstrap 4 - Dengan adanya framework bootstrap saat ini membuat orang dengan lebih mudah dalam membuat layout website, membuat komponen - kompone lain seperti, menu, carousel slider, card, modal dan komponen lainnya. Dengan class - class yang sudah dibuatkan tentu ini meringankan dalam mengerjakan sebuah tampilan website.

Pada kesempatan kali ini saya akan berbagi tutorial bootstrap yaitu bagaimana Cara Membuat Modal Menu Bootstrap 4, dimana menu merupakan komponen yang sangat penting yang wajib ada dalam setiap halaman website. Buat kalian yang ingin membuat modal menu bisa ikuti langkah - langkahnya berikut ini.

Silahkan kalian bisa download library bootstrap 4 terlebih dahulu dari halaman resmi bootstrapnya, setelah itu kalian bisa tambahkan sintak untuk membuat modal menu seperti berikut.

<div class="container mt-5">
    <div class="row">
        <div class="col">
            <a href="#modal" class="btn btn-dark btn-lg float-right" data-toggle="modal">Menu</a>
        </div>
    </div>
</div>
<div class="modal-menu modal fade pl-0" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-full mt-0 ml-0" role="document">
        <div class="modal-content rounded-0">
            <div class="modal-header">
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
              <div class="modal-body p-4 rounded-0 row justify-content-center" id="result">
                <div class="col-12 col-md-12 col-lg-2">
                    <div class="list-group text-center rounded-0">
                        <a href="" class="list-group-item bg-transparent border-0 text-white list-group-item-action">HOME</a>
                        <a href="" class="list-group-item bg-transparent border-0 text-white list-group-item-action">PRODUCT</a>
                        <a href="" class="list-group-item bg-transparent border-0 text-white list-group-item-action">BSERVICE</a>
                        <a href="" class="list-group-item bg-transparent border-0 text-white list-group-item-action">BLOG</a>
                        <a href="" class="list-group-item bg-transparent border-0 text-white list-group-item-action">CONTACT US</a>
                    </div>
                </div>
              </div>
        </div>
    </div>
</div>

Setelah mengetikan sintak untuk modal menu seperti diatas, langkah selanjutnya kita akan sedikit custome desain dari menunya, silahkan kalian buat satu file custome.css kemudian ketikan sintak CSS berikut ini.

body {
    font-family: 'Roboto', sans-serif;
}
.modal-menu .modal-header {
    border-bottom: 0;
}
.modal-menu .modal-full {
    min-width: 100%;
}
.modal-menu .modal-full .modal-content {
    min-height: 100vh;
}
.modal-menu .modal-content {
    background-color: rgb(0, 0, 0, 0.9);
    color: #FFFFFF;
    position: fixed;
    z-index: 999
}
.modal-menu .list-group-item {
    padding: 1rem !important;
}
.modal-menu .list-group-item:first-child {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.modal-menu .list-group-item:last-child {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
/*=== LINE ANIMATION ===*/
.modal-menu .list-group-item:after{
    content: '';
    position: absolute;
    width: 0; height: 3px;
    display: block;
    margin-top: 10px;
    right: 0;
    background: #fff;
    transition: width .2s ease;
    -webkit-transition: width .2s ease;
}
.modal-menu .list-group-item:hover:after{
    width: 100%;
    left: 0;
    background: #fff;
}

Pastikan file custome.css sudah diload, setelah selesai semua sintak diatas diketikan kalian bisa melihat hasil akhirnya pada browser masing - masing.
Baik, selesai sudah tutorial sederhana bootstrap tentang bagaimana Cara Membuat Modal Menu Bootstrap 4, semoga tutorial DUMETSchool bermanfaat. Selamat mencoba dan sampai jumpa ditutorial selanjutnya.

Bootstrap

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More