Cara Membuat Menu Navigas di HTML dan CSS

Kali ini saya akan coba sedikit sharing tutorial tentang bagaimana sih cara membuat menu navigasi horizontal dengan menggunakan CSS. Kenapa memakai CSS bukan Javascript, VBscript, atau script yang lain yang lebih dinamis? Jawabannya cukup singkat, yaitu CSS lebih 'entheng' dibanding script-script yang lain. Intinya, CSS tidak akan membuat blog anda menjadi lola, alias lama loading. Sedikit informasi saja, Para pengungjung tidak suka pada blog yang loadingnya luamaaaa... Maka untuk mengantisipasinya, kita bisa menggunakan CSS sebagai alternatif pengganti Javascript.

Kali ini, saya tidak hanya langsung memberikan source kode HTML dan CSS Menu Navigasinya. Tapi, kita akan membahas tentang bagaimana cara pembuatannya step by step. Sebelumnya, saya beritahu dulu, untuk pembuatan menu navigasi ini, kita akan membagi langkah-langkahnya menjadi dua tahap. Tahap pertama, kita buat dulu CSS menu navigasi itu sendiri. Lalu, pada tahap kedua, kita buat HTML pemanggil kode CSS yang telah kita buat tadi.

Tidak berlama-lama, ayo segera kita mulai pembuatan menu navigasinya.
Tahap 1: Pembuatan CSS Menu Navigasi

Langkah pertama dari tahap 1 ini, coba tulis kode seperti dibawah ini:

#nav {
height:auto;
width: 980px; /* lebar menu navigasi*/
margin:0px 1px 1px 1px;
background:#000000; /* Warna latar belakang menu navigasi */
font: 14px arial;
float:left;
}

Nah, pada source diatas, ada pemformatan untuk tinggi menu, lebar menu, baris tepi menu, warna latar menu, dll. Anda pastinya bisa mengedit sendiri format menu navigasi anda. Sebagai contoh, bila kita ingin merubah lebar menu kita, coba amati kode width: 980px; /* lebar menu navigasi*/ . Sudah? untuk merubah lebarnya, anda tinggal merubah angka 980, semakin besar angkanya, semakin lebar pula menu anda.

Lalu, jika ingin merubah warna background/warna latar belakang menu, coba perhatikan kode background:#000000; /* Warna latar belakang menu navigasi */ . Nah, untuk menggantinya, anda tinggal ganti kode #000000 dengan kode warna lainnya.

Langkah berikutnya, kita harus membuat agar link-link yang kita taruh di menu navigasi kita, sejajar dan beraturan. Caranya, coba tulis atau copas kode dibawah ini:

#nav ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#nav li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#nav ul li {
float: left;
display:inline;
}

Tidak ada penjelasan khusus untuk script diatas, lebih baik jangan diganti-ganti, karena malah akan menyebabkan link-link anda tidak beratur atau rusak. Sekedar saran, lebih baik anda copas saja script diatas, karena terkadang menulis itu banyak kesalahan dan kurang teliti.

Menu navigasi sudah jadi. Lalu, apa yang harus kita coba buat lagi? Nah, inilah elemen paling penting yang harus ada pada menu navigasi, yaitu Link itu . Coba bayangkan sebuah menu navigasi tanpa link, aneh kan? CSS nya kurang lebih seperti dibawah ini.

#nav li a, #nav li a:link, #nav li a:visited {
color:#ffffff; /* Warna teks */
padding:9px 10px 9px 10px;
text-decoration:none;
display:block;
}
#nav li a:hover {
background:#088A08; /* Warna latar saat kursor mouse berada di atas menu navigasi */
color: blue; /* Warna teks saat kursor mouse berada di atas menu */
}

Cara mengeditnya gampang, hampir sama dengan mengedit kode diatas tadi. Anda tinggal mengganti link dengan warna kesukaan anda, atau yang paling cocok dengan web/blog anda. Script diatas, sudah saya kasih keterangan, anda tinggal mengganti kode warnanya.

Akhirnya, CSS Menu Navigasinya selesai. Berarti dengan ini, kita telah menyelesaikan tahap 1, tentang pembuatan CSS-nya. CSS diatas, jika dijadikan satu, hasilnya kurang lebih seperti dibawah ini:

/* Menu navigasi */
#nav {
height:auto;
width: 980px; /* lebar menu navigasi*/
margin:0px 1px 1px 1px;
background:#000000; /* Warna latar belakang menu navigasi */
font: 14px arial;
float:left;
}
#nav ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#nav li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#nav ul li {
float: left;
display:inline;
}
#nav li a, #nav li a:link, #nav li a:visited {
color:#ffffff; /* Warna teks */
padding:9px 10px 9px 10px;
text-decoration:none;
display:block;
}
#nav li a:hover {
background:#088A08; /* Warna latar saat kursor mouse berada di atas menu navigasi */
color: blue; /* Warna teks saat kursor mouse berada di atas menu */
}

Tahap 2: Pembuatan Script Pemanggil CSS

Untuk memanggil CSS yang telah kita buat tadi, gampang saja, coba anda tuliskan script dibawah ini kedalam Web Editor anda.

<div id='nav'>
<ul id='nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Produk</a></li>
<li><a href='#'>Iklan</a></li>
<li><a href='#'>Daftar isi</a></li>
</ul>
</div>

Lalu, bagaimana cara mengeditnya?
Caranya mudah saja,

1. Perhatikan kata yang bercetak biru diatas, itu adalah kata/kalimat yang akan munccul di halaman web/blog anda. Anda bisa menggantinya sesuka hati dengan kata-kata lain yang berhubungan dengan web/blog anda.

2. Link bukan link namanya kalo nggak ada alamat tujuannya. Lalu, dimana kita memasang alamat tujuannya? Caranya mudah saja, anda tinggal mengganti (#) dengan alamat tujuan yang anda inginkan. Misalkan ganti <li><a href='#'>Home</a></li> dengan <li><a href='http://lintangbg.blogspot.com/'>Home</a></li>

Dan selesai..!
Mungkin, postingan diatas tadi malah membuat bingung para pembaca. Jadi, jika anda masih bingung, bisa tanya saya via kotak komentar yang ada dihalaman bawah Blog ini..

Happy Blogging, dan salam Blogger semua.

Tweet

Artikel keren lainnya:

Ditulis oleh famadaya pada hari Thursday, January 22, 2015