Membuat Menu Vertical Dan Menu Vertical Hide

Membuat Menu Vertical Dan Menu Vertical Hide

Bola Hero Gawai

Membuat Menu Vertical Dan Menu Vertical Hide

Menu Vertical Dan Menu Vertical Hide
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>


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>


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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×