Navbar adalah bagian terpenting dari sebuah website. Navbar merupakan singkatan dari Navigation Bar, yaitu salah satu bagian terpenting pada website yang digunakan pengunjung untuk berpindah-pindah halaman di dalam sebuah website.
Di dalam Navbar terdapat nama-nama halaman yang ada di sebuah website. Navbar ini pada umumnya menggunakan text (tulisan) untuk membedakan antara halaman satu dengan halaman lainnya.
Agar tampilan dari Navbar ini lebih menarik, mari kita tambahkan dengan icon agar memperjelas pengguna untuk membedakan tiap-tiap halaman pada suatu website.
Membuat Navbar responsive dengan icon
Langkah 1 – Tambahkan HTML:
<!-- Tambahkan icon fontawesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="navbar"> <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a> <a href="#"><i class="fa fa-fw fa-search"></i> Search</a> <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a> <a href="#"><i class="fa fa-fw fa-user"></i> Login</a> </div>
Langkah 2 – Tambahkan CSS:
/* Style the navigation bar */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* Navbar links */
.navbar a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
/* Navbar links on mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Current/active navbar link */
.active {
background-color: #4CAF50;
}
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}Berikut adalah hasilnya
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body {font-family: Arial, Helvetica, sans-serif;} .navbar { width: 100%; background-color: #555; overflow: auto; } .navbar a { float: left; padding: 12px; color: white; text-decoration: none; font-size: 17px; } .navbar a:hover { background-color: #000; } .active { background-color: #4CAF50; } @media screen and (max-width: 500px) { .navbar a { float: none; display: block; } } </style> <body> <h2>Responsive Navigation Bar dengan Icon</h2> <p>Coba kecilkan browser anda untuk melihat efek responsive.</p> <div class="navbar"> <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Beranda</a> <a href="#"><i class="fa fa-fw fa-search"></i> Cari</a> <a href="#"><i class="fa fa-fw fa-envelope"></i> Kontak</a> <a href="#"><i class="fa fa-fw fa-user"></i> Masuk</a> </div> </body> </html>
Sekian materi kita untuk kali ini. Sampai ketemu di materi berikutnya.
