Cara membuat menu navigasi keren

Menu navigasi sangatlah penting dalam sebuah situs web. Apalagi Anda adalah seorang blogger yang mendaftar Google Adsence. Jika tidak ada menu navigasi sudah pasti Anda ditolak dalam pendaftaran Google Adsence dikarenakan sistem navigasi yang kurang jelas.

Membuat menu navigasi tidak serumit yang kita bayangkan. Dengan HTML dan CSS untuk membuat menu navigasi sudah bisa ko. Tapi jika ingin lebih interaktiv lagi Anda harus menggunakan Javascript. Kalo hanya membuat menu navigasi bagus dan responsive dengan HTML (Hyper Text Marcup Language) dan CSS (Cascading Style Sheet) pun sudah bisa kita buat.

Kita akan belajar sedikit demi sedikit, untuk praktek percobaan kita akan menggunakan HTML dan CSS. Oke sobat jangan lupa siapkan text editornya dan sebuah browser yang terupdate.

Langkah Pertama:

Ikuti tutor dibawah ini:

 
<nav>
 <ul>                                                    
   <li><a href='#">Menu 1</a></li>
   <li><a href='#">Menu 2</a></li>
   <li><a href='#">Menu 3</a></li>
   <li><a href='#">Menu 4</a></li>
   <li><a href='#">Menu 5</a></li>
 </ul>
</nav>
 

Contoh diatas kita membuat pembungkungkus navigasi yaitu tag <nav></nav>
Pada dasarnya bar menu navigasi adalah link. Tag <a href='#'></a> ini menjelaskan link agar kita bisa berpindah halaman. Tanda pagar tersebut adalah alamat URL. berhubung hanya uji coba Saya hanya menggunakan pagar saja. Silahkah sobat isi dengna URL yang diinginkan.

Jadi kita menggunakan <ul></ul> dan <li></li> karna pada dasarnya bar navigasi berisi link. Nahh pada dasarnya markupnya sudah beres. Tinggal kita percantik dengan CSS. Kalo sobat lihat hasilnya pasti kurang menarik. Untuk itu kita kasih style dengan CSS.

Langkah Kedua:

 

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #52cc57;
}

li {
    display: inline-block;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #fff7f7;
    color: black;
}

 

Contoh CSS diatas menjelaskan:

---

ul {
list-style-type: none; = untuk menghilangkat peluru hitam
margin: 0; = memberikan jarak antara elemen 0
padding: 0; = memberikan jarak antar koneten 0
background-color: #52cc57; = memberikan warna pada background
} li {
display: inline-block; = agar deretan navigasi jadi horisontal
}

li a {
display: block; = membuat element blok dan untuk menentukan ukuran
color: white; = memberikan warna pada tulisan
text-align: center; = agar posisi tulisan ditengah
padding: 16px 16px; = memberikan jarak pada konten 16px
text-decoration: none; }

li a:hover {
background-color: #fff7f7; = sewaktu mouse diatas warna sedikit keabu2an
color: black; = sewaktu mouse diatas warna tulisan hitam
}

---

Silahkan sobat gabungkan seperti gambar dibawah ini:

Maka hasilnya akan seperti ini:

Silahkan sobat mainkan scriptnya. Jika ada seputar pertanyaan silahkan berkomentar dibawah. Terimakasih sampai jumpa diartikel berikutnya.