Skip to content
This repository was archived by the owner on Sep 9, 2021. It is now read-only.

Commit ac93c38

Browse files
kdankovkdankov
committed
Updated animation logic
Now the menu container height is resized based on the current ul children
1 parent db90d80 commit ac93c38

File tree

3 files changed

+41
-25
lines changed

3 files changed

+41
-25
lines changed

‎index.html

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<body>
1717
<div id="page_container">
1818
<div id="header">
19-
<h1>jQuery Plugin SlideMenu</h1>
19+
<h1>jQuery SlideMenu</h1>
2020
</div>
2121
<div id="content">
2222

@@ -113,8 +113,6 @@ <h1>jQuery Plugin SlideMenu</h1>
113113
<li><a href="#"><span>Option 6</span></a></li>
114114
</ul>
115115

116-
117-
118116
</div>
119117
</div>
120118
</body>

‎slidemenu/jquery.slideMenu.js

+37-20
Original file line numberDiff line numberDiff line change
@@ -3,61 +3,78 @@
33
slideMenu: function() {
44
return this.each(function(){
55

6-
$(this).wrap('<div class="slide_menu_wrapper" />');
7-
$(this).parent('.slide_menu_wrapper').wrap('<div class="slide_menu"><div class="slide_menu_inner"></div></div>');
8-
6+
// Add some divs that are used to hold the list and animate
7+
$(this).wrap('<div class="slide_menu"><div class="slide_menu_inner"><div class="slide_menu_wrapper"></div></div></div>');
8+
9+
// Get refference to the slideMenu holder div
910
var $slideMenu = $(this).parent().parent().parent().filter(".slide_menu");
11+
var $slideMenuWrapper = $slideMenu.find('.slide_menu_wrapper');
12+
13+
// Get the width of the menu from CSS.
1014
var ulwidth = $slideMenu.width();
1115
var page = 1;
1216
var speed = 300;
17+
var link_height = 41;
18+
var link_spacing = 10;
19+
var sections = $slideMenuWrapper.children("ul").children("li").size();
1320

21+
// This is a bit complicated!
22+
// 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.
1423
$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>');
1524

25+
// Get all the title span elements and populate them with the text of the a that is the parent ot the current ul
1626
$slideMenu.find("span.title").each(function()
1727
{
1828
$(this).text( $(this).parent().parent().parent().parent().find('> span > a').text() );
1929
});
2030

31+
$slideMenuWrapper.css("height", ((link_height + link_spacing) * sections) + link_spacing);
32+
33+
34+
// Let the magic begin. Attaching click event on the spans with class "next" or "back"
2135
$slideMenu.find("li span.back, li span.next").click(function(){
2236

37+
// Creatong a reference to the parent li
2338
$objli = $(this).parent().parent();
2439

2540
if ( $(this).hasClass('next') )
2641
{
42+
43+
// Add class active to the parent li so that the UL inside will be visible
2744
$objli.addClass("active");
28-
29-
$slideMenu.find('.slide_menu_wrapper')
30-
.animate({ left: -ulwidth * page, }, speed,
45+
46+
// How many li elements does the next Ul have?
47+
sections = $objli.children("ul").children("li").size();
48+
49+
// Get the slide_menu_wrapper div and prepare to animate the movement.
50+
$slideMenuWrapper.animate({ left: -ulwidth * page, height: ((link_height + link_spacing) * sections) + link_spacing }, speed,
3151
function()
3252
{
53+
// After animation is over update the page variable
3354
page = page + 1;
3455
}
3556
);
3657
}
3758
else
3859
{
60+
// First we update the page variable
3961
page = page - 1;
62+
63+
// How many li elements does the previous Ul have?
64+
sections = $objli.parent().parent().parent().children("li").size();
4065

41-
$slideMenu.find('.slide_menu_wrapper')
42-
.animate({ left: -ulwidth*(page-1) }, speed,
43-
function(){
44-
$objli.parent().parent().removeClass("active");
45-
}
46-
);
47-
48-
if ( page == 1 )
49-
{
50-
$slideMenu.find('.slide_menu_wrapper').animate({ left: 1, marginLeft: -1 }, 10);
51-
}
52-
66+
$slideMenuWrapper.animate({ left: -ulwidth * (page-1), height: ((link_height + link_spacing) * sections) + link_spacing }, speed,
67+
function()
68+
{
69+
$objli.parent().parent().removeClass("active");
70+
}
71+
);
5372
}
5473

5574
});
5675

5776
});
58-
5977
}
60-
6178
});
6279
})(jQuery);
6380

‎slidemenu/slidemenu.css

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22

33

44
.slide_menu .slide_menu_wrapper { height: 460px; }
5+
56
.slide_menu { width: 202px; background: url('images/wrapper_bgrd.png') left top no-repeat; }
67
.slide_menu_inner { background: url('images/wrapper_inner_bgrd.png') bottom left no-repeat; }
7-
.slide_menu ul { width: 202px; padding: 0; }
8+
.slide_menu ul { width: 202px; }
89

910
.slide_menu { overflow: hidden; }
1011
.slide_menu .slide_menu_wrapper { width: 10000px; position: relative; }
11-
.slide_menu ul { float: left; position: absolute; top: 0; left: 0; margin: 0; padding: 13px 0 2px 0; clear: both; }
12+
.slide_menu ul { float: left; position: absolute; top: 0; left: 0; margin: 0; padding: 10px 0 0 0; clear: both; }
1213
.slide_menu ul li { display: block; width: 184px; list-style-type: none; list-style-position: outside; text-indent: 10px; margin: 0 10px 10px 10px; }
1314
.slide_menu ul li .holder { width: 184px; height: 41px; position: relative; }
1415
.slide_menu ul li ul { display: none; left: 100%; clear: both; }

0 commit comments

Comments
 (0)