Pasang Sexy Sliding Menu SideBar With jQuery News

Pada Kesempatan kali ini saya akan memberikan trik memasang Sliding Menu SideBar With jQuery, menu ini bisa dibilang bagus, karena tampilannya yang begitu elegant dan simple, jadi cukup hanya mengklik gambar dan akan mengeluarkan beberapa link menu didalamnya. pkoknya menu ini sexy gang, sesuai dgn judul yang saya berikan.heheee,.

Baiklah jika sobat ingin melihat demonya, silahkan klik disini..
Gimana,..gimana,.... keren kan?? untuk membuatnya sangat mudah koQ, cukup Add a Gadget Baru.

Berikut Script yang digunakan :

<script src="http://ut2a-4down-blogspot-com.googlecode.com/files/akaUTtaPrototype.js" type="text/javascript"></script>
<script src="http://ut2a-4down-blogspot-com.googlecode.com/files/akaUTtaeffects.js" type="text/javascript"></script>
<script src="http://ut2a-4down-blogspot-com.googlecode.com/files/akaUTtaside-bar.js" type="text/javascript"></script>
<style>
#sideBar{text-align:left;}
#sideBar h2{color:#F0FFFF;font-size:110%;font-family:impact;margin:10px 10px 10px 10px;font-weight:normal !important;}
#sideBar h2 span{font-size:125%;font-weight:normal !important;}
#sideBar ul{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
#sideBar li{margin:0px 5px 5px 10px;padding: 0 0 0 10px;list-style-type:none;display:block;background-color:#DA1074;width:177px;color:#FFFFFF;}
#sideBar li a{width:100%;}
#sideBar li a:link,
#sideBar li a:visited{color:#FFFFFF;font-family:impact;font-size:100%;text-decoration:none;display:block;margin:0px 0px 0px 0px;padding:0 0 0 20px;width:100%;}
#sideBar li a:hover{color:#FFFF00;text-decoration:none;}
#sideBar{position:fixed;width:auto;height:auto;top:140px;left:0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyT5-UAJ71w_H-XHai6YCVUU87DqRnXmVIN_OsxQwHrgVX19INSPSh4mrJ7f_mktiavTser1yT82Jf2cp6Mtd2BznaEKdPN7rkEAaNWbZbVQYF9tzTaSbSjtEOYLdpoyN_LsI-yGNoOgn1/s320/left.collapse.border.png);background-position:top right;background-repeat:repeat-y;}
#sideBarTab{float:left;height:137px;width:28px;}
#sideBarTab img{border:0px solid #FFFFFF;}
#sideBarContents{float:left;overflow:hidden !important;width:200px;height:320px;}
#sideBarContentsInner{width:200px;}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="URL-HERE">LINK-MENU-1</a></li>
<li><a href="URL-HERE">LINK-MENU-2</a></li>
<li><a href="URL-HERE">LINK-MENU-3</a></li>
<li><a href="URL-HERE">LINK-MENU-4</a></li>
<li><a href="URL-HERE">LINK-MENU-5</a></li>
<li><a href="URL-HERE">LINK-MENU-6</a></li>
<li><a href="URL-HERE">LINK-MENU-7</a></li>
<li><a href="URL-HERE">LINK-MENU-8</a></li>
<li><a href="URL-HERE">LINK-MENU-9</a></li>
<li><a href="URL-HERE">LINK-MENU-10</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2kV4hpQseRYEeB-8h65IY09vq8jAzXrR21MwMyewcFX6nwhKeFOX9d1SGJe_2k5YHyIaq7G_g3dSJBzgQ9PjCm4EhaALo46EvFLFFoqYUiCfYbHrvQB4oRAzHMMyLtNZ90iYhKYwiRaYA/s320/sidebarcollapse.png" title="sideBar Menu" /></a>
</div>

KET::
- Silahkan rubah teks yang saya beri warna sesuai keinginan. :D

Semoga bermanfaat yah all :D

Berbagi :