Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Updated animation logic

Now the menu container height is resized based on the current ul children
  • Loading branch information...
commit ac93c38dba06667c9f2523516d43b01ee61c92cd 1 parent db90d80
@kdankov authored
View
4 index.html
@@ -16,7 +16,7 @@
<body>
<div id="page_container">
<div id="header">
- <h1>jQuery Plugin SlideMenu</h1>
+ <h1>jQuery SlideMenu</h1>
</div>
<div id="content">
@@ -113,8 +113,6 @@
<li><a href="#"><span>Option 6</span></a></li>
</ul>
-
-
</div>
</div>
</body>
View
57 slidemenu/jquery.slideMenu.js
@@ -3,61 +3,78 @@
slideMenu: function() {
return this.each(function(){
- $(this).wrap('<div class="slide_menu_wrapper" />');
- $(this).parent('.slide_menu_wrapper').wrap('<div class="slide_menu"><div class="slide_menu_inner"></div></div>');
-
+ // Add some divs that are used to hold the list and animate
+ $(this).wrap('<div class="slide_menu"><div class="slide_menu_inner"><div class="slide_menu_wrapper"></div></div></div>');
+
+ // Get refference to the slideMenu holder div
var $slideMenu = $(this).parent().parent().parent().filter(".slide_menu");
+ var $slideMenuWrapper = $slideMenu.find('.slide_menu_wrapper');
+
+ // Get the width of the menu from CSS.
var ulwidth = $slideMenu.width();
var page = 1;
var speed = 300;
+ var link_height = 41;
+ var link_spacing = 10;
+ var sections = $slideMenuWrapper.children("ul").children("li").size();
+ // This is a bit complicated!
+ // Find all the li elements that have uls inside and set class "active". Then find the children links of this li elements and wrap them with a span with class 'holder' after witch insert another span with class "next" in the "holder" span. Go back to the li element and find ul ekements and insert a li header element in the beginning.
$slideMenu.find("ul").parent().filter("li").addClass("parent").children('a').wrap('<span class="holder" />').parent('.holder').append('<span class="next">Next</span>').end().end().find('ul').prepend('<li class="li_header"><span class="holder"><span class="back">Back</span><span class="title"></span></span></li>');
+ // Get all the title span elements and populate them with the text of the a that is the parent ot the current ul
$slideMenu.find("span.title").each(function()
{
$(this).text( $(this).parent().parent().parent().parent().find('> span > a').text() );
});
+ $slideMenuWrapper.css("height", ((link_height + link_spacing) * sections) + link_spacing);
+
+
+ // Let the magic begin. Attaching click event on the spans with class "next" or "back"
$slideMenu.find("li span.back, li span.next").click(function(){
+ // Creatong a reference to the parent li
$objli = $(this).parent().parent();
if ( $(this).hasClass('next') )
{
+
+ // Add class active to the parent li so that the UL inside will be visible
$objli.addClass("active");
-
- $slideMenu.find('.slide_menu_wrapper')
- .animate({ left: -ulwidth * page, }, speed,
+
+ // How many li elements does the next Ul have?
+ sections = $objli.children("ul").children("li").size();
+
+ // Get the slide_menu_wrapper div and prepare to animate the movement.
+ $slideMenuWrapper.animate({ left: -ulwidth * page, height: ((link_height + link_spacing) * sections) + link_spacing }, speed,
function()
{
+ // After animation is over update the page variable
page = page + 1;
}
);
}
else
{
+ // First we update the page variable
page = page - 1;
+
+ // How many li elements does the previous Ul have?
+ sections = $objli.parent().parent().parent().children("li").size();
- $slideMenu.find('.slide_menu_wrapper')
- .animate({ left: -ulwidth*(page-1) }, speed,
- function(){
- $objli.parent().parent().removeClass("active");
- }
- );
-
- if ( page == 1 )
- {
- $slideMenu.find('.slide_menu_wrapper').animate({ left: 1, marginLeft: -1 }, 10);
- }
-
+ $slideMenuWrapper.animate({ left: -ulwidth * (page-1), height: ((link_height + link_spacing) * sections) + link_spacing }, speed,
+ function()
+ {
+ $objli.parent().parent().removeClass("active");
+ }
+ );
}
});
});
-
}
-
});
})(jQuery);
View
5 slidemenu/slidemenu.css
@@ -2,13 +2,14 @@
.slide_menu .slide_menu_wrapper { height: 460px; }
+
.slide_menu { width: 202px; background: url('images/wrapper_bgrd.png') left top no-repeat; }
.slide_menu_inner { background: url('images/wrapper_inner_bgrd.png') bottom left no-repeat; }
-.slide_menu ul { width: 202px; padding: 0; }
+.slide_menu ul { width: 202px; }
.slide_menu { overflow: hidden; }
.slide_menu .slide_menu_wrapper { width: 10000px; position: relative; }
-.slide_menu ul { float: left; position: absolute; top: 0; left: 0; margin: 0; padding: 13px 0 2px 0; clear: both; }
+.slide_menu ul { float: left; position: absolute; top: 0; left: 0; margin: 0; padding: 10px 0 0 0; clear: both; }
.slide_menu ul li { display: block; width: 184px; list-style-type: none; list-style-position: outside; text-indent: 10px; margin: 0 10px 10px 10px; }
.slide_menu ul li .holder { width: 184px; height: 41px; position: relative; }
.slide_menu ul li ul { display: none; left: 100%; clear: both; }
Please sign in to comment.
Something went wrong with that request. Please try again.