Cara Membuat Modal Menu Bootstrap 4

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.

7 Januari 2020

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