HTML
<div id="outer-wrapper"> <section id="nav"> <a href="#nav" id="toggle-nav-btn" title="Toggle Side Navigation">≡</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 dipakai 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; }; })();Alternatif Lain
Kita juga dapat memakai plugin jQuery Toggle Sidebar untuk menampilkan dan menyembunyikan sidebar, dimana hidangan navigasi berada di dalam sidebar tersebut. Tapi dalam kasus ini Saya tidak menyarankannya, mengingat memakai JavaScript mentah saja masih bisa:
$('#nav').toggleSidebar({ expand: "#main", defaultHidden: true });