Cara Membuat Navbar di HTML dengan CSS
Cara Membuat Navbar di HTML dengan CSS
Hello Guys, Kembali lagi bersama Ahann kali ini saya akan membagikan Tutorial Cara Membuat Navbar di HTML dengan CSS. Namun kali ini saya akan membuat Navbar secara manual dengan kombinasi HTML dan CSS.
Kita masih tetap menggunakan komponen list dengan jenis unordered list (UL) untuk membuat struktur navbar-nya. Selain itu akan kita tambahkan style CSS pada navbar htmlnya. CSS akan kita buat dengan teknik eksternal CSS, yang mana kita akan meload data/file css nya diluar dokumen html itu sendiri atau bahasa sederhananya membuat file terpisah antara file html dan css-nya.
Coba perhatikan pada syntax html berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Navbar di HTML dengan CSS</title>
</head>
<body>
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Article">Article</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#About Me">About Me</a></li>
</ul>
</body>
</html>
Disini kita membuat list dengan jumlah 4 item. Yang didalamnya terdapat link dengan menggunakan tag <a>. Apabila sintax ini dijalankan maka hasil outputnya sebagai berikut:
Jika dilihat strukturnya masih sangat sederhana tanpa style didalamnya. Dari segi tampilan sangat tidak menarik ya kan, Sekarang kita akan coba membuat navbar agar tampilannya menjadi lebih bagus.
Menambahkan Style CSS
Buatlah sebuah file di text editor seperti visual studio code atau yang lainnya dengan css.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #98BAE7;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}
li a:hover {
background-color: #B8E4F0;
}
Simpan file-nya dengan style.css.
Selanjutnya tambahkan sintax berikut didalam tag <head>.
<link rel="stylesheet" href="style.css">
Jika dilihat secara keseluruhan isi dari dokumen html-nya sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Navbar di HTML dengan CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Article">Article</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#About Me">About Me</a></li>
</ul>
</body>
</html>
Disini kita akan mencoba menambahkan efek hover pada setiap item list-nya. Jadi ketika cursor menyentuh item tertentu maka pada item tersebut akan dijalankan efek hovernya. Efek hover yang dibuat hanyalah efek atau perubahan warna background pada item navbarnya.
Segitu aja ges tutor biasa aja Cara membuat navbar di html dengan css. Tetap semangat untuk para pemula dan semoga bermanfaat.
Komentar
Posting Komentar