Auto Hide Menu Vertikal

- August 07, 2014

infoalya.com


Langsung saja, sesuai dengan judul diatas ...
 

1. login sebagai admin atau klik disini
2. klik template ... edit HTML...
3. temukan kode ]]></b:skin> atau </style>
4. copy dan paste kode dibawah ini tepat diatas kode ]]></b:skin>
atau </style>



#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 }

5. Untuk kode pemanggilnya silahkan copy dan paste kode dibawah ini tepat diatas 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>

6. Simpan template dan lihat hasilnya

  

terima kasih kang Adhy (www.kompiajaib.com)

Share this with short URL:
Blogger
Disqus
Tinggalkan Komentar

No comments

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

 

ketik dan enter untuk mencari