Cara Membuat Menu dan Submenu dengan Mudah (Pure CSS)


Codepelajar.com - Selamat datang kembali di blog code pelajar sobat. Akhir-akhir ini admin tidak sempat update sama sekali karena kesibukan mengurus konten yang lain. Namun tidak lupa untuk menyempatkan membalas semua komentar para pengunjung setia juga disini. Di sebelumnya juga saya sudah membuat artikel tentang cara membuat material design form whatsapp.

Nah pada kesempatan kali ini saya akan menjelaskan bagaimana sih cara membuat menu di blog atau website? tutorial kali ini adalah membuat simpel menu navigasi di website / blog dengan hanya menggunakan CSS saja tanpa javascript. Tutorial ini akan saya bahas step by step agar paham proses ngodingnya. Oke tanpa berlama-lama ini dia tutorialnya.



Cara Membuat Menu di Blog/Website dengan Mudah


Pertama-tama siapkan tempat untuk memulai kodingnya, bisa itu sebuah blog dummy, lokal server, Codepen.io, atau dengan file html biasa. Nah untuk membuat menu navigasinya kita siapkan dulu nih kerangka HTML menu dan submenunya seperti dibawah ini


<!-- HTML | CODEPELAJAR.COM -->
<nav id="purecssmenu">
    <!-- tombol menu saat nanti responsive -->
    <i class="fa fa-bars menu-icon"></i>
    <input type="checkbox" class="menu-button" />
    
    <!-- daftar menunya -->
    <ul>
        <li><a href="#!">Menu</a></li>
        <li><a href="#!">Menu</a></li>
        <li><a href="#!">Menu dengan Submenu</a> <!-- disini buat juga submenu -->
            <ul>
                <li><a href="#!">Submenu 1</a></li>
                <li><a href="#!">Submenu 2</a></li>
                <li><a href="#!">Submenu 3</a>  <!-- disini juga membuat submenu dari submenu -->
                    <ul>
                        <li><a href="#!">Submenu 3.1</a></li>
                        <li><a href="#!">Submenu 3.2</a></li>
                        <li><a href="#!">Submenu 3.3</a>
                            <ul>
                                <li><a href="#!">Submenu 3.3.1</a></li>
                                <li><a href="#!">Submenu 3.3.2</a></li>
                                <li><a href="#!">Submenu 3.3.3</a> <!-- disini saya membuat submenu takterbatas hanya dengan CSS -->
                                    <ul>
                                        <li><a href="#!">Submenu 3.3.3.1</a></li>
                                        <li><a href="#!">Submenu 3.3.3.2</a></li>
                                        <li><a href="#!">Submenu 3.3.3.3</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>


Saya membuat banyak submenu karena disini kita akan menerapkan cara membuat infinite submenu tanpa menggunakan javascript alias hanya dengan CSS. Tentu saja yang saya buat ini akan responsive

Nah kira-kira seperti itulah struktur HTML dari menunya. Jangan lupa untuk membuat submenunya seperti di atas, ini memudahkan kamu untuk menerapkan styling pada sub menu sesudah kamu membuat navigasi utamanya.


Membuat CSS untuk Menu Navigasi

Oke selanjutnya kita langsung saja membuat kode CSS untuk menunya. Oh ya menu ini menggunakan icon font awesome jadi kalau kamu belum menambahkan iconnya kamu tambahkan dahulu ya. jangan lupa juga untuk menerapkan CSS Resetnya, kalau sudah ada css reset di blog kamu berarti tidak perlu menambahkan ulang.


Berikut ini CSS untuk Global Menunya.


<style>
/** GLOBAR CSS NAV 
========================**/
#purecssnav {
 position: relative;
 background: #444;
 /** atur sendiri untuk huruf bebas **/
 font-family: 'Roboto', sans-serif, Arial, monospace;
}
#purecssnav ul {
 list-style: none;
 line-height: 2;
}
#purecssnav ul li {
 display: inline-block;
}
#purecssnav a {
    display: inline-block;
    padding: 10px;
 color: #fff;
 text-decoration: none;
 transition: .5s;
}
/** tulisan link saat di hover **/
#purecssnav a:hover {
    background-color: rgba(0,0,0,0.5);
}
/** Icon untuk menu responsivenya **/
.menu-icon {
    display: none; /** sembunyikan icon **/
 font-size: 40px;
 color: #fff;
 padding: 5px 10px;
}
.menu-button {
    position: absolute;
    top: 0;
 display: block;
 opacity: 0; /** dibuat tak terlihat **/
 height: 50px;
 width: 50px;
}
</style>


