Auto Hide Menu Vertikal

Auto Hide Menu Vertikal

Auto Hide Menu Vertikal

infoalya


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 On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

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

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
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 - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×