Permalink
Browse files

Making it work

  • Loading branch information...
1 parent 3a2e5d9 commit fd32401b17a2a0e09d4d37b9e59e5f3fe49862e6 @nhocki committed Jul 23, 2010
Showing with 34 additions and 31 deletions.
  1. +0 −5 README.rdoc
  2. +9 −8 slidingmenu.js
  3. +25 −18 test.html
View
5 README.rdoc
@@ -4,11 +4,6 @@ When you have a side bar on any website, it will usually get really big. So, sli
= How to use it
-There's a simple rake task that will fetch the results and save them in the database. So, you'll just need to run
-
- rake fetch_rentals
-
-And you're done! Get to your rentals homepage (localhost:3000/rentals)
= TODO
View
17 slidingmenu.js
@@ -3,19 +3,20 @@
var settings = jQuery.extend(
{},
{
- animationSpeed : 'fast'
- slideUpInner: true
+ animationSpeed : 'fast',
+ slideUpInner : true,
+ triggerElement : "h1.menu-title",
+ holderElement : ".menu-items"
},
params
);
- $("h1", this).one('click',function(){
- if(slideUpInner == true){
- $(".menu-items:visible", $(this).parent()).slideUp(animationSpeed);
+ $(settings.triggerElement, this).click(function(){
+ if(settings.slideUpInner == true){
+ $(settings.holderElement+":visible", $(this).parent()).slideUp(settings.animationSpeed);
}else{
- $(".menu-items:visible", $(this).parent()).first().slideUp(animationSpeed);
+ $(settings.holderElement+":visible", $(this).parent()).first().slideUp(settings.animationSpeed);
}
- $(".menu-items:hidden", $(this).parent()).first().slideDown(animationSpeed);
-
+ $(settings.holderElement+":hidden", $(this).parent()).first().slideDown(settings.animationSpeed);
});
};
})(jQuery);
View
43 test.html
@@ -1,55 +1,62 @@
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"> </script>
+ <script type="text/javascript" src="slidingmenu.js"> </script>
<script type="text/javascript">
$(function(){
$(".menu-items").hide();
- $(".menu-holder h1").css("cursor", "pointer").click(function(){
- $(".menu-items:visible", $(this).parent()).slideUp("fast");
- $(".menu-items:hidden", $(this).parent()).first().slideDown("fast");
- });
+ $("h1").css("cursor", "pointer");
+ $(".menu-holder").slidingMenu(
+ {
+ triggerElement: "h1"
+ }
+ );
});
</script>
</head>
<body>
<div class="menu-holder">
- <h1>Titulo Menu 1</h1>
+ <h1>Menu item 1</h1>
<ul class="menu-items">
<li>
<div class="menu-holder">
- <h1>Titulo Menu 2</h1>
+ <h1>Level 2 menu</h1>
<ul class="menu-items">
- <li>HOLAAAAAAA</li>
- <li>HOLLLLL</li>
+ <li>Chunky Bacon!</li>
+ <li>Foo</li>
+
<li>
<div class="menu-holder">
- <h1>Titulo Menu 3</h1>
+ <h1>Level 3 menu</h1>
<ul class="menu-items">
- <li>HOLAAAAAAA</li>
- <li>HOLLLLL</li>
+ <li>Bar</li>
+ <li>Lipsum</li>
</ul>
</div>
</li>
- <li>HOLA, Cómo estás?</li>
+
+ <li>Level 2 item, again</li>
</ul>
</div>
</li>
- <li>HOLA 2</li>
- <li>HOLA 3</li>
+
+ <li>Here, another level 1 item</li>
+ <li>You define the structure</li>
+
<li>
<div class="menu-holder">
- <h1>Titulo Menu 3</h1>
+ <h1>Another Level 2 Menu</h1>
<ul class="menu-items">
- <li>HOLAAAAAAA</li>
- <li>HOLLLLL</li>
+ <li>And it has some items!</li>
+ <li>This could be <em><strong>any</strong></em> html content!</li>
</ul>
</div>
</li>
- <li>HOLA 4</li>
+ <li>One last level 1 item</li>
</ul>
</div>
</body>

0 comments on commit fd32401

Please sign in to comment.