Removing all hard coded fragments. Added settings.

davidnoh · Mar 12, 2013 · c4dcd71 · c4dcd71
1 parent d824eb6
commit c4dcd71
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 96 deletions.
diff --git a/Readme.md b/Readme.md
@@ -1,7 +1,7 @@
 # Responsive Toggle Menu
-This is a simple responsive toggle navigation using Media Queries, jQuery and Sass / Compass.
+This is a simple responsive toggle navigation with an infinitely hierarchical level navigation using Media Queries, jQuery and Sass / Compass.
 
-***Currently development snapshot***
+***This is a development snapshot***
 
 ## Features
 - Responsive
@@ -10,6 +10,9 @@ This is a simple responsive toggle navigation using Media Queries, jQuery and Sa
 - Infinite hierarchy
 - Toggle and Slide
 
+## Description
+For iPads and smaller Viewports, the navigation will switch to the vertical toggle navigation.
+
 
 ## Demo
 [demo.jooon.de/responsive-toggle-navigation/](http://demo.jooon.de/responsive-toggle-navigation/)
diff --git a/sass/menu.scss b/sass/menu.scss
@@ -12,27 +12,20 @@ ul {
 
 	h3 {
 		display: none;
-		margin: 0;
-		padding: 0;
-		padding: 0 10px;
 	}
 
 	nav {
 		background:rgba(0,0,0,.05);
 
 		ul {
 			list-style: none;
-			padding: 0;
-			margin: 0;
 			width: 100%;
 			background:rgba(0,0,0,.2);
 			@include clearfix;
 		}
 
 		li {
 			float: left;
-			padding: 0;
-			margin: 0;
 			position: relative;
 
 			.toggleSub {
@@ -41,9 +34,6 @@ ul {
 
 			ul {
 				display: none;
-				position: absolute;
-				width: 180px;
-				border-top: 1px solid #fff;
 			}
 		}
 
@@ -56,7 +46,7 @@ ul {
 			text-decoration: none;
 
 			&:hover {
-				background: #474741;
+				background:rgba(0,0,0,.2);
 			}
 		}
 	}
@@ -97,6 +87,11 @@ ul {
 					display: block;
 					float: none;
 					overflow: hidden;
+
+					a {
+						border-right: 0;
+						padding-right: 10%;
+					}
 
 					&.hasChild {
 						a {
@@ -109,8 +104,10 @@ ul {
 								right: 0;
 								float: right;
 								width: 10%;
-								border-top: 1px solid #fff;
-								border-left: 1px solid #fff;
+
+								&.open {
+									background:rgba(0,0,0,.2);
+								}
 							}
 						}
 					}
@@ -119,7 +116,6 @@ ul {
 						display: none;
 						position: static;
 						width: 100%;
-						border-top: 1px solid #fff;
 					}
 
 					&:hover {

diff --git a/scripts/plugin.togglenavigation.js b/scripts/plugin.togglenavigation.js
@@ -1,23 +1,42 @@
-(function($){
-
-	$.fn.toggleNav = function(wrapper) {
-		$(wrapper).find('.toggleMenu, h3').click(function() {
-			$(wrapper).find('nav > ul').slideToggle('fast');
-			$(wrapper).find('.toggleMenu').toggleClass('active');
+
+
+
+
+
+(function ( $ ) {
+
+	$.fn.toggleNav = function( options ) {
+
+		var settings = $.extend({
+			"wrapper": ".toggleNavWrapper",
+			"navToggle": ".toggleMenu, h3",
+			"navToggleActiveClass": "active",
+			"navList": "nav > ul",
+			"animationSpeed": "slow",
+			"childClass": "hasChild",
+			"childToggleClass": "toggleSub",
+			"childToggleTitle": "toggle",
+			"childToggleClassActive": "open",
+			"breakpoint": "768"
+		}, options );
+
+		$(settings.navToggle).click(function() {
+			$(settings.wrapper).find(settings.navList).slideToggle(settings.animationSpeed);
+			$(settings.wrapper).find(settings.navToggle).toggleClass(settings.navToggleActiveClass);
 		});
-
-		$('li').has('ul').addClass('hasChild').prepend('<a href="#toggle" class="toggleSub">toggle</a>');
 
-		$('.toggleSub').click(function (){
-			$(this).find('~ ul').slideToggle();
+		$(settings.wrapper).find('li').has('ul').addClass(settings.childClass).prepend('<a href="#toggle" class="' + settings.childToggleClass + '">toggle</a>');
+
+		$('.' + settings.childToggleClass).click(function (){
+			$(this).toggleClass(settings.childToggleClassActive).find('~ ul').slideToggle();
 			return;
 		});
-
-
+
 		$(window).resize(function(){
-		    if ($(window).width() > 768 ) {
-		      $(wrapper).find('nav ul').removeAttr("style")
-		    }
+			if ($(window).width() > settings.breakpoint ) {
+				$(settings.wrapper).find('ul').removeAttr("style");
+				$(settings.wrapper).find('a.' + settings.childToggleClassActive).removeClass(settings.childToggleClassActive);
+			}
 		});
 	};
-})(jQuery);
+}( jQuery ));
diff --git a/stylesheets/menu.css b/stylesheets/menu.css
@@ -78,120 +78,116 @@ ul {
 /* line 13, ../sass/menu.scss */
 .toggleNavWrapper h3 {
   display: none;
-  margin: 0;
-  padding: 0;
-  padding: 0 10px;
 }
-/* line 20, ../sass/menu.scss */
+/* line 17, ../sass/menu.scss */
 .toggleNavWrapper nav {
   background: rgba(0, 0, 0, 0.05);
 }
-/* line 23, ../sass/menu.scss */
+/* line 20, ../sass/menu.scss */
 .toggleNavWrapper nav ul {
   list-style: none;
-  padding: 0;
-  margin: 0;
   width: 100%;
   background: rgba(0, 0, 0, 0.2);
   overflow: hidden;
   *zoom: 1;
 }
-/* line 32, ../sass/menu.scss */
+/* line 27, ../sass/menu.scss */
 .toggleNavWrapper nav li {
   float: left;
-  padding: 0;
-  margin: 0;
   position: relative;
 }
-/* line 38, ../sass/menu.scss */
+/* line 31, ../sass/menu.scss */
 .toggleNavWrapper nav li .toggleSub {
   display: none;
 }
-/* line 42, ../sass/menu.scss */
+/* line 35, ../sass/menu.scss */
 .toggleNavWrapper nav li ul {
   display: none;
-  position: absolute;
-  width: 180px;
-  border-top: 1px solid white;
 }
-/* line 51, ../sass/menu.scss */
+/* line 41, ../sass/menu.scss */
 .toggleNavWrapper nav a {
   color: #fff;
   display: block;
   padding: 0 40px;
   border-right: 1px solid white;
   text-decoration: none;
 }
-/* line 58, ../sass/menu.scss */
+/* line 48, ../sass/menu.scss */
 .toggleNavWrapper nav a:hover {
-  background: #474741;
+  background: rgba(0, 0, 0, 0.2);
 }
 
 /* In this sample, we are just using the max-width 768px to simplify the code.
    It'll be working on iPhone too.
    Please note, that you have to add special media queries for the specific cases, if you wish so! */
 @media only screen and (max-width: 768px) {
   /* Here again. The important part */
-  /* line 74, ../sass/menu.scss */
+  /* line 64, ../sass/menu.scss */
   .toggleNavWrapper h3 {
     display: block;
     cursor: pointer;
     background: url("../images/icon-menu.png") left no-repeat;
     margin: 0 20px;
     padding: 0 20px;
   }
-  /* line 81, ../sass/menu.scss */
+  /* line 71, ../sass/menu.scss */
   .toggleNavWrapper h3.active {
     background: url("../images/icon-close.png") left no-repeat;
   }
-  /* line 88, ../sass/menu.scss */
+  /* line 78, ../sass/menu.scss */
   .toggleNavWrapper nav ul {
     display: none;
   }
-  /* line 92, ../sass/menu.scss */
+  /* line 82, ../sass/menu.scss */
   .toggleNavWrapper nav.active {
     display: block;
   }
-  /* line 96, ../sass/menu.scss */
+  /* line 86, ../sass/menu.scss */
   .toggleNavWrapper nav li {
     display: block;
     float: none;
     overflow: hidden;
   }
-  /* line 102, ../sass/menu.scss */
+  /* line 91, ../sass/menu.scss */
+  .toggleNavWrapper nav li a {
+    border-right: 0;
+    padding-right: 10%;
+  }
+  /* line 97, ../sass/menu.scss */
   .toggleNavWrapper nav li.hasChild a {
     float: left;
     width: 90%;
   }
-  /* line 106, ../sass/menu.scss */
+  /* line 101, ../sass/menu.scss */
   .toggleNavWrapper nav li.hasChild a.toggleSub {
     display: block;
     position: absolute;
     right: 0;
     float: right;
     width: 10%;
-    border-top: 1px solid white;
-    border-left: 1px solid white;
   }
-  /* line 118, ../sass/menu.scss */
+  /* line 108, ../sass/menu.scss */
+  .toggleNavWrapper nav li.hasChild a.toggleSub.open {
+    background: rgba(0, 0, 0, 0.2);
+  }
+  /* line 115, ../sass/menu.scss */
   .toggleNavWrapper nav li ul {
     display: none;
     position: static;
     width: 100%;
-    border-top: 1px solid white;
   }
-  /* line 126, ../sass/menu.scss */
+  /* line 122, ../sass/menu.scss */
   .toggleNavWrapper nav li:hover ul {
     display: none;
   }
-  /* line 129, ../sass/menu.scss */
+  /* line 125, ../sass/menu.scss */
   .toggleNavWrapper nav li:hover ul li {
     float: none;
     text-align: left;
   }
 
   /* Fallback */
-  /* line 142, ../sass/menu.scss */
+  /* line 138, ../sass/menu.scss */
   .no-js #navigation nav {
     display: block;
   }