Computer, Linux, Program, Source Code, Tutorial, Website
Toggle navigation
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 :
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.
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.
Berikut ini bebrapa contoh source code serderhan untuk membuat navigasibar :
Contoh source code HTMLdan CSS navigsibar :
Gambar hasil interpretasi source code navigsibar sederhana diatas.
Contoh source code HTMLdan CSS navigasibar dengan dropdown menu
Gambar navigsibar dengan dropdown.
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~
di 12/23/2018
2 komentar:
Terimakasih kasih kak atas artikelnya ini sangat lengkap sekali mulai dari langkah-langkah sampai dengan pengkodingannya ini sangat membantu sekali kak artikelnya singkat dan mudah dipahami.untuk kedepannya ditunggu lagi ya kak artikelnya selanjutnya dan semoga ilmunya berkah kak Perkenalkan nama Roki Abdul Jalil
Nim 1922500192
Kelas SI2K
Link kampus https://www.atmaluhur.ac.id/
Komentar ini telah dihapus oleh pengarang.
Copyright © 2017 - 2020 | LangIT Tutorial. All rights reserved.
Tidak ada komentar:
Posting Komentar