JAVASCRIPT   76

jQuery Slide Menu

Guest on 7th May 2022 02:17:24 AM

  1. /**
  2.  * jQuery Slide Menu
  3.  * -----------------
  4.  * Version 0.3
  5.  * Copyright (c) Chris Nanney
  6.  * http://cnanney.com/journal/code/creating-apples-new-slide-menu-with-jQuery/
  7.  *
  8.  * Licensed under MIT
  9.  * http://www.opensource.org/licenses/mit-license.php
  10.  */
  11.  
  12. var slideMenu = function(options){
  13.  
  14.         // Default values
  15.         var defaults = {
  16.                 div: "#menu-container",
  17.                 controls: "#menu-controls",
  18.                 loader: false,
  19.                 x: 150,
  20.                 y: 150,
  21.                 start: 0,
  22.                 speed: 300,
  23.                 delay: 60,
  24.                 easing: '',
  25.                 easeIn: '',
  26.                 preloadAll: false
  27.         };
  28.        
  29.         var o = options || {};
  30.        
  31.         for (var opt in defaults) o[opt] = (opt in o) ? o[opt] : defaults[opt];
  32.  
  33.         // In case someone types in an easing name wrong
  34.         if (! jQuery.easing.hasOwnProperty(o.easing) && o.easing != '') o.easing = "easeOutBounce";
  35.         if (! jQuery.easing.hasOwnProperty(o.easeIn) && o.easeIn != '') o.easeIn = "easeOutBack";
  36.        
  37.         // In case easing plugin is missing
  38.         if (! jQuery.easing.hasOwnProperty("easeOutBounce")) o.easing = o.easeIn = '';
  39.        
  40.         var v = {
  41.                 middle: jQuery(document).width() / 2,
  42.                 active: o.start,
  43.                 c_w: jQuery(o.div).width(),
  44.                 c_o: jQuery(o.div).offset(),
  45.                 count: 0,
  46.                 x: 0,
  47.                 s_l: jQuery(o.div + " ul:eq(" + o.start + ") li").length,
  48.                 animating: false,
  49.                 loading: {},
  50.                 loop_started: false
  51.         };
  52.        
  53.         this.switchTo = function(to){
  54.                 do_animate(to, v.active);
  55.         }
  56.        
  57.         function do_animate(to, from){
  58.                 if (from < to) out_left(from, to);
  59.                 if (from > to) out_right(from, to);
  60.                 v.active = to;
  61.                 highlight_active();
  62.         }
  63.        
  64.         function in_left(id, go){
  65.                 if (go == false) return;
  66.                 v.count = jQuery(o.div + " ul:eq(" + id + ") li").length;
  67.                 if (v.count > 0){
  68.                         if (jQuery(o.div + " ul:eq(" + id + ") li:eq(0)").offset().left > v.middle){
  69.                                 // Move to left side first if isn't there
  70.                                 jQuery(o.div + " ul:eq(" + id + ") li").css("left", "-" + (v.c_w + o.x) + "px");
  71.                         }
  72.                         jQuery(o.div + " ul:eq(" + id + ") li").each(function(index){
  73.                                 v.x = (v.c_w / 2) + ((v.count / 2) * o.x) - (o.x * index);
  74.                                 jQuery(o.div + " ul:eq(" + id + ") li:eq(" + (v.count - index - 1) + ")").delay((index + 2) * o.delay).animate({left: "+=" + v.x}, o.speed, o.easing, function(){
  75.                                         if (index + 1 == v.count) v.animating = false;
  76.                                 });
  77.                         });
  78.                 }
  79.         }
  80.  
  81.         function in_right(id, go){
  82.                 if (go == false) return;
  83.                 v.count = jQuery(o.div + " ul:eq(" + id + ") li").length;
  84.                 if (v.count > 0){
  85.                         if (jQuery(o.div + " ul:eq(" + id + ") li:eq(0)").offset().left < v.middle){
  86.                                 // Move to right side first if isn't there
  87.                                 jQuery(o.div + " ul:eq(" + id + ") li").css("left", "0");
  88.                         }
  89.                         jQuery(o.div + " ul:eq(" + id + ") li").each(function(index){
  90.                                 v.x = (v.c_w / 2) + ((v.count / 2) * o.x) - (o.x * index);
  91.                                 jQuery(this).delay((index + 1) * o.delay).animate({left: "-=" + v.x}, o.speed, o.easing, function(){
  92.                                         if (index + 1 == v.count) v.animating = false;
  93.                                 });
  94.                         });
  95.                 }
  96.         }
  97.        
  98.         function out_left(id, to){
  99.                 v.animating = true;
  100.                 v.count = jQuery(o.div + " ul:eq(" + id + ") li").length;
  101.                 if (v.count > 0){
  102.                         jQuery(o.div + " ul:eq(" + id + ") li").each(function(index){
  103.                                 v.x = jQuery(this).offset().left - v.c_o.left + o.x;
  104.                                 var last = (index + 1 == v.count) ? true : false;
  105.                                 jQuery(this).delay((index + 1) * o.delay).animate({left: "-=" + v.x}, o.speed, function(){in_right(to, last);});
  106.                         });
  107.                 }
  108.                 else{
  109.                         in_right(to, true);
  110.                 }
  111.         }
  112.  
  113.         function out_right(id, to){
  114.                 v.animating = true;
  115.                 v.count = jQuery(o.div + " ul:eq(" + id + ") li").length;
  116.                 if (v.count > 0){
  117.                         jQuery(o.div + " ul:eq(" + id + ") li").each(function(index){
  118.                                 v.x = v.c_w - jQuery(this).offset().left + v.c_o.left;
  119.                                 var last = (index + 1 == v.count) ? true : false;
  120.                                 jQuery(this).delay((v.count - index) * o.delay).animate({left: "+=" + v.x}, o.speed, function(){in_left(to, last);});
  121.                         });
  122.                 }
  123.                 else{
  124.                         in_left(to, true);
  125.                 }
  126.         }
  127.        
  128.         // Move first list to top center and add load handlers to first set of images
  129.         jQuery(o.div + " ul:eq(" + o.start + ") li").animate({left: "-=" + ((v.c_w / 2) + (o.x / 2)) + "px", top: -o.y}, 0);
  130.        
  131.         // Image load check
  132.         var img_load = o.preloadAll == false ? o.div + " ul:eq(" + o.start + ") img" : o.div + " img";
  133.         jQuery(img_load).each(function(index){
  134.                 v.loading[index] = true;
  135.                 v.loop_started = true;
  136.                 jQuery(this).load(function(){
  137.                         delete v.loading[index];
  138.                 });
  139.                 if (this.complete) jQuery(this).trigger("load");
  140.                 // http://stackoverflow.com/questions/2392410/jquery-loading-images-with-complete-callback/2392448#2392448
  141.         });
  142.        
  143.         // If first set of images is loaded, animate it in
  144.         function try_animate_in(index){
  145.                 var count = 0;
  146.                 for (e in v.loading){count++;}
  147.                 if( v.loop_started == true && count == 0){
  148.                         clearInterval(try_start);
  149.                         // Hide loader
  150.                         if (o.loader != false && o.loader != '') jQuery(o.loader).hide();
  151.                         // Animate in
  152.                         jQuery(o.div + " ul:eq(" + o.start + ") li").each(function(index){
  153.                                 v.x = (o.x / 2) + ((v.s_l / 2) * o.x) - (o.x * (index + 1));
  154.                                 jQuery(this).animate({left: "-=" + v.x, top: 0}, 0, o.easeIn);
  155.                         });
  156.                 }
  157.         }
  158.        
  159.        
  160.         // Highlight active menu button
  161.         function highlight_active(){
  162.                 jQuery(o.controls + " a.active").removeClass("active");
  163.                 jQuery(o.controls + " a:eq(" + v.active + ")").addClass("active");
  164.         }
  165.        
  166.         // Handle menu clicks
  167.         jQuery(o.controls + " a").click(function(e){
  168.                 //e.preventDefault();
  169.                 if (v.animating == false){
  170.                         do_animate(jQuery(this).data("target"), v.active);
  171.                 }
  172.         });
  173.        
  174.         // Update values in case of resize
  175.         window.onresize = function() {
  176.                 v.middle = jQuery(document).width() / 2,
  177.                 v.c_o = jQuery(o.div).offset();
  178.         }
  179.        
  180.         // Keep checking until first set of images is laoded
  181.         var try_start = setInterval(try_animate_in, 50);
  182. }

Raw Paste


Login or Register to edit or fork this paste. It's free.