Cara Membuat Full Screen Overlay Navigation

Hanya orang-orang dengan hati damailah yang boleh menerima kejadian buruk dengan lega. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Full Screen Overlay Navigation.

Yang sering kita temukan adalah menu navigation yang muncul dari samping atau juga disebut sidenav, tapi hanya seperempat dari halaman web browser tersebut. Nah kali ini kita akan mencoba Cara Membuat Full Screen Overlay Navigation.

Seperti biasa, pertama-tama siapkan file index.html nya.

Kemudian, isi di bagian <body> tag-tag HTML seperti berikut.

<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>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>

Setelah itu, isi untuk CSS nya.

body {
    margin: 0;
    font-family: 'Lato', sans-serif;
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: 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 a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

Dan yang terakhir, bagian Javascript nya.

<script>
function openNav() {
    document.getElementById("myNav").style.width = "100%";
}

function closeNav() {
    document.getElementById("myNav").style.width = "0%";
}
</script>

Bagaimana teman-teman? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang bagaimana Cara Membuat Full Screen Overlay Navigation.

Semoga bermanfaat, terima kasih

Cara Membuat Full Screen Overlay Navigation

Kategori