Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Close menu when nav links onclick/touch by default

  • Loading branch information...
commit be2f13096cdf981b607c28daad44975bc4b195ea 1 parent c264853
Jason Weaver authored
3  README.md
View
@@ -42,4 +42,7 @@ you can change the defaults too
* Changed to jQuery Plugin
* No more Modernizr - Uses a simple function to detect touch screens
+### v.0.3 : July 8th, 2012
+
+* Close menu after click/touch of menu links (makes sense for single page navigation with anchors)
4 index.html
View
@@ -16,7 +16,7 @@ <h1 class="page-title">FlexNav</h1>
<ul id="nav" role="navigation">
<li class="top-level item-with-ul"><a href="" class="link-with-ul">Item #1</a>
<ul class="sub-menu">
- <li><a href="">Sub 1 Item #1</a></li>
+ <li><a href="#content">Sub 1 Item #1</a></li>
<li><a href="">Sub 1 Item #2</a></li>
<li><a href="">Sub 1 Item #3</a></li>
<li><a href="">Sub 1 Item #4</a></li>
@@ -46,7 +46,7 @@ <h1 class="page-title">FlexNav</h1>
</ul>
</nav>
- <section role="main">
+ <section role="main" id="content">
<h1>A Device Agnostic Approach to Complex Site Navigation</h1>
<h2>The Details</h2>
<p>The mock navigation you see above is a mobile-first example of using media queries and javascript to make a decent site menu with drop downs. Special attention is paid to touch screens using click events. This is something I use to test different navigation techniques and may change as I iterate over different solutions to the problem. Basically I want a simple model to build upon when working on sites from scratch.</p>
13 js/jquery.flexnav-min.js
View
@@ -1 +1,12 @@
-(function($){$.fn.flexNav=function(options){var settings=$.extend({'breakpoint':'800','animationSpeed':'fast'},options);var $this=$(this);var resizer=function(){if($(window).width()<settings.breakpoint){$("body").removeClass("lg-screen").addClass("sm-screen")}else{$("body").removeClass("sm-screen").addClass("lg-screen")}if($(window).width()>=settings.breakpoint){$this.show()}};resizer();function is_touch_device(){return!!('ontouchstart'in window)}if(is_touch_device()){$('html').addClass('flexNav-touch')}else{$('html').addClass('flexNav-no-touch')}$('.menu-button').click(function(){$this.slideToggle(settings.animationSpeed)});$('.item-with-ul').click(function(){$(this).find('.sub-menu').slideToggle(settings.animationSpeed)});$(window).on('resize',resizer)}})(jQuery);
+/*global jQuery */
+/*!
+* FlexNav.js 0.3
+*
+* Copyright 2012, Jason Weaver http://jasonweaver.name
+* Released under the WTFPL license
+* http://sam.zoy.org/wtfpl/
+*
+* Date: Sunday July 8
+*/
+
+(function($){$.fn.flexNav=function(options){var settings=$.extend({'breakpoint':'800','animationSpeed':'fast'},options);var $this=$(this);var resizer=function(){if($(window).width()<settings.breakpoint){$("body").removeClass("lg-screen").addClass("sm-screen")}else{$("body").removeClass("sm-screen").addClass("lg-screen")}if($(window).width()>=settings.breakpoint){$this.show()}};resizer();function is_touch_device(){return!!('ontouchstart'in window)}if(is_touch_device()){$('html').addClass('flexNav-touch')}else{$('html').addClass('flexNav-no-touch')}$('.menu-button').click(function(){$this.slideToggle(settings.animationSpeed)});$this.find('a').click(function(){$this.hide()});$('.item-with-ul').click(function(){$(this).find('.sub-menu').slideToggle(settings.animationSpeed)});$(window).on('resize',resizer)}})(jQuery);
11 js/jquery.flexnav.js
View
@@ -1,12 +1,12 @@
/*global jQuery */
/*!
-* FlexNav.js 0.2
+* FlexNav.js 0.3
*
* Copyright 2012, Jason Weaver http://jasonweaver.name
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
-* Date: Thu July 4 01:12:00 2012 -0600
+* Date: Sunday July 8
*/
(function($) {
@@ -50,7 +50,12 @@
$('.menu-button').click(function() {
$this.slideToggle(settings.animationSpeed);
});
-
+
+ // Closes nav menu after links clicked/touched
+ $this.find('a').click(function() {
+ $this.hide();
+ });
+
// Toggle click for sub-menus on touch and or small screens
$('.item-with-ul').click(function() {
$(this).find('.sub-menu').slideToggle(settings.animationSpeed);
Please sign in to comment.
Something went wrong with that request. Please try again.