jQuery Infinite Sliding Menu Plugin - referensi blog

Menu

Home » menu slide » jQuery Infinite Sliding Menu Plugin

Senin, 02 Februari 2015

jQuery Infinite Sliding Menu Plugin

Diposting oleh: Admin Referensi Blog pada: Waktu On Line :kak:

widget wordpress yang keren kini di pakai lagi blogger .

sudah di coba di widget serta ruang posting.

ubah link rell web nya

SILAHKAN DI EDIT , APABILA MENGGANGGU tampilan template


 <!-- start: SLIDING MENU -->
 <div class="slashc-sliding-menu">  
  <h1><span>CodeCanyon</span> <a title="Slide Back Home" href="#" class="slashc-sliding-menu-home">Slide Back Home</a></h1>
  <ul>
   <li><a href="#"><span>JavaScript</span></a>
    <ul>
     <li><a href="#"><span>Go Deeper</span></a>
      <ul>
       <li><a href="#"><span>..and Deeper</span></a>
        <ul>
         <li><a href="#"><span>..you get the idea</span></a>
          <ul>
           <li><a href="http://codecanyon.net">Navigation</a></li>
           <li><a href="http://codecanyon.net">Project Management Tools</a></li>
           <li><a href="http://codecanyon.net">Ratings and Charts</a></li>
           <li><a href="http://codecanyon.net">Database Abstractions</a></li>
           <li><a href="http://codecanyon.net">Images and Media</a></li>
           <li><a href="http://codecanyon.net">Ratings and Charts</a></li>
           <li><a href="http://codecanyon.net">Shopping Carts</a></li>
          </ul>
         </li>
         <li><a href="http://codecanyon.net">Database Abstractions</a></li>
         <li><a href="http://codecanyon.net">Images and Media</a></li>
         <li><a href="http://codecanyon.net">Loaders and Uploaders</a></li>
         <li><a href="http://codecanyon.net">Navigation</a></li>
         <li><a href="http://codecanyon.net">Project Management Tools</a></li>
         <li><a href="http://codecanyon.net">Ratings and Charts</a></li>
         <li><a href="http://codecanyon.net">Shopping Carts</a></li>
        </ul>
       </li>
       <li><a href="http://codecanyon.net">Loaders and Uploaders</a></li>
       <li><a href="http://codecanyon.net">Navigation</a></li>
       <li><a href="http://codecanyon.net">Project Management Tools</a></li>
       <li><a href="http://codecanyon.net">Ratings and Charts</a></li>
       <li><a href="http://codecanyon.net">Shopping Carts</a></li>
      </ul>
     </li>
     <li><a href="http://codecanyon.net">Database Abstractions</a></li>
     <li><a href="http://codecanyon.net">Images and Media</a></li>
     <li><a href="http://codecanyon.net">Loaders and Uploaders</a></li>
     <li><a href="http://codecanyon.net">Navigation</a></li>
     <li><a href="http://codecanyon.net">Project Management Tools</a></li>
     <li><a href="http://codecanyon.net">Ratings and Charts</a></li>
     <li><a href="http://codecanyon.net">Shopping Carts</a></li>
    </ul>
   </li>
   <li><a href="#"><span>PHP Scripts</span></a>
    <ul>
     <li><a href="http://codecanyon.net">Miscellaneous</a></li>
     <li><a href="http://codecanyon.net">Social Networking</a></li>
     <li><a href="http://codecanyon.net">Shopping Carts</a></li>
     <li><a href="http://codecanyon.net">Loaders and Uploaders</a></li>
     <li><a href="http://codecanyon.net">Project Management Tools</a></li>
    </ul>
   </li>
   <li><a href="#"><span>.NET</span></a>
    <ul>
     <li><a href="http://codecanyon.net">Loaders and Uploaders</a></li>
     <li><a href="http://codecanyon.net">Navigation</a></li>
     <li><a href="http://codecanyon.net">Project Management Tools</a></li>
     <li><a href="http://codecanyon.net">Ratings and Charts</a></li>
     <li><a href="http://codecanyon.net">Database Abstractions</a></li>
     <li><a href="http://codecanyon.net">Images and Media</a></li>
     <li><a href="http://codecanyon.net">Shopping Carts</a></li>
    </ul>
   </li>
   <li><a href="#"><span>Plugins</span></a>
    <ul>
     <li><a href="http://codecanyon.net">Magento Extensions</a></li>
     <li><a href="#"><span>WordPress</span></a>
      <ul>
       <li><a href="http://codecanyon.net">Contact Forms</a></li>
       <li><a href="http://codecanyon.net">Sliders</a></li>
       <li><a href="http://codecanyon.net">Galleries</a></li>
       <li><a href="http://codecanyon.net">e-Commerce</a></li>
       <li><a href="http://codecanyon.net">SEO</a></li>
      </ul>
     </li>
     <li><a href="#"><span>ExpressionEngine</span></a>
      <ul>
       <li><a href="http://codecanyon.net">CAPTCHA</a></li>
       <li><a href="http://codecanyon.net">Custom Data</a></li>
       <li><a href="http://codecanyon.net">WYSIWYG</a></li>
       <li><a href="http://codecanyon.net">Miscellaneous</a></li>
      </ul>
     </li>
    </ul>
   </li>
   <li><a href="#"><span>CSS</span></a>
    <ul>
     <li><a href="http://codecanyon.net">Navigation and Menus</a></li>
     <li><a href="http://codecanyon.net">Layouts</a></li>
     <li><a href="http://codecanyon.net">Animations and Effects</a></li>
     <li><a href="http://codecanyon.net">Charts and Graphs</a></li>
     <li><a href="http://codecanyon.net">Tabs and Sliders</a></li>
     <li><a href="http://codecanyon.net">Miscellaneous</a></li>
    </ul>
   </li>
   <li><a href="#"><span>HTML5</span></a>
    <ul>
     <li><a href="http://codecanyon.net">3D</a></li>
     <li><a href="http://codecanyon.net">Canvas</a></li>
     <li><a href="http://codecanyon.net">Charts and Graphs</a></li>
     <li><a href="http://codecanyon.net">Miscellaneous Apps</a></li>
    </ul>
   </li>
   <li><a href="#"><span>Mobile</span></a>
    <ul>
     <li><a href="#"><span>iPhone</span></a>
      <ul>
       <li><a href="http://codecanyon.net">Canvas</a></li>
       <li><a href="http://codecanyon.net">Navigation and Menus</a></li>
       <li><a href="http://codecanyon.net">Layouts</a></li>
       <li><a href="http://codecanyon.net">Animations and Effects</a></li>
       <li><a href="http://codecanyon.net">3D</a></li>
       <li><a href="http://codecanyon.net">Canvas</a></li>
       <li><a href="http://codecanyon.net">Charts and Graphs</a></li>
      </ul>
     </li>
     <li><a href="#"><span>Android</span></a>
      <ul>
       <li><a href="http://codecanyon.net">3D</a></li>
       <li><a href="http://codecanyon.net">Canvas</a></li>
       <li><a href="http://codecanyon.net">Charts and Graphs</a></li>
      </ul>
     </li>
     <li><a href="#"><span>Native Web</span></a>
      <ul>
       <li><a href="http://codecanyon.net">3D</a></li>
       <li><a href="http://codecanyon.net">Canvas</a></li>
       <li><a href="http://codecanyon.net">Navigation and Menus</a></li>
       <li><a href="http://codecanyon.net">Layouts</a></li>
       <li><a href="http://codecanyon.net">Animations and Effects</a></li>
       <li><a href="http://codecanyon.net">Charts and Graphs</a></li>
      </ul>
     </li>
     <li><a href="#"><span>Titanium</span></a>
      <ul>
       <li><a href="http://codecanyon.net">CAPTCHA</a></li>
       <li><a href="http://codecanyon.net">Custom Data</a></li>
       <li><a href="http://codecanyon.net">WYSIWYG</a></li>
       <li><a href="http://codecanyon.net">Miscellaneous</a></li>
       <li><a href="http://codecanyon.net">3D</a></li>
       <li><a href="http://codecanyon.net">Canvas</a></li>
       <li><a href="http://codecanyon.net">Charts and Graphs</a></li>
      </ul>
     </li>
     <li><a href="http://codecanyon.net">Charts and Graphs</a></li>
     <li><a href="http://codecanyon.net">Miscellaneous Apps</a></li>
    </ul>
   </li>
   <li><a href="http://codecanyon.net">Simple link</a></li>
  </ul>
  <p><span>Select an item...</span> <a title="Go Back" href="#" class="slashc-sliding-menu-back">Go Back</a></p>
 </div>
 <!-- end: SLIDING MENU -->


