Membuat Menu Sidebar Accordian ya itung-itung santai sejenak sampe menemukan mood kembali . Menu Accordian kali ini sangat simple tapi cukup elegant .
CSS
HTML
JS
Cukup sekian dan terimakasih hah ..... !!!
Setelah beberapa hari absen posting karena ngurusin design template yang tak kunjung pas dengan keinginan sampe akhirnya kefikiran untuk posting cara CSS
#accordian {background:#004050;
width: 250px; margin: 100px auto 0 auto;
color:white; box-shadow: 0 5px 15px 1px rgba(0,0,0,.6),
0 0 200px 10px rgba(255,255,255,.5);}
#accordian h3 {
font-size:12px;
line-height:34px;
padding: 0 10px;
cursor:pointer;
background:linear-gradient(#003040, #002535);
}
#accordian li {
list-style:none;
}
#accordian ul ul li a {
color:snow;
text-decoration:none;
font-size:11px;
line-height:27px;
display:block;
padding:0 15px;
transition: all .15s;
}
#accordian ul li li a:hover {
background: #003545;
border-left:5px solid lightgreen;
}
#accordian ul ul {display:none;}
#accordian h3 span {
font-size: 16px;
margin-right:10px;
}
HTML
<div id="accordian">
<ul>
<li>
<h3><span class="icon-dashboard"></span>Widget One</h3>
<ul>
<li><a href="#">Reports</a> </li>
<li><a href="#">Search</a> </li>
<li><a href="#">Graphs</a> </li>
<li><a href="#">Settings</a> </li>
</ul>
</li>
<li>
<h3><span class="icon-dashboard"></span>Widget Two</h3>
<ul>
<li><a href="#">Reports</a> </li>
<li><a href="#">Search</a> </li>
<li><a href="#">Graphs</a> </li>
<li><a href="#">Settings</a> </li>
</ul>
</li>
<li>
<h3><span class="icon-dashboard"></span>Widget There</h3>
<ul>
<li><a href="#">Reports</a> </li>
<li><a href="#">Search</a> </li>
<li><a href="#">Graphs</a> </li>
<li><a href="#">Settings</a> </li>
</ul>
</li>
<li>
<h3><span class="icon-dashboard"></span>Widget Opate</h3>
<ul>
<li><a href="#">Reports</a> </li>
<li><a href="#">Search</a> </li>
<li><a href="#">Graphs</a> </li>
<li><a href="#">Settings</a> </li>
</ul>
</li>
<!-- will add more later -->
</ul>
</div>
JS
$(function(){
$("#accordian h3").click(function(){
$("#accordian ul ul").slideUp();
if ($(this).next().is(":hidden")){
$(this).next().slideDown();
}
});
});
Cukup sekian dan terimakasih hah ..... !!!
Tah ieu nu diperyogikeun teh kang :D
BalasHapusNyuhungkeun izin ah kanggo dimodif deui :D kamari aya nu nyuhungkeun widget sidebar anu full kolor (kolor ijo kali nya heheheh) tapi pake fungsi klik sapertos ieu (nu kamari mah kan pake hover).
Hatur nuhun pisan kang :D
Ameh gampil CTRL + D ah kang hehhhhe :D
Hapuseh ieu mah apal wae hehe
Hapusmuhun mangga kang ... eta masih emut nyah kana kolor ijo :D
Hehehehe...duka kolor ijo teh masih aya teu nya hehehehe :D
BalasHapusaya kang .. kamari ngaliwat tos tipasar :D
Hapuslain ku teu beak beak ini tutor,aya deui nu anyar,,,,meni sok kabita hayang ngajaran eunk heuheu
BalasHapusSok atuh kang ... itung-itung mamayu hehe !!!
Hapushadeuh hayong kang br nangis pc na ka banyur :s
BalasHapuslieur ngamodif tina hape teh :-D
Hahaha karunya taing atuh ... jiga kembang wae ateuh iru mah di cebor hehe
Hapuswoww... maenana akur daun ayeunamah mangstab brow...
BalasHapusCan Ngeh yeuh kang ... tapi kalau dibilang mangstab ya syukur atuh kang hehe "GR"
HapusjQuery accordion (akur daun) cenah kitu mang :)
Hapusdasar nya kang tulalit pisan heuheu
HapusModel keluaran terbaru ya kang :)
BalasHapusDah lama mas bud .. cuma baru dikeluarin nunggu dollar naek **p
HapusPenimbun dollar nih kayaknya mas ruly hehehe...btw cakep mas efeknya
HapusHahaha nyari untung dikit mas **p
HapusIjin nyimak artikel-artikel yang ada Kang. Maturnuhun
BalasHapusMonggo silahkan mas ....
Hapuswah keren nih :-bd bisa menghemat tempat
BalasHapusseperti biasa, masuk kulkas dl.. lmyn buat bahan pergantian template hehe....
oia mas, yang didalam itu kan isinya link... kalo mau di isi widget misal popular post atau label gimana ya?
HapusKalau untuk di isi widget berarti harus ngubah CSS'y dari awal .. ini untuk list menu non !!!
Hapuso betul jg.... siipp deh
Hapuskang punten.. tos lami ieuteh nembe balaka, asa aya nu mengganggu pemandangan dina tombol scroll, pas digeser kahandap pisan, aya menghilang heula, katutup ku widget adsense :)
BalasHapusMuhun nyaeta kang .. anu tombol back top nya ... !!! aya rencana bade di patenken tah tombol teh
Hapuscolorize admin comments :-d
Hapusto ngefeck kang ... asa rada puyeng yeuh
Hapusmangstabb kang menunya hehe.. bm dulu biar ga lupa
BalasHapusMangstab keneh template'na kg andez :)
HapusSallahnikungg...
BalasHapusCeu ilah... keren pisan euy... jadi ngelay we ah.. :)
wallah eta teh naun cenah hehe
HapusLagi nyante aja bsa kyk gini,, kerreeenn!! emang master dah kang ruly :-bd
BalasHapuswaduh kang,, perasaan kotak komentarnya gk warna warni dah... kapan2 share ya :D
Hehe .. master tuh yg diatas sob ...
Hapusoks tapi masih dalam experiment nih ...
Mantapzzz bozzzz hehe :)
BalasHapusMantap mantap weh ah hehe
Hapusnyicipin accordion nya mas
BalasHapusMonggo sis
Hapuskalau nambahin efek multi level ny gmn tuh kakak :)
BalasHapusCoba diperhatikan dek hehe
HapusIya silahkan mas ... !!
BalasHapus