Cara Membuat Navigasi bar pada Website dengan HTML CSS

Pada kesempatan kali ini saya akan berbagi tutorial membuat navigasi bar pada website menggunakan HTML dan CSS secara manual.

Navigasi bar (navigation bar) atau biasanya disebut dengan navbar merupakan komponen penting pada suatu website yaitu digunakan sebagai menu yang berisi link-link yang bersifat umum pada suatu website, misalkan home, about, contant us, dan lain sebagainya.

HTML 5 telah terdapat tag yang dapat digunakan sebagai navigasi bar yaitu <nav></nav> namun terkadang banyak yang menggunakna tag selain tag nav, misal div division.

tag nav seperti pada contoh di atas dapat digunakan sebagai wadah dari tag ul unordered list, li list, a hyperlink, sebagai komponen yang digunakan untuk menyusun oleh navigasi bar.

Untuk membuat navbar / dalam melakukan coding anda dapat menggunakan aplikasi berupa text editor misal notepad, notepad ++, sublime text, dan lain sebagainya. melakukan coding secara manual adalah salah satu cara membuat website yang mudah, namun website yang hasilkan akan memiliki beberapa kekurangan salah satunya website yang anda buat tidak lah responsive.

Berikut adalah langkah-langkah penerapan pembuatan navigation bar pada website :

1. Pertama persiapkan terlebih dahulu design yang akan anda tampilkan navigasi bar, atau minimal anda hanya perlu merencanakan kira-kira berapa banyak link yang yang akan anda tampilkan dalam navigasibar anda.
   

   

   
2. Setelah design tampilan siap selanjutnya tahapan coding, menulis source code dari navigasibar. untuk kerangka navigasi bar HTML cukup  sederhana. Untuk memaksimalkan hasil tampilan maka anda harus meng-costume pada bagian CSS.
3. Berikut ini bebrapa contoh source code serderhan untuk membuat navigasibar :
   
   

   Contoh source code HTML dan CSS navigsibar :

   
   
   
   
   
   Gambar hasil interpretasi source code navigsibar sederhana diatas.
   
   
   

   Contoh source code HTML dan CSS navigasibar dengan dropdown menu

   
   
   
   Gambar navigsibar dengan dropdown.
   
   
4. Silahkan ganti tanda # pada href="", untuk mendekarasikan url tujuan, ketika menu diklik.

Peletakan atau layouting navbar pada website :

• Navbar pada umumnya diletakkan di atas header atau di bawah header sebelum content.
• Untuk tampilan website landing page biasanya di atur
  
  nav{positon : fixed; top : 0px;}
  efeknya adalah ketika halaman web discroll maka navbar akan tetap tampil mengapung di bagian atas.

Source Code : Download 

Berikut ini Video tutorial, untuk membuat navigasi bar menggunakan tampilan HTML dan CSS.

~Semoga Bermanfaat~

Share this post