Membuat Full Screen Navigation dengan CSS dan Javascript

Kadang kita pernah meliahat website yang mempunyai tombol menu pas kita tekan tombol tersebut maka ada submenu yang menutupi semua layar dalam arti full screen, nah bagaimana cara membuatnya??.. Kali ini saya akan menshare bagaiman Cara Membuat Full Screen Navigation dengan CSS dan Javascript, Â langsung saja kita praktekan teman teman.

Pertama tama kalian buka text editor kalian dan ketikan kode HTML dibawah ini dan beri nama dengan nama index.html dan simpan kode tersebut.

Index.html

<!DOCTYPE html>

<html>

<head>

    <title>Membuat Full Screen Navigation dengan CSS dan Javascript </title>

    <link rel="stylesheet" href="style.css" type="text/css">

</head>

<body>


<div id="myNav" class="overlay">

  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

  <div class="overlay-content">

    <a href="#">About</a>

    <a href="#">Services</a>

    <a href="#">Clients</a>

    <a href="#">Contact</a>

  </div>

</div>


<h2 style="background: #e67e22;padding: 20px; color: #fff;font-family: arial;">Fullscreen Overlay Nav Example</h2>

<p>klik tombol menu di bawah maka akan muncul sub menu </p>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; menu</span>

    

</body>

</html>

Setelah tag penutup </span> ketikan kode javascript berikut dan simpan.

<script>

function openNav() {

    document.getElementById("myNav").style.display = "block";

}


function closeNav() {

    document.getElementById("myNav").style.display = "none";

}

</script>

Lalu setelah itu kalian ketika kode CSS berikut dan simpan dengan nama style.css sejajar dengan file HTML yang di buat di atas.

style.css

body {

    font-family: 'Lato', sans-serif;

}


.overlay {

    height: 100%;

    width: 100%;

    display: none;

    position: fixed;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0, 0.9);

}


.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 a {font-size: 20px}

  .overlay .closebtn {

    font-size: 40px;

    top: 15px;

    right: 35px;

  }

}

Kalo sudah jadi klik tombol menu maka akan muncul Full Screen navigationnya.

Sekian tutorial Membuat Full Screen Navigation dengan CSS dan Javascript, semoga bermanfaa.. keep coding :D.

Membuat Full Screen Navigation dengan CSS dan Javascript

Kategori