Membuat Sajian Vertical Dan Sajian Vertical Hide

Sudah beberapa hari ini hujan terus mengguyur kawasan tempat aku tinggal. Dan yang aneh, alasannya ialah hujan yang terus mengguyur, koneksi internet modem aku jadi tersendat-sendat. Alhasil acara ngeblog aku jadi terganggu juga...hadeueuehh...

Nah kini mumpung agak lancar...(karena mungkin belum hujan...), aku mencoba bagikan trik cara menciptakan sajian vertical dan sajian vertical hide.

Untuk sajian vertical dapat disimpan di sidebar atau mungkin di bawah postingan dan untuk sajian vertical hide akan tampak pada sisi blog baik di kanan ataupun di kiri.

A. MENU VERTICAL

Untuk menciptakan sajian vertical ini silahkan copy kode-kode di bawah ini.

Silahkan copy aba-aba CSS di bawah ini dan simpan di atas aba-aba ]]></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 aba-aba 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 sajian vertical hide ini terinspirasi dengan artikel kang Beben kemarin, jadi aku gabungkan triknya sehingga menghasilkan sajian vertical hide ini.

Untuk membuatnya silahkan copy kode-kode di bawah ini.

Silahkan copy aba-aba CSS di bawah ini dan simpan di atas aba-aba ]]></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 aba-aba pemanggilnya silahkan copy aba-aba di bawah ini dan simpan di atas aba-aba </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 aba-aba right dengan left pada aba-aba CSS-nya.

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

Sumber https://www.kompiajaib.com/

Share this post