Hi, Sobat Mikir, pada kesempatan kali ini saya ingin membagikan artikel tentang cara membuat tampilan navbar pada website dengan mudah.
Pada tampilan website Navbar dapat memudahkan bagi user untuk melakukan navigasi dari satu halaman ke halaman lainya dengan mudah. umumnya navbar berisi menu seperti "Home", "Aboute", "Product" dan lain lain.
tanpa panjang kalam, kita langsung saja pada langkah-langkah untuk membuat navbar pada halaman websie. pada kesempatan kali ini kita menggunakan kode HTML dan CSS. adapun langkah-langkahnya sebagai berikut
Membuat File HTML
buatlah file html menggunakan kode editor yang sobat gunakan, boleh dengan Dreamweaver, Visual Studio Code, Notepad ++, atau notepad biasa pun bisa. kebetulan di sini saya menggunakan Notepad++
1. Buka Notepad++
2. Buat file html dengan nama "index.html"
3. Jika sudah maka tuliskan kode htlml berikut pada file index.html
<html>
<header>
<title>Halaman Websiteku</title>
</header>
<body>
<div class="navbar" >
<a href="#">Home<a>
<a href="#">About<a>
<a href="#">Product<a>
<a href="#">Contact<a>
</div>
</body>
</html>
4. Kemudian masukan juga kode CSS berikut
<style>
.navbar{
background-color : #0072ff;
padding: 10px 20px 10px 20px;
}
.navbar a{
color: #fff;
}
.navbar a:hover{
color: yellow;
}
</style>
jika berhasil maka tampilannya akan seperti in:
Penjelasan Kode
Struktur HTML: Kode dimulai dengan deklarasi HTML dasar, termasuk elemen <head> yang berisi judul halaman. Kemudian, ada elemen <body> yang berisi div dengan kelas "navbar".
Desain Navbar dengan CSS: Dalam elemen <style> di bagian <head>, kami mendefinisikan gaya untuk elemen dengan kelas "navbar". Ini mencakup warna latar belakang, jarak padding, dan warna teks untuk link.
Link Navigasi: Di dalam div "navbar", terdapat beberapa elemen <a> yang mewakili tautan navigasi seperti "Home", "About", "Product", dan "Contact". Saat mouse mengarah pada link, warna teksnya berubah sesuai dengan aturan :hover dalam CSS.
Kode CSS
.navbar: Ini adalah selektor untuk elemen dengan kelas "navbar". Properti yang didefinisikan di bawah ini akan berlaku untuk elemen-elemen yang memiliki kelas tersebut.
background-color: #0072ff;: Ini mengatur warna latar belakang elemen dengan kelas "navbar" menjadi biru (#0072ff).
padding: 10px 20px 10px 20px;: Ini mengatur jarak antara batas elemen dan kontennya, dengan urutan atas, kanan, bawah, dan kiri. Jadi, dalam hal ini, 10px di atas, 20px di kanan, 10px di bawah, dan 20px di kiri.
.
navbar a: Ini adalah selektor untuk elemen hyperlink (<a>) yang berada di dalam elemen dengan kelas "navbar".
color: #fff;: Ini mengatur warna teks dari hyperlink di dalam elemen dengan kelas "navbar" menjadi putih (#fff).
.navbar a:hover: Ini adalah selektor untuk hyperlink di dalam elemen dengan kelas "navbar" saat mouse mengarah padanya (hover).
color: yellow;: Ini mengatur warna teks hyperlink di dalam elemen dengan kelas "navbar" menjadi kuning saat mouse mengarah padanya.
Dengan menggunakan kombinasi HTML dan CSS, Anda dapat dengan mudah membuat navigasi yang responsif dan menarik bagi pengguna. Anda dapat menyesuaikan kode ini sesuai dengan kebutuhan desain dan struktur halaman web Anda.
