Mecha versi 2.6.4 sudah dirilis!

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/

    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.