Cara Gampang Membuat Menu Vertical Dan Menu Vertical Hide - Hai teman - teman saya Shannenpio 😄 pada beberapa hari ini hujan terus mengguyur daerah tempat saya tinggal. Dan yang aneh, karena hujan yang terus mengguyur, koneksi internet modem saya jadi tersendat-sendat. Alhasil kegiatan ngeblog saya jadi terganggu juga...hadeueuehh...
Nah sekarang mumpung agak lancar...(karena mungkin belum hujan...), saya mencoba bagikan trik cara membuat menu vertical dan menu vertical hide.
Untuk menu vertical bisa disimpan di sidebar atau mungkin di bawah postingan dan untuk menu vertical hide akan tampak pada sisi blog baik di kanan ataupun di kiri.
A. MENU VERTICAL
Untuk membuat menu vertical ini silahkan copy kode-kode di bawah ini.
Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]>
.vertical { font-size:13px; line-height:30px; font-weight:700; border:1px solid #1d1d1d; border-radius:1px; }
.vertical>ul { margin:0; padding:0; }
.vertical ul,.vertical li { list-style:none; }
.vertical>ul>li { background:#292929; margin:0;text-transform:uppercase;padding:0;color:#fff;}
.vertical>ul>li:hover {background:#4B4B4B}
.vertical>ul>li a{color:#fff}
.vertical>ul>li ul { transition:.3s ease-out; opacity:0; margin:0; padding:0; }
.vertical>ul>li li { background:#efefef;}
.vertical>ul>li li a{color:#333;text-transform:none}
.vertical a { display:block; text-align:center; text-decoration:none!important; }
.vertical>ul>li>a { border-top:1px solid #353535; border-bottom:1px solid #161616;}
.vertical>ul>li ul li a { height:0; transition:.3s ease-out}
.vertical>ul>li:hover ul li a { height:30px; }
.vertical>ul>li:hover ul { opacity:1; }
.vertical > ul > li li:hover { box-shadow:inset 0 1px #4077CB,inset 0 -1px #4077cb; background:#3e6db5;}
.vertical > ul > li li:hover a{color:#fff }Dan silahkan copy kode HTML-nya atau pemanggilnya di bawah ini dan simpan di gadget HTML sidebar atau mungkin di bawah postingan.
EmoticonEmoticon