From c4dcd7182b6a29f916659ffcc457cc7b893ca8df Mon Sep 17 00:00:00 2001 From: John Grabenmeier Date: Wed, 13 Mar 2013 00:20:11 +0100 Subject: [PATCH] Removing all hard coded fragments. Added settings. --- Readme.md | 7 +++- sass/menu.scss | 24 +++++------- scripts/plugin.togglenavigation.js | 51 +++++++++++++++++-------- stylesheets/menu.css | 60 ++++++++++++++---------------- stylesheets/screen.css | 60 ++++++++++++++---------------- 5 files changed, 106 insertions(+), 96 deletions(-) diff --git a/Readme.md b/Readme.md index 0745b2d..6131d26 100644 --- 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 index 4170b55..dcb47b8 100644 --- a/sass/menu.scss +++ b/sass/menu.scss @@ -12,9 +12,6 @@ ul { h3 { display: none; - margin: 0; - padding: 0; - padding: 0 10px; } nav { @@ -22,8 +19,6 @@ ul { ul { list-style: none; - padding: 0; - margin: 0; width: 100%; background:rgba(0,0,0,.2); @include clearfix; @@ -31,8 +26,6 @@ ul { 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 index 6982136..48194bb 100644 --- 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('toggle'); - $('.toggleSub').click(function (){ - $(this).find('~ ul').slideToggle(); + $(settings.wrapper).find('li').has('ul').addClass(settings.childClass).prepend('toggle'); + + $('.' + 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); \ No newline at end of file +}( jQuery )); \ No newline at end of file diff --git a/stylesheets/menu.css b/stylesheets/menu.css index 6f3d289..f2c1956 100644 --- a/stylesheets/menu.css +++ b/stylesheets/menu.css @@ -78,43 +78,33 @@ 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; @@ -122,9 +112,9 @@ ul { 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. @@ -132,7 +122,7 @@ ul { 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; @@ -140,58 +130,64 @@ ul { 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; } diff --git a/stylesheets/screen.css b/stylesheets/screen.css index 60df85b..a435981 100644 --- a/stylesheets/screen.css +++ b/stylesheets/screen.css @@ -83,43 +83,33 @@ 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; @@ -127,9 +117,9 @@ ul { 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. @@ -137,7 +127,7 @@ ul { 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; @@ -145,58 +135,64 @@ ul { 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; }