Toggle Side Navigation

Tabel Konten
  1. HTML 
  2. CSS 
  3. JavaScript 
  • Alternatif Lain 
  • Image of toggle side navigation example. See the navicon symbol!

    HTML 

    <div id="outer-wrapper">
    
        <section id="nav">
            <a href="#nav" id="toggle-nav-btn" title="Show Navigation">&equiv;</a>
            <div class="inner">
                <ul class="menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Archive</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                ...
                ...
            </div>
        </section>
    
        <section id="main">
            Artikel di sini...
        </section>
    
    </div>

    CSS 

    /* Outer wrapper */
    #outer-wrapper {
      background-color:black;
      overflow:hidden;
    }
    
    /* Left sidebar */
    #nav {
      float:left;
      width:2.8em;
      color:#999;
      position:relative;
    }
    
    #nav .inner {
      padding:1em;
      display:none;
    }
    
    .menu,
    .menu li {
      margin:0 0;
      padding:0 0;
      list-style:none;
    }
    
    .menu {margin:2em -1em 1em}
    
    .menu a {
      display:block;
      font-weight:bold;
      color:white;
      text-decoration:none;
      height:2.4em;
      line-height:2.4em;
      padding:0 1em;
    }
    
    .menu a:hover {background-color:#222}
    
    /* Right sidebar */
    #main {
      background-color:white;
      margin-left:2.8em; /* Same with the `#nav` width */
      padding:1em 2em;
    }
    
    /* Toggle navigation button */
    #toggle-nav-btn {
      text-decoration:none;
      font-size:200%;
      line-height:100%;
      color:#666;
      display:block;
      position:absolute;
      top:.2em;
      right:.4em;
    }
    
    #toggle-nav-btn:hover {color:#888}
    
    /* When the `.menu-is-visible` class applied */
    .menu-is-visible #nav {width:200px}
    .menu-is-visible #nav .inner {display:block}
    .menu-is-visible #main {margin-left:200px} /* Same with the `.menu-is-visible #nav` width */
    .menu-is-visible #toggle-nav-btn {color:#aaa}

    JavaScript 

    JavaScript ini digunakan untuk menambahkan dan melepaskan kelas .menu-is-visible pada elemen <body> secara bergantian:

    (function() {
    
        var page = document.body,
            btn = document.getElementById('toggle-nav-btn');
    
        btn.onclick = function() {
    
            // Toggle the `.menu-is-visible` class to the <body> tag based on `#toggle-btn-nav` click event
            page.className = (/(^| )menu-is-visible( |$)/.test(page.className)) ?
                page.className.replace(/menu-is-visible/,"") :
                    page.className + " menu-is-visible";
    
            // Toggle the toggle navigation title too...
            this.title = (this.title == "Show Navigation") ?
                "Hide Navigation" :
                    "Show Navigation";
    
            return false;
    
        };
    
    })();

    Lihat Demo

    Alternatif Lain 

    Kita juga bisa menggunakan plugin jQuery Toggle Sidebar untuk menampilkan dan menyembunyikan sidebar, dimana menu navigasi berada di dalam sidebar tersebut. Tapi dalam kasus ini Saya tidak menyarankannya, mengingat menggunakan JavaScript mentah saja masih bisa:

    $('#nav').toggleSidebar({
        expand: "#main",
        defaultHidden: true
    });

    27 Komentar

    • IRIL SAGITA

      wah... yang ini aku tertarik menerapkan di blog sku ksk, tak coba dulu, ntar kalau kesulitan mohon bimbingannya ya ?

      • Unknown

        ini sih keerennnnnn....

        [ Gabung yuk ke Direktori Backlink Gratis Berkualitas No.1 Indonesia ]

    • Anonim

      Mantab Tutorialnya Mas Taufik :-bd

      Kira Kira Bisa Gak Tampilan Menunya Diset Seperti Url Dibawah ini :

      http://m.facebook.com/

      Note:
      Untuk Melihat Tampilannya Disarankan Dengan Menggunakan Browser Google Chrome

      • Anonim

        Dan Ini Juga Salah SAtu Model Tampilan FAcebook Terbaru Di 2013 ,
        hehehe ,

        [source] : http://www.facebook.com/about/newsfeed
        Masuk Daftar Tunggu Saya :'(

      • Taufik Nurrohman

        Tombol toggle navigasi bisa diletakkan dimana saja, yang penting ID elemen jangan diganti. Untuk kasusmu, tombol toggle navigasi diletakkan di dalam elemen baru yang diletakkan di sebelah atas pada kolom sebelah kanan sebagai navbar seperti di Facebook:

        <div id="outer-wrapper">
        <section id="nav"> ... </section>
        <section id="main">
        <div class="bar">
        <a href="#nav" id="toggle-nav-btn" title="Show Navigation">&equiv;</a>
        </div>
        Artikel di sini...
        </section>
        </div>
        /* Outer wrapper */
        #outer-wrapper {
        background-color:black;
        overflow:hidden;
        }
        /* Left sidebar */
        #nav {
        float:left;
        width:200px;
        color:#999;
        display:none;
        }
        #nav .inner {padding:1em}
        .menu,
        .menu li {
        margin:0 0;
        padding:0 0;
        list-style:none;
        }
        .menu {margin:0 -1em 1em}
        .menu a {
        display:block;
        font-weight:bold;
        color:white;
        text-decoration:none;
        height:2.4em;
        line-height:2.4em;
        padding:0 1em;
        }
        .menu a:hover {background-color:#111}
        /* Right sidebar */
        #main {
        background-color:white;
        padding:1em 2em;
        }
        /* Toggle navigation button */
        #toggle-nav-btn {
        text-decoration:none;
        font-size:200%;
        line-height:100%;
        color:#666;
        }
        /* Facebook-mobile-like top bar */
        .bar {
        background-color:#333;
        margin:-1em -2em 1em;
        padding:.5em 0 .4em 1em;
        text-align:left;
        }
        #toggle-nav-btn:hover {color:#888}
        /* When the `.menu-is-visible` class applied */
        .menu-is-visible #nav {display:block}
        .menu-is-visible #main {margin-left:200px} /* Same with the `#nav` width */
        .menu-is-visible #toggle-nav-btn {color:#aaa}

        Demo: http://jsfiddle.net/tovic/28HKM/1/

    • Unknown

      \o/ thanks
      hmm, I've a question 0:) :
      How i can make page like "Daftar Member Aktif" ?
      I need it because i will create a blog for Q&A :D

    • Beben Koben

      ah sudah pernah buat aku :D
      Pure CSS3, kode dikit ;)

    • Unknown

      Model-model menu kayak gini sekarang lagi trend

    • Unknown

      mirip pny youtube.., cuma bedax pergerakan efekx di youtube lbh halus :)

    • Unknown

      mas disaya gagal.. pas saya cek kayanya di consol chrome ada tulisan gini Uncaught TypeError: Cannot set property 'onclick' of null ini blognya mas http://ayam-keselek.blogspot.com
      makasih...

      • Taufik Nurrohman

        JavaScript harus diletakkan setelah kehadiran #toggle-nav-btn, bukan sebelumnya. Letakkan di atas </body>, bukan di atas </head>

        • Unknown

          :yaya: oh iya.. hehe saya kurang teliti :D makasih mas

    • Dixy

      kalau mau nambahin efek transisi gimana mas...?

    • azewBz

      waktu`di buka munculnya agak kasar kalau di bkin lebih halus bgaimna mas??

      • Taufik Nurrohman

        Lebih rumit jika ingin memakai CSS transisi. Pertama ketahui dulu elemen mana yang ingin dijadikan sebagai elemen bergerak. Dalam contoh di atas Saya memakai elemen #nav untuk mengubah ukuran lebar dan #main untuk mengubah ukuran margin-left
        Tambahkan efek transisi di situ:

        #nav {
        float:left;
        width:2.8em;
        color:#999;
        position:relative;
        transition:width .2s ease-out;
        }
        #nav .inner {
        padding:1em;
        width:200px;
        display:none;
        }
        #main {
        background-color:white;
        margin-left:2.8em; /* Same with the `#nav` width */
        padding:1em 2em;
        transition:margin-left .2s ease-out;
        }

        Demo: http://jsfiddle.net/tovic/28HKM/3/

    • Unknown

      makasih mas, lama ane ngayalin yang satu ini... :D

    • EM

      terima kasih mas untuk infonya,

    • Unknown

      html, css dan javascriptnya harus ditaruh dimana ?

      • Anonim

        Tombol toggle navigasi bisa diletakkan dimana saja, yang penting ID elemen jangan diganti... Keterangan pada Komentar Lain..
        CSS simpan di atas ]]></b:skin>
        HTML tergantung anda mau mau dimana yang jelas pasti diantara <body>dan</body>
        JavaScript simpan di atas </body>

        • Unknown

          kok saya hasilnya kayak gini http://testblog-blog123.blogspot.com/

    • Unknown

      Malam mas.. Sudah saya coba terapkan step diatas , tp masalah yg saya temui
      *Template yang saya pakai gak memiliki outer-wrapper, Header menu sudah diletakkan samping kiri dan akan berubah diatas jika pada keadaan ukuran layar tertentu (reponsif) contoh:Link

      • Taufik Nurrohman

        Snippet ini sebenarnya tidak cocok untuk dipotong-potong begitu, karena cakupannya terlalu luas (demonstrasi menujukkan satu halaman penuh).

        • Unknown

          Iya mas..saya juga berpikir begitu, akan saya hapus dan coba saya aplikasikan ke template reponsif B1-A

          Terima kasih.... :)

    • Unknown

      pak mau tanya.. klo mau nambahin animasinya gmn ?? saya terapkan ini di header bisa lihat di blog baru saya.. yg tombol search www.blog-dendii.blogspot.com

      • Taufik Nurrohman

        Untuk efek-efek animasi lebih baik pakai JQuery saja pak, jangan pakai ini.

    • WRZTBANDUNG

      mas ko yg saya ga muncul ?
      saya upload di hosting

    Komentar telah ditutup.