Toggle Side Navigation

Rabu, 20 Maret 2013

Tabel Konten

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

Rabu, 20 Maret 2013 07:36 PM

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

Unknown

Jum’at, 22 Maret 2013 08:01 PM

ini sih keerennnnnn....

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

Anonim

Rabu, 20 Maret 2013 09:04 PM

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

Jum’at, 22 Maret 2013 02:30 PM

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

Jum’at, 22 Maret 2013 03:44 PM

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

Rabu, 20 Maret 2013 09:45 PM

\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

Dixy

Kamis, 21 Maret 2013 05:04 PM

http://tempat-eksperimen2.blogspot.com/2013/03/widget-member-aktif-keren-dengan-avatar.html

Beben Koben

Kamis, 21 Maret 2013 06:45 PM

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

Unknown

Jum’at, 22 Maret 2013 12:31 PM

Model-model menu kayak gini sekarang lagi trend

Unknown

Jum’at, 22 Maret 2013 07:28 PM

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

Unknown

Senin, 25 Maret 2013 04:23 PM

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

Senin, 25 Maret 2013 04:50 PM

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

Unknown

Selasa, 26 Maret 2013 07:55 PM

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

Dixy

Selasa, 26 Maret 2013 08:03 PM

kalau mau nambahin efek transisi gimana mas...?

azewBz

Selasa, 26 Maret 2013 10:08 PM

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

Taufik Nurrohman

Rabu, 27 Maret 2013 08:12 AM

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

Sabtu, 04 Mei 2013 05:05 AM

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

EM

Sabtu, 11 Mei 2013 01:24 PM

terima kasih mas untuk infonya,

Unknown

Sabtu, 09 November 2013 09:23 PM

html, css dan javascriptnya harus ditaruh dimana ?

Anonim

Rabu, 13 November 2013 05:14 PM

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

Kamis, 14 November 2013 09:26 AM

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

Unknown

Kamis, 28 November 2013 12:52 AM

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

Jum’at, 29 November 2013 12:24 AM

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

Unknown

Jum’at, 29 November 2013 01:42 AM

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

Terima kasih.... :)