Pelajari cara membuat menu Top Navigation yang responsif dengan CSS dan JavaScript.
Contoh:
Ubah ukuran jendela browser untuk melihat cara kerja menu navigasi responsif.
<!DOCTYPE html> <html> <head> <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 { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a.active { background-color: #4CAF50; color: white; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } </style> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <div style="padding-left:16px"> <h2>Contoh Responsive Topnav</h2> <p>Ubah ukuran jendela browser untuk melihat cara kerjanya.</p> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body> </html>
Section Artikel
Langkah 1) Tambahkan HTML
Contoh:
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>Link dengan class = “icon” digunakan untuk membuka dan menutup topnav pada layar kecil.
Langkah 2) Tambahkan CSS
Contoh:
/* Tambahakan warna background hitam pada top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style link didalam navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Ubah warna link on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/ * Tambahkan kelas active untuk menyorot halaman saat ini * /
.topnav a.active {
background-color: #4CAF50;
color: white;
}
/* Sembunyikan link yang akan membuka dan menutup topnav di layar kecil */
.topnav .icon {
display: none;
}Tambahkan kueri media
Contoh:
/ * Jika layar kurang dari 600 piksel, sembunyikan semua link, kecuali yang pertama ("Home"). Tampilkan link yang isinya harus membuka dan menutup topnav (.icon) * /
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/ * Kelas "responsive" ditambahkan ke topnav dengan JavaScript saat pengguna mengklik ikon. Kelas ini membuat topnav terlihat bagus di layar kecil (tampilkan link secara vertikal, bukan horizontal) * /
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}Langkah 3) Tambahkan JavaScript
Contoh:
/* Peralihan antara menambahkan dan menghapus kelas "responsive" ke topnav saat pengguna mengklik ikon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}