Toggle Side Navigation
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
});Labels: CSS, Desain, JavaScript, Potongan
27 Comments:
wah... yang ini aku tertarik menerapkan di blog sku ksk, tak coba dulu, ntar kalau kesulitan mohon bimbingannya ya ?
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
\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
http://tempat-eksperimen2.blogspot.com/2013/03/widget-member-aktif-keren-dengan-avatar.html
ah sudah pernah buat aku :D
Pure CSS3, kode dikit ;)
Model-model menu kayak gini sekarang lagi trend
Dan Ini Juga Salah SAtu Model Tampilan FAcebook Terbaru Di 2013 ,
hehehe ,
[source] : http://www.facebook.com/about/newsfeed
Masuk Daftar Tunggu Saya :'(
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">≡</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/
mirip pny youtube.., cuma bedax pergerakan efekx di youtube lbh halus :)
ini sih keerennnnnn....
[ Gabung yuk ke Direktori Backlink Gratis Berkualitas No.1 Indonesia ]
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...
JavaScript harus diletakkan setelah kehadiran #toggle-nav-btn, bukan sebelumnya. Letakkan di atas </body>, bukan di atas </head>
:yaya: oh iya.. hehe saya kurang teliti :D makasih mas
kalau mau nambahin efek transisi gimana mas...?
waktu`di buka munculnya agak kasar kalau di bkin lebih halus bgaimna mas??
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/
makasih mas, lama ane ngayalin yang satu ini... :D
terima kasih mas untuk infonya,
html, css dan javascriptnya harus ditaruh dimana ?
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>
kok saya hasilnya kayak gini http://testblog-blog123.blogspot.com/
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:[url=http://lapak-cahpare.blogspot.com/]Link[/url]
Snippet ini sebenarnya tidak cocok untuk dipotong-potong begitu, karena cakupannya terlalu luas (demonstrasi menujukkan satu halaman penuh).
Iya mas..saya juga berpikir begitu, akan saya hapus dan coba saya aplikasikan ke template reponsif B1-A
Terima kasih.... :)
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
Untuk efek-efek animasi lebih baik pakai JQuery saja pak, jangan pakai ini.
mas ko yg saya ga muncul ?
saya upload di hosting
Post a Comment
<< Home