Belajar cara membuat menu navigasi atas untuk smartphone / tablet dengan CSS dan JavaScript.
Section Artikel
Contoh:
Menu Vertikal (disarankan)
<!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 { font-family: Arial, Helvetica, sans-serif; } .mobile-container { max-width: 480px; margin: auto; background-color: #555; height: 500px; color: white; border-radius: 10px; } .topnav { overflow: hidden; background-color: #333; position: relative; } .topnav #myLinks { display: none; } .topnav a { color: white; padding: 14px 16px; text-decoration: none; font-size: 17px; display: block; } .topnav a.icon { background: black; display: block; position: absolute; right: 0; top: 0; } .topnav a:hover { background-color: #ddd; color: black; } .active { background-color: #4CAF50; color: white; } </style> </head> <body> <!-- Mensimulasikan smartphone / tablet --> <div class="mobile-container"> <!-- Menu Navigasi Atas--> <div class="topnav"> <a href="#home" class="active">Logo</a> <div id="myLinks"> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <div style="padding-left:16px"> <h3>Vertical Mobile Navbar</h3> <p>Contoh ini mendemonstrasikan bagaimana tampilan menu navigasi di ponsel/smartphone.</p> <p>Klik pada menu hamburger (tiga bar) di pojok kanan atas, untuk beralih menu.</p> </div> <!-- Akhiri tampilan smartphone / tablet--> </div> <script> function myFunction() { var x = document.getElementById("myLinks"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } </script> </body> </html>
Contoh:
Menu Horizontal
<!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 {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
float: left;
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a.icon {
float: right;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<!-- Mensimulasikan tampilan smartphome / tablet -->
<div class="mobile-container">
<!-- Menu Navigasi Atas-->
<div class="topnav">
<a href="#home" class="active">Logo</a>
<div id="myLinks">
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h3>Horizontal Mobile Navbar</h3>
<p>Contoh ini mendemonstrasikan bagaimana tampilan menu navigasi di ponsel/smartphone.</p>
<p>Klik pada menu hamburger (tiga bar) di pojok kanan atas, untuk beralih menu.</p>
<p><strong>Perhatikan bahwa contoh ini tidak boleh digunakan jika Anda memiliki banyak link, karena link tersebut akan "merusak" bar navigasi bila terlalu banyak (terutama pada layar yang sangat kecil).</strong></p>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
Langkah 1) Tambahkan HTML
Contoh:
<!-- Muat perpustakaan ikon untuk menampilkan menu hamburger (bar) di layar kecil --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Menu Navigasi Atas --> <div class="topnav"> <a href="#home" class="active">Logo</a> <!-- Navigation links (hidden by default) --> <div id="myLinks"> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> <!-- "Menu hamburger" / "Ikon bar" untuk mengganti tautan navigasi --> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div>
Langkah 2) Tambahkan CSS
Contoh:
/* Style Menu Navigasi */
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
/* Sembunyikan link di dalam menu navigasi (kecuali untuk logo / beranda) */
.topnav #myLinks {
display: none;
}
/* Style link menu navigasi */
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
/* Style menu hamburger */
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
/* Tambahkan warna background abu-abu saat mengarahkan mouse*/
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Style pada link active (atau home / logo) */
.active {
background-color: #4CAF50;
color: white;
}Langkah 3) Tambahkan JavaScript
Contoh:
/* Toggle antara menampilkan dan menyembunyikan link menu navigasi saat pengguna mengklik ikon menu / bar hamburger */
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}