Off Canvas

Off canvas adalah strategi menyembunyikan less important element pada viewport kecil. Contoh menyembunyikan navigasi/menu dalam hamburger icon. Jika viewport cukup besar, baru menu ditampilkan.

Pada viewport kecil, gambar sebelah kiri, menu disembunyikan. Pada gambar sebelah kanan, menu ditampilkan setelah OPEN MENU diclick.

Pada viewport besar, menu ditampilkan, dan element OPEN MENU disembunyikan.

<style type="text/css">
    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0;
        left: 0;
        background-color: #111; /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }

    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

    .sidenav a:hover {
        color: #f1f1f1;
    }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

    #main {
        transition: margin-left .5s;
        padding: 20px;
    }

    /* small screen tampilan navigasi diperkecil */
    @media screen and (max-height: 450px) {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
    }

    /* large screen menu ditampilkan */
    @media screen and (min-width:600px){
        .sidenav{
            width: 250px;
        }
        #main{
            margin-left: 250px;
        }
    }
</style>

<script type="text/javascript">
    function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    }

    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
    }
</script>