Kita sudah menerapkan css globalnya untuk navigasi karena kita belum menyiapkan untuk css submenunya/ anak-anak dari menunya maka tampilannya akan berantakan seperti pada gambar dibawah ini.


cara membuat menu dan submenu dengan mudah dan simple

Membuat CSS Submenu

Sekarang kita buat juga untuk mengatur submenunya agar terlihat rapih dan enak dilihat. Gunakan yang dibawah ini dan tempel setelah css yang diatas tadi.


/** SUBMENU CSS NAV **/
#purecssnav ul li ul {
 position: absolute;
 background: #444;
}
#purecssnav ul li ul li {
 display: block;
 min-width: 200px;
}

#purecssnav ul li ul li a{
    width: 100%;
}
#purecssnav ul li ul li ul {
 left: 100%;
 transform: translateY(-48px);
}


Nah kita coba lihat bagaimana hasilnya kali ini. bisa dilihat seperti contoh dibawah ini.


cara membuat menu dan submenu dengan mudah dan simple

Seperti pada gambar, kita bisa lihat navigasi untuk submenu sudah mulai tertata rapi. Langkah selanjutnya kita harus menyembunyikan submenunya dan harus terlihat melakukan hovering. Caranya mudah sekali, cukup menambhakan CSS dibawah ini saja maka menu dengan infinite submenu sudah berhasil dibuat.


#purecssnav ul li ul {
    display: none;
}
#purecssnav ul li:hover > ul {
  display: block;
}


Hasilnya akan terlihat seperti dibawah ini.


cara membuat menu dan submenu dengan mudah dan simple

Membuat Menu Navigasi Responsif

Nah kali ini kita sudah berhasil membuat menu navigasinya untuk tampilan pc, lalu bagaimana dengan tampilan mobile? menu yang kita buat barusan jika kita kecilkan layar akan terlihat seperti dibawah ini.


cara membuat menu dan submenu dengan mudah dan simple

Yah.. masih berantakan, juga tidak terlihat tombol menunya. Nah cara memperbaiki masalah ini buatlah CSS responsive seperti dibawah ini.


/** breakpoint dimulai saat ukuran tablet **/
@media (max-width: 767px ){
        /** menampilkan icon menu **/
    .menu-icon, .menu-button {
        display: block;
    }
    #purecssnav > ul {
        display: none;
    }
    /** saat checkbox di ceklis maka menu akan tampil **/
    .menu-button:checked ~ ul {
        display: block !important;
    }
    #purecssnav ul li {
    width: 100%;
    }
    #purecssnav ul li a {
        width: 100%;
    }
    #purecssnav ul li ul {
        position: relative;
    }
    #purecssnav ul li ul li ul {
       left: 0;
       transform: translateY(0);
    }
}


Mari kita simpan lalu buktikan kalau ini akan responsif. Hasil dari cssnya akan terlihat seperti dibawah ini.


cara membuat menu dan submenu dengan mudah dan simple

Sangat mudah sekali bukan? jika kamu belum paham juga mungkin kamu harus perdalam lagi pengetahuan CSS dan HTML yang sekarang. Karena percuma saja menerapkan tutorial ini kalau kamu tidak paham di kodingnya. untuk demonstrasi penerapan menu css ini bisa kamu klik disini.


Itulah tutorial yang bisa saya berikan disini tentang bagaimana kita membuat menu navigasi dengan mudah, simpel juga responsive, hanya dengan CSS tanpa perlu menambahkan Javascript. Sobat bisa berkreasi dengan mengganti warna, gaya tulisan, dan ukuran tulisanya. Selain itu sobat bebas untuk menambahkan icon untuk setiap navigasinya itu terserah.


Seperti biasa, jika ada pertanyaan atau masalah bisa dengan berkomentar di bawah setelah artikel ini, jangan lewatkan tutorial menarik yang bisa kamu dapatkan di Code Pelajar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel