Membuat Toggle Side Navigation Di Blog - Hai Sobat Blogger Walah hampir sebulan saya tidak aktif lagi di blog ini di karenakan sibuk di dunia nyata seminggu
Membuat Toggle Side Navigation Di Blog Toggle Side Navigation ini sama seperti navigasi
Kang ismet yang sekarang ini sedang banyak dicari oleh kalangan blogger dimanapun.. Mumpung
Setelah kemarin saya share artikel berjudul
3 CIRI BLOG YANG DISUKAI PENGUNJUNG
Membuat Toggle Side Navigation Di Blog Juga dapat menghilangkan Jenuh Bagi anda
Yang bosan dengan tampilan Navigasi Default dari blog anda mungkin dengan mengubah
dengan versi ini kejenuhan itu bisa teratasi
Langkah Pembuatan :
1. Letakan Kode Dibawah Ini Diatas Kode ]]></b:skin>
/* 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}
2. Sekarang Letakan Kode Dibawah Ini Diatas Kode </body>
(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;
};
})();
3. Dan Berikut Kerangka Dari Menu navigasi Tersebut
<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>
Posts
