Sebenarnya Menu ini ini bisa kita robah sesuka hati,misalnya untuk menu yang sekarang sedang saya presentasikan adalah dari atas ke bawah dengan bentuk tombol Hamburger:
/* Buka */
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
/* Tutup */
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
Jika kita menginginkan tombol hamburger membuka menu dari samping kiri kekanan maka kita akan menggunakan:
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
/* menutup ketika orang klik "x" ikonnya berada didalam menu yang sedang terbuka */
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
Lihat contoh:
CONTOH MENU NAVIGASI LAYAR PENUH TURUN DARI ATAS
KLIK IKON HAMBURGER (GARIS SUSUN TIGA) UNTUK MEMBUKA MENU LAYAR PENUHNYA. CONTOH INI MENUNJUKAN BAGAIMANA MENU TURUN DARI ATAS KEBAWAH DALAM OPSI LAYAR PENUH DAN UNTUK MENUTUPNYA CUKUP KLIK TANDA 'X' YANG BERADA DALAM MENU DIPOJOK KANAN ATAS☰ open
Dan kodenya adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#"></a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>Pada contoh ini menu navigasi turun dari atas:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>
Menurut hemat saya menu ini mudah dibuat, caranya meletakan kode yang saya sorot warna biru diatas kode </header> didalam html dan meletakan kode CSS diatas ]]></b:skin> Atau silahkan menanyakannya langsung kepada kami
Saya membuat menu ini khusus untuk responsive saja. Habis menu kepunyaan saya masih sedikt.
BalasHapusYang harus responsive duluan pasti temanya kalau gak ya berantem perintah kodenya he he he
Hapus*Catet*
BalasHapus@Tuteh dicatat :))
Hapus