Membuat Menu Vertical Dan Menu Vertical Hide

Ditulis oleh: Adhy Suryadi
Ditulis pada: 7/26/2013

Sudah 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 ]]></b:skin>


.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.


<div class='vertical'>

<ul>

<li><a href='/' title='Menu1'>Menu 1</a>

<ul>

<li><a href='/' title='Sub Menu1'>Sub1 Menu1</a></li>

<li><a href='/' title='Sub Menu1'>Sub2 Menu1</a></li>

<li><a href='/' title='Sub Menu1'>Sub3 Menu1</a></li>

<li><a href='/' title='Sub Menu1'>Sub4 Menu1</a></li>

<li><a href='/' title='Sub Menu1'>Sub5 Menu1</a></li>

<li><a href='/' title='Sub Menu1'>Sub6 Menu1</a></li>

</ul>

</li>

</ul>

<ul>

<li><a href='/' title='Menu2'>Menu 2</a>

<ul>

<li><a href='/' title='Sub1 Menu2'>Sub1 Menu2</a></li>

<li><a href='/' title='Sub2 Menu2'>Sub2 Menu2</a></li>

<li><a href='/' title='Sub3 Menu2'>Sub3 Menu2</a></li>

<li><a href='/' title='Sub4 Menu2'>Sub4 Menu2</a></li>

<li><a href='/' title='Sub5 Menu2'>Sub5 Menu2</a></li>

<li><a href='/' title='Sub6 Menu2'>Sub6 Menu2</a></li>

</ul>

</li>

</ul>

<ul>

<li><a href='/' title='Menu3'>Menu 3</a>

<ul>

<li><a href='/' title='Sub1 Menu3'>Sub1 Menu3</a></li>

<li><a href='/' title='Sub2 Menu3'>Sub2 Menu3</a></li>

<li><a href='/' title='Sub3 Menu3'>Sub3 Menu3</a></li>

<li><a href='/' title='Sub4 Menu3'>Sub4 Menu3</a></li>

<li><a href='/' title='Sub5 Menu3'>Sub5 Menu3</a></li>

<li><a href='/' title='Sub6 Menu3'>Sub6 Menu3</a></li>

</ul>

</li>

</ul>

</div>

DEMO

B. MENU VERTICAL HIDE

Untuk menu vertical hide ini terinspirasi dengan artikel kang Beben kemarin, jadi saya gabungkan triknya sehingga menghasilkan menu vertical hide ini.

Untuk membuatnya silahkan copy kode-kode di bawah ini.

Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin>


#menu-vertical{width:19em;right:-19em;top:5.5em;height:auto;position:fixed;overflow-y:hidden;background-color:#2b2b2b;transition:right .4s ease-in-out;margin:0;padding:0}

#menu-vertical:hover{right:0;}

#menu-label{display:inline-block;background:#292929;position:fixed;text-align:center;right:0;top:3.2em;z-index:100;font-size:14px;line-height:30px;}

#menu-label a{color:#FFF;display:block;text-transform:uppercase;text-decoration:none;width:5.1em;}

#menu-label:hover{opacity:0.67;}

.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 untuk kode pemanggilnya silahkan copy kode di bawah ini dan simpan di atas kode </body>.


<div id="menu-vertical">

<h3 id="menu-label"><a href="#">Menu</a></h3>

<div class='vertical'>

<ul>

<li><a href='/' title='Menu1'>Menu 1</a>

<ul>

<li><a href='/' title='Sub Menu1'>Sub1 Menu1</a></li>

<li><a href='/' title='Sub Menu1'>Sub2 Menu1</a></li>

<li><a href='/' title='Sub Menu1'>Sub3 Menu1</a></li>

<li><a href='/' title='Sub Menu1'>Sub4 Menu1</a></li>

<li><a href='/' title='Sub Menu1'>Sub5 Menu1</a></li>

<li><a href='/' title='Sub Menu1'>Sub6 Menu1</a></li>

</ul>

</li>

</ul>

<ul>

<li><a href='/' title='Menu2'>Menu 2</a>

<ul>

<li><a href='/' title='Sub1 Menu2'>Sub1 Menu2</a></li>

<li><a href='/' title='Sub2 Menu2'>Sub2 Menu2</a></li>

<li><a href='/' title='Sub3 Menu2'>Sub3 Menu2</a></li>

<li><a href='/' title='Sub4 Menu2'>Sub4 Menu2</a></li>

<li><a href='/' title='Sub5 Menu2'>Sub5 Menu2</a></li>

<li><a href='/' title='Sub6 Menu2'>Sub6 Menu2</a></li>

</ul>

</li>

</ul>

<ul>

<li><a href='/' title='Menu3'>Menu 3</a>

<ul>

<li><a href='/' title='Sub1 Menu3'>Sub1 Menu3</a></li>

<li><a href='/' title='Sub2 Menu3'>Sub2 Menu3</a></li>

<li><a href='/' title='Sub3 Menu3'>Sub3 Menu3</a></li>

<li><a href='/' title='Sub4 Menu3'>Sub4 Menu3</a></li>

<li><a href='/' title='Sub5 Menu3'>Sub5 Menu3</a></li>

<li><a href='/' title='Sub6 Menu3'>Sub6 Menu3</a></li>

</ul>

</li>

</ul>

</div>

</div>

DEMO

Agar penampakannya ada di sebelah kiri blog, silahkan ganti kode right dengan left pada kode CSS-nya.

Inspirasi: beben-koben.blogspot.com/2013/07/make-lists-toc-menu.html

Membuat Menu Vertical Dan Menu Vertical Hide

Ditulis oleh: Adhy Suryadi Ditulis pada: 7/26/2013

Berbagi itu peduli:

Comment Policy:

Menarik Untuk Dibaca Juga:

Ditulis oleh: Adhy Suryadi
Ditulis pada: 7/26/2013