Permalink
Browse files

Added an active/hidden state to menu triggers

  • Loading branch information...
1 parent 44338f7 commit 848081eb6ffdee98ac8560882a77b7af132fa246 @nhocki committed Aug 18, 2010
Showing with 144 additions and 119 deletions.
  1. +3 −1 README.rdoc
  2. BIN css/images/tagfill.png
  3. BIN css/images/tagstroke.png
  4. +3 −1 css/styles.css
  5. +59 −38 js/slidingmenu.js
  6. +79 −79 test.html
View
@@ -14,7 +14,9 @@ You can configure some options. Here I'll show the default ones:
slideUpInner : true // if false, the sub-menus will stay visible even if it's parent is hidden
slideDownInner : false // if true, all the navigation levels will be visible when a top level is clicked
triggerElement : ".menu-title" // The element you want to trigger the event
- holderElement : ".menu-items" // The element that holds the actual items
+ holderElement : ".menu-items" // The element that holds the actual items
+ activeClass : "active" // The class element that will be added to the opened menus
+ closedClass : "closed" // The class element that will be added to the hidden menus
The basic HTML structure is quite simple.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -15,5 +15,7 @@ h1 {font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;font-size: 36px;fo
.highlighted {font-size: 20px; padding: 0 5px;}
.menu-holder{background:#CCC;font-family:Tahoma, Geneva, sans-serif;font-size:12px;}
-.menu-title {color: #EEE; text-decoration: none; font-weight: normal; text-shadow: 1px 1px rgba(0,0,0,0.8); font-size: 24px;}
+.menu-title {color: #EEE; text-decoration: none; font-weight: normal; text-shadow: 1px 1px rgba(0,0,0,0.8); font-size: 24px; padding-left: 20px;}
.menu-items{margin: 0px 20px 20px; padding: 10px 0px 0px 10px; border-left: 1px dotted black;}
+.active {background: transparent url(images/tagstroke.png) 0% 55% no-repeat;}
+.closed {background: transparent url(images/tagfill.png) 0% 55% no-repeat;}
View
@@ -1,39 +1,60 @@
-(function($,undefined){
- $.fn.slidingMenu = function(params){
- var settings = jQuery.extend(
- {},
- {
- animationSpeed : 'fast',
- slideUpInner : true,
- slideDownInner : false,
- triggerElement : ".menu-title",
- holderElement : ".menu-items"
- },
- params
- );
- $(settings.triggerElement, this).click(function(event){
-
- if(settings.slideUpInner == true){
-
- $(settings.holderElement+":visible", $(this).parent()).slideUp(settings.animationSpeed);
-
- }else{
-
- var vs = $(settings.holderElement, $(this).parent()).first();
- if( vs.is(":visible") ) vs.slideUp(settings.animationSpeed);
- }
-
- if(settings.slideDownInner == false){
-
- var ho = $(settings.holderElement, $(this).parent()).first();
- if( ho.is(":hidden") ) ho.slideDown(settings.animationSpeed);
-
- }else{
-
- $(settings.holderElement+":hidden", $(this).parent()).slideDown(settings.animationSpeed);
-
- }
- return false;
- });
- };
+(function($,undefined){
+ $.fn.slidingMenu = function(params){
+ var settings = jQuery.extend(
+ {},
+ {
+ animationSpeed : 'fast',
+ slideUpInner : true,
+ slideDownInner : false,
+ triggerElement : ".menu-title",
+ holderElement : ".menu-items",
+ activeClass: "active",
+ closedClass: "closed"
+ },
+ params
+ );
+
+ var activeClass = settings.activeClass;
+ var closedClass = settings.closedClass;
+
+ $(settings.triggerElement).addClass(closedClass);
+
+ $(settings.triggerElement, this).click(function(event){
+
+ var $trigger = $(this);
+
+ if(settings.slideUpInner == true){
+
+ $(settings.triggerElement, $(this).parent()).removeClass(activeClass).addClass(closedClass);
+ $(settings.holderElement+":visible", $(this).parent()).slideUp(settings.animationSpeed);
+
+ }else{
+
+ var vs = $(settings.holderElement, $(this).parent()).first();
+ if( vs.is(":visible") ){
+ $trigger.removeClass(activeClass).addClass(closedClass);
+ vs.slideUp(settings.animationSpeed);
+ }
+
+ }
+
+
+ if(settings.slideDownInner == false){
+
+ var ho = $(settings.holderElement, $(this).parent()).first();
+ if( ho.is(":hidden") ){
+ $trigger.removeClass(closedClass).addClass(activeClass);
+ ho.slideDown(settings.animationSpeed);
+ }
+
+ }else{
+
+
+ $(settings.triggerElement, $(this).parent()).removeClass(closedClass).addClass(activeClass);
+ $(settings.holderElement+":hidden", $(this).parent()).slideDown(settings.animationSpeed);
+
+ }
+ return false;
+ });
+ };
})(jQuery);
View
@@ -1,79 +1,79 @@
-<html>
-<head>
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"> </script>
- <script type="text/javascript" src="js/slidingmenu.js"> </script>
- <script type="text/javascript">
- $(function(){
- $(".menu-items").hide();
- $(".menu-holder").slidingMenu();
- });
- </script>
- <link rel="stylesheet" href="css/styles.css" type="text/css" charset="utf-8">
-</head>
-<body>
-
- <div class="github-ribbon">
- <a href="http://github.com/nhocki" alt="Fork me on GitHub">
- <img src="images/github.png" alt="Fork me on GitHub"/>
- </a>
- </div>
-
- <div class="content">
- <h1>Menu Examples</h1>
- <h3>Simple Layout & Default Options</h3>
-
- <div class="menu-holder example" id="main">
-
- <a class="menu-title" href="#">Menu item 1</a>
- <p>You can have html that won't display/hide the items.</p>
- <ul class="menu-items">
- <li>
- <div class="menu-holder">
- <a class="menu-title" href="#">Level 2 Menu</a>
- <ul class="menu-items lvl3">
- <li>Chunky Bacon!</li>
- <li>Foo</li>
-
- <li>
-
- <div class="menu-holder">
- <a class="menu-title" href="#">Level 3 Menu</a>
- <ul class="menu-items">
- <li>Bar</li>
- <li>Lipsum</li>
- </ul>
- </div>
-
- </li>
-
- <li>Level 2 item, again</li>
- </ul>
- </div>
- </li>
-
- <li>Here, another level 1 item</li>
- <li>You define the structure</li>
- <li>And this can be <span class="highlighted">any</span> html content!</li>
-
- <li>
-
- <div class="menu-holder">
- <a class="menu-title" href="#">Another Level 2 Menu</a>
- <ul class="menu-items">
- <li>And it has some items!</li>
- <li>Remember! <em>This</em> could be <em><strong>any</strong></em> html content!</li>
- </ul>
- </div>
-
- </li>
- </ul>
- </div>
- </div>
- <div class="clear"> </div>
-
- <div class="footer">
-
- </div>
-
-</body>
-</html>
+<html>
+<head>
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"> </script>
+ <script type="text/javascript" src="js/slidingmenu.js"> </script>
+ <script type="text/javascript">
+ $(function(){
+ $(".menu-items").hide();
+ $(".menu-holder").slidingMenu({slideDownInner: false});
+ });
+ </script>
+ <link rel="stylesheet" href="css/styles.css" type="text/css" charset="utf-8">
+</head>
+<body>
+
+ <div class="github-ribbon">
+ <a href="http://github.com/nhocki" alt="Fork me on GitHub">
+ <img src="images/github.png" alt="Fork me on GitHub"/>
+ </a>
+ </div>
+
+ <div class="content">
+ <h1>Menu Examples</h1>
+ <h3>Simple Layout & Default Options</h3>
+
+ <div class="menu-holder example" id="main">
+
+ <a class="menu-title" href="#">Menu item 1</a>
+ <p>You can have html that won't display/hide the items.</p>
+ <ul class="menu-items">
+ <li>
+ <div class="menu-holder">
+ <a class="menu-title" href="#">Level 2 Menu</a>
+ <ul class="menu-items lvl3">
+ <li>Chunky Bacon!</li>
+ <li>Foo</li>
+
+ <li>
+
+ <div class="menu-holder">
+ <a class="menu-title" href="#">Level 3 Menu</a>
+ <ul class="menu-items">
+ <li>Bar</li>
+ <li>Lipsum</li>
+ </ul>
+ </div>
+
+ </li>
+
+ <li>Level 2 item, again</li>
+ </ul>
+ </div>
+ </li>
+
+ <li>Here, another level 1 item</li>
+ <li>You define the structure</li>
+ <li>And this can be <span class="highlighted">any</span> html content!</li>
+
+ <li>
+
+ <div class="menu-holder">
+ <a class="menu-title" href="#">Another Level 2 Menu</a>
+ <ul class="menu-items">
+ <li>And it has some items!</li>
+ <li>Remember! <em>This</em> could be <em><strong>any</strong></em> html content!</li>
+ </ul>
+ </div>
+
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="clear"> </div>
+
+ <div class="footer">
+
+ </div>
+
+</body>
+</html>

0 comments on commit 848081e

Please sign in to comment.