Pada kesempatan kali ini, kita akan membuat Navigation Bar menggunakan HTML dan CSS.
Sebelumnya, dalam sebuah halaman website.
Tentunya kita dimudahkan untuk memilih berbagai menu yang tersedia pada website.
Kita akan dipindahkan ke halaman selanjutnya setelah kita pilih menu tersebut.
Nah, itu biasanya disebut dengan nama Navigation Bar atau Menu Navigasi.
Dalam sebuah website, biasanya ada menu navigasi yang letaknya di atas bentuknya yang horizontal, dan ada yang di samping bentuknya vertikal.
Oke, langsung aja ya kita buat.
- Navigasi Horizontal
Ketikkan script kode berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:black;
font-family: Arial, Helvetica, sans-serif;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: white;
color: black;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#berita">Berita</a></li>
<li><a href="#kontak">Kontak Kami</a></li>
<li><a href="#tentang">Tentang Kami</a></li>
</ul>
</body>
</html>
Maka, akan menghasilkan tampilan seperti ini.
2. Navigasi Vertikal
Ketikkan script kode berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: gainsboro;
font-family: Arial, Helvetica, sans-serif;
}
li a {
display: block;
color: black;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: black;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#berita">Berita</a></li>
<li><a href="#kontak">Kontak Kami</a></li>
<li><a href="#tentang">Tentang Kami</a></li>
</ul>
</body>
</html>
Maka, akan menghasilkan tampilan berikut ini.
Nah, demikianlah artikel kali ini. Semoga bermanfaat ya…