<style>
div.slashc-sliding-menu 
{ 
 background: #171717;
 overflow: hidden;
}

div.slashc-sliding-menu,
div.slashc-sliding-menu h1,
div.slashc-sliding-menu ul,
div.slashc-sliding-menu li,
div.slashc-sliding-menu li a,
div.slashc-sliding-menu li span,
div.slashc-sliding-menu p
{
 display: block;
 font: 14px Tahoma,Arial,sans-serif; /* set font here */
 width: 280px; /* set width here 280px;*/
 list-style: none;
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
 position: relative;
}
div.slashc-sliding-menu h1,
div.slashc-sliding-menu li,
div.slashc-sliding-menu li a,
div.slashc-sliding-menu li a span,
div.slashc-sliding-menu p
{
 height: 50px; 
 line-height: 50px;
 text-indent: 15px;
 background-repeat: repeat-x;
 background-position: 0 0;
}
div.slashc-sliding-menu h1
{
 background-color: #069;
 background-image: url(http://1.s3.envato.com/files/66978876/img/header_bg.jpg);
 color: #fff;
 font-weight: bold;
}
div.slashc-sliding-menu li
{
 background-color: #eee;
 background-image: url(http://1.s3.envato.com/files/66978876/img/item_bg.jpg); 
}
div.slashc-sliding-menu li ul
{
 position: absolute;
}
div.slashc-sliding-menu li,
div.slashc-sliding-menu li a
{
 color: #333;
 text-decoration: none;
}
div.slashc-sliding-menu li a span
{
 font-weight: bold;
 background: url(http://1.s3.envato.com/files/66978876/img/arrow_icn.gif) no-repeat 256px 19px;
}
div.slashc-sliding-menu li a:hover
{
 background-color: #888;
 background-image: url(http://1.s3.envato.com/files/66978876/img/item_over_bg.jpg);
 color: #fff;
}
div.slashc-sliding-menu li a:hover span
{
 background-position: 256px -31px;
}
div.slashc-sliding-menu p
{
 background-color: #222;
 background-image: url(http://1.s3.envato.com/files/66978876/img/footer_bg.jpg);
 color: #555;
 font-size: 12px;
}
div.slashc-sliding-menu a.slashc-sliding-menu-home,
div.slashc-sliding-menu a.slashc-sliding-menu-back
{
 text-indent: -10000px;
 display: block;
 height: 50px;
 overflow: hidden;
 position: absolute;
 top: 0;
 right: 0;
}
div.slashc-sliding-menu a.slashc-sliding-menu-home
{
 width: 49px;
 background: url(http://1.s3.envato.com/files/66978876/img/home_icn.gif) no-repeat 15px 17px;
}
div.slashc-sliding-menu a.slashc-sliding-menu-home:hover
{
 background-position: 15px -33px;
}
div.slashc-sliding-menu a.slashc-sliding-menu-back
{
 width: 52px;
 background: url(http://1.s3.envato.com/files/66978876/img/back_icn.gif) no-repeat 15px 19px;
}
div.slashc-sliding-menu a.slashc-sliding-menu-back:hover
{
 background-position: 15px -31px;
}
div.slashc-sliding-menu a
{
 outline: none;
}


</style>


<!--jQuery JavaScript Library v1.5-->
<script src="https://googledrive.com/host/0B7DpE12vkWyebjFCNGtMSzRkT28" type="text/javascript"></script> 


<!--jQuery Easing v1.3-->
<script src="https://googledrive.com/host/0B7DpE12vkWyecEVRV0phMXRrdWs" type="text/javascript"></script>
 

<script>
(function(a){var b={init:function(c){return this.each(function(){var d=a(this);if(!d.data("data")){var e=d.children("h1").first(),f={span:e.children("span").first(),home:e.children("a.slashc-sliding-menu-home").first()};f.text=f.span.html(),f.home.bind("click.slashcSlidingMenu",a.proxy(function(a){b.goHome.call(this),a.preventDefault()},d)),e.data("d",f);var g=d.children("p").first(),h={span:g.children("span").first(),back:g.children("a.slashc-sliding-menu-back").first()};h.text=h.span.html(),h.back.bind("click.slashcSlidingMenu",a.proxy(function(a){b.goBack.call(this),a.preventDefault()},d)),g.data("d",h);var i=d.children("ul").first(),j;d.data("lx",-i.width()).data("lh",i.height()),b._iUl(i,d),i.css("height",d.data("lh")),d.removeData("lx").removeData("lh");var k={h1:e,p:g,ul:i,lx:0,ttl:f.text},l;i.find("ul").css("display","none");if(c){var m=i.find("li#"+c);if(m.length>0){var n=m.data("d"),o,p;n&&(n.cul.css("display","block"),f.span.html(n.txt),i.css("left",n.lx),k.lx=n.lx,k.ttl=n.txt,l=[],m.parentsUntil(".slashc-sliding-menu").each(function(){o=a(this),o.is("li")&&(p=o.data("d"),p.cul.css("display","block"),l.unshift({lx.lx,ttl.txt}))}),l.unshift({lx:0,ttl:f.text}))}}d.data("d",k),d.data("bc",l||[{lx:0,ttl:f.text}])}})},goBack:function(){b._sUl(this,"back")},goHome:function(){b._sUl(this,"home")},_iUl:function(c,d){var e=d.data("lx"),f=d.data("lh");c.children("li").has("ul").each(function(){var g=a(this),h=g.children("a").first();cul=g.children("ul").first(),cul.height()>f&&d.data("lh",cul.height()),cul.css("left",g.width()).css("top",-g.position().top),h.bind("click.slashcSlidingMenu",a.proxy(function(a){var c=this.data("d");c&&(b._rUl(c.pul),c.cul.css("display","block"),b._sUl(c.mnu,c.lx,c.txt)),a.preventDefault()},g)),g.data("d",{lx:e,cul:cul,pul:c,mnu:d,txt:g.children("a").children("span").html()}),d.data("lx",e-cul.width()),b._iUl(cul,d)})},_sUl:function(b,c,d){var e=b.data("d"),f=b.data("bc"),g=!0;if(c=="back"||c=="home"){var h;c=="back"?h=f.pop()h=f[0],h&&(f.length=1)),h&&(c=h.lx,d=h.ttl),g=!1}if(d){c>0&&(c=0);if(e.lx!=c){var i=e.h1.data("d");g&&f.push({lx:e.lx,ttl:e.ttl}),e.lx=c,e.ul.stop().animate({left:c},300,"linear"),e.ttl=d,i.span.stop().fadeTo(150,0,a.proxy(function(){this.h1.data("d").span.html(this.ttl)},e)).fadeTo(150,1);var j=[],k=f.length;while(k--)j[k]=f[k].ttl;j.push(d),b.trigger("menuSlide",[j])}}},_rUl:function(a){a.children("li").children("ul").css("display","none")}};a.fn.slashcSlidingMenu=function(a,c){if(typeof c=="undefined")return typeof a=="undefined"?b.init.call(this):b[a]?b[a].call(this):b.init.call(this,a);if(b[a])return c?b[a].call(this,c):b[a].call(this);return this},a(document).ready(function(){a("div.slashc-sliding-menu").slashcSlidingMenu()})})(jQuery)
</script>

Tambahkan komentar Komentator

Konversi KodeTutup KonverterOOT

Terima kasih telah berkomentar

Langganan: Posting Komentar (Atom)

AKAN DI ISI TERUS...

HIMBAUAN;
SEMUA WIDGET TELAH DI UJI COBA DI BLOGSPOT ,
BAIK DARI WORDPRESS ATAUPUN JOMLA .
[semua bekerja sesuai tampilan].
TINGGAL KALIAN EDIT SESUAI KEBUTUHAN
APABILA ADA YANG TAK BEKERJA , BERARTI SCRIPT TEMPLATE ANDA TAK COCOK DENGAN WIDGET TSB , SILAHKAN CARI YANG SERUPA.

INGAT SCRIPT TERKADANG SALING MEMATIKAN FUNGSI , DAN INI TAK DAPAT DI PUNGKIRI TERHADAP TIAP TEMPLATE.

SARAN SAYA :
JANGAN BOSAN UNTUK MENGEDIT , AGAR TIAP WIDGET YANG DI KEHENDAKI , DAPAT BEKERJA PENUH .