CARA MEMBUAT MENU NAVIGASI FULL SCREEN DROPDOWN

Membuat Navigasi menu tidak ada habis habisnya tergantung selera masing masing kali ini saya ingin memberikan contoh sebuah menu navigasi yang cukup diminati oleh pemilik beberapa jenis web, yakni menu navigasi "full screen dropdown:

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:

/* terbuka pada saat orang klik menu */
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()">&times;</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()">&#9776; 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 


Comments

  1. Saya membuat menu ini khusus untuk responsive saja. Habis menu kepunyaan saya masih sedikt.

    ReplyDelete
    Replies
    1. Yang harus responsive duluan pasti temanya kalau gak ya berantem perintah kodenya he he he

      Delete

Post a Comment