HTML
<div id="outer-wrapper">
<section id="nav">
<a href="#nav" id="toggle-nav-btn" title="Show 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 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;
};
})();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
});
