Creating a menu example with jQuery.easing plugin


Feature: Menu stands in the form of a single picture, but when you look at the website looks like 12 different pictures in this section you need to do unified sections on the example of a single example I adapted myself blog forum communication, etc. now you are the only one to adapt this picture to your own site.

You can find an application that works for example and the codes you will add to your site from the demo link below. You can download a compressed version of the Rar, for example, from a download link.


jQuery and plugin url : 

<script src="" type="text/javascript"></script><script src="jquery.easing.js" type="text/javascript"></script>

 JavaScript : 
<script type="text/javascript"><!-- function main_kwicks(){ $('.kwicks').kwicks({ maxWidth: 190, duration: 800, easing: 'easeOutQuint' }); } function stardust(){ var mysrc = ''; } function starhover(){ var my_kwickitem = $('.kwicks li'); my_kwickitem.mouse(function(){ switch ($(this).attr('id')) { case "jquery_menu1": var my_position = 10; break; case "jquery_menu2": var my_position = 116; break; case "jquery_menu3": var my_position = 222; break; case "jquery_menu4": var my_position = 328; break; case "jquery_menu5": var my_position = 434; break; case "jquery_menu6": var my_position = 540; break; default: var my_position = 0; } particles.css({left: my_position, display:'block'}) }); my_kwickitem.mouseout(function(){particles.css({display:'none'}) }); } function my_smothscroll(){ $('a[href*=#]').click(function() { if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body') .animate({scrollTop: targetOffset}, 700); return false; } } }); } $(document).ready(function(){ main_kwicks(); }); //-->

a{ color:#000000}
BODY  { }

.kwicks  { background-color: #000; list-style-type: none; margin: 0; padding: 0; position: relative; z-index: 2; width: 840px; height: 50px }
.kwicks LI {PADDING: 0px; DISPLAY: block;Z-INDEX: 2; FLOAT: left;OVERFLOW: hidden; WIDTH: 120px; CURSOR: pointer;HEIGHT: 50px}
.kwicks LI A     { background-image: url(image/yesil1.png); background-repeat: no-repeat; text-indent: -9999px; cursor: pointer; display: block; z-index: 2; height: 50px; outline: none medium }
#jquery_menu1 A {BACKGROUND-POSITION: 0px 0px}
#jquery_menu1 A:hover {BACKGROUND-POSITION: 0px -50px}
#jquery_menu1 #aktiv {BACKGROUND-POSITION: 0px -50px}
#jquery_menu2 A {BACKGROUND-POSITION: -190px 0px}
#jquery_menu2 A:hover {BACKGROUND-POSITION: -190px -50px}
#jquery_menu2 #aktiv {BACKGROUND-POSITION: -190px -50px}
#jquery_menu3 A {BACKGROUND-POSITION: -380px -50px}
#jquery_menu3 A:hover {BACKGROUND-POSITION: -380px 0px}
#jquery_menu3 #aktiv {BACKGROUND-POSITION: -380px -50px}
#jquery_menu4 A {BACKGROUND-POSITION: -570px 0px}
#jquery_menu4 A:hover {BACKGROUND-POSITION: -570px -50px}
#jquery_menu4 #aktiv {BACKGROUND-POSITION: -570px -50px}
#jquery_menu5 A {BACKGROUND-POSITION: -760px 0px}
#jquery_menu5 A:hover {BACKGROUND-POSITION: -760px -50px}
#jquery_menu5 #aktiv {BACKGROUND-POSITION: -760px -50px}
#jquery_menu6 A {BACKGROUND-POSITION: -950px 0px}
#jquery_menu6 A:hover {BACKGROUND-POSITION: -950px -50px}
#jquery_menu6 #aktiv {BACKGROUND-POSITION: -950px -50px}


  •  Add in the body tag

Html : 










Leave a Comment

Your email address will not be published.

You may also like