» » jQuery Two Tier Sliding Menu Plugin
Senin, 02 Februari 2015

jQuery Two Tier Sliding Menu Plugin

menu slide
masih widget wordpress ke blogger .



telah di uji di ruang posting.

alamat script web alangkah baiknya di ubah


SILAHKAN DIEDIT.
alamat link alangkah bainya di ubah. 

<!-- start: TWO TIER MENU -->
 <br />
<div class="slashc-two-tier-menu">
<ul>
<li>   
    <a href="#">JavaScript</a>
    <ul>
<li><a href="http://codecanyon.net/">Calendars</a></li>
<li><a href="http://codecanyon.net/">Countdowns</a></li>
<li><a href="http://codecanyon.net/">Database Abstractions</a></li>
<li><a href="http://codecanyon.net/">Forms</a></li>
<li><a href="http://codecanyon.net/">Loaders and Uploaders</a></li>
</ul>
</li>
<li>   
    <a href="#">PHP Scripts</a>
    <ul>
<li><a href="http://codecanyon.net/">Images and Media</a></li>
<li><a href="http://codecanyon.net/">Media</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="#">.NET</a>
    <ul>
<li><a href="http://codecanyon.net/">Project Management Tools</a></li>
<li><a href="http://codecanyon.net/">Social Networking</a></li>
<li><a href="http://codecanyon.net/">Shopping Carts</a></li>
</ul>
</li>
<li>   
    <a href="#">Plugins</a>
    <ul>
<li><a href="http://codecanyon.net/">Magento Extensions</a></li>
<li><a href="http://codecanyon.net/">WordPress</a></li>
<li><a href="http://codecanyon.net/">ExpressionEngine</a></li>
<li><a href="http://codecanyon.net/">Joomla</a></li>
</ul>
</li>
<li>   
    <a href="#">Mobile</a>
    <ul>
<li><a href="http://codecanyon.net/">Images and Media</a></li>
<li><a href="http://codecanyon.net/">Media</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/">Just a Link</a></li>
</ul>
</div>



<style> 
div.slashc-two-tier-menu 
{ 
 font: 16px 'trebuchet ms',sans-serif; /* change font style here */
}

div.slashc-two-tier-menu a,
div.slashc-two-tier-menu a:hover,
div.slashc-two-tier-menu a:active
{ 
 text-decoration: none;
 outline: none;
 color: #333;
}

div.slashc-two-tier-menu ul,
div.slashc-two-tier-menu li
{ 
 margin: 0;
 padding: 0;
 list-style: none; 
}

div.slashc-two-tier-menu > ul > li > a
{
 height: 45px;
 line-height: 45px;
 background: #fff url(http://2.s3.envato.com/files/66978990/img/itm_up.jpg) repeat-x 0 0;
 text-indent: 16px;
}
div.slashc-two-tier-menu > ul > li > a:hover
{
 background: #eee url(http://2.s3.envato.com/files/66978990/img/itm_ovr.jpg) repeat-x 0 0;
 color: #178;
}
div.slashc-two-tier-menu > ul > li.selected > a,
div.slashc-two-tier-menu > ul > li.selected > a:hover
{
 background: #18a url(http://2.s3.envato.com/files/66978990/img/itm_sel.jpg) repeat-x 0 0;
 color: #fff;
}
div.slashc-two-tier-menu > ul > li > a > span
{
 background: url(http://2.s3.envato.com/files/66978990/img/icn_plus.gif) no-repeat 295px 50%;
 height: 45px;
}
div.slashc-two-tier-menu > ul > li.selected > a > span
{
 background: url(http://2.s3.envato.com/files/66978990/img/icn_minus.gif) no-repeat 295px 50%;
}

div.slashc-two-tier-menu li > ul > li > a
{
 height: 33px;
 line-height: 32px;
 font-size: 12px;
 background: #fff url(http://2.s3.envato.com/files/66978990/img/subitm_up.jpg) repeat-x 0 0;
 text-indent: 16px;
}
div.slashc-two-tier-menu li > ul > li > a:hover
{
 background: #eee url(http://2.s3.envato.com/files/66978990/img/subitm_ovr.jpg) repeat-x 0 0;
 color: #178;
}

div.slashc-two-tier-menu,
div.slashc-two-tier-menu ul,
div.slashc-two-tier-menu li,
div.slashc-two-tier-menu a,
div.slashc-two-tier-menu span
{
 display: block;
 width: 320px; /* change width here */
 overflow: hidden;
}

</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){typeof c=="undefined"&&(c=!1);return this.each(function(){var d=a(this);if(!d.data("d")){var e=d.children("ul").first(),f,g;e.children("li").has("ul").each(function(){f=a(this),g=f.children("a").first();var d=g.height(),h=f.height(),i=f.hasClass("selected");f.css("height",i?h:d).data("d",{ignr:!1,mul:e,autoCls:c,cls:i?!1:!0,ch:d,oh:h}),g.bind("click.slashcTwoTierMenu",a.proxy(function(c){var d=this.data("d");d.ignr=!0,b._toggleLi(this),d.autoCls&&d.mul.children("li").has("ul").each(function(){var c=a(this),d=c.data("d");d.ignr||b._closeLi(c),d.ignr=!1}),c.preventDefault()},f))}),d.data("d","inited")}})},_openLi:function(a){var b=a.data("d");b.cls&&(b.cls=!1,a.stop().animate({height:b.oh},"fast").addClass("selected"))},_closeLi:function(a){var b=a.data("d");b.cls||(b.cls=!0,a.stop().animate({height:b.ch},"fast").removeClass("selected"))},_toggleLi:function(a){var c=a.data("d");c.cls?b._openLi(a):b._closeLi(a)}};a.fn.slashcTwoTierMenu=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-two-tier-menu").slashcTwoTierMenu(!0)})})(jQuery)
</script>


Tambahkan komentar Komentator

Konversi KodeOOT

Terima kasih telah berkomentar
Langganan: Posting Komentar (Atom)