Adding option for calculating item widths with js

README.md

@@ -62,7 +62,8 @@ Initialize
 	'transitionOpacity': true, // default for opacity animation
 	'buttonSelector': '.menu-button', // default menu button class name
 	'hoverIntent': false, // Change to true for use with hoverIntent plugin
-	'hoverIntentTimeout': 150 // hoverIntent default timeout		
+	'hoverIntentTimeout': 150, // hoverIntent default timeout
+  'calcItemWidths': false // dynamically calcs top level nav item widths	
 
 * * *
 ### Contributors
@@ -83,6 +84,9 @@ Initialize
 * * *
 ### Changelog
 
+#### v.1.2.3 : November 10th, 2013
+* Adding option for [Calculating number of top level nav items with js](https://github.com/indyplanets/flexnav/issues/91) - defaults to false
+
 #### v.1.2.2 : November 5th, 2013
 * [Adding active classes to main menu button and touch-icon](https://github.com/indyplanets/flexnav/issues/67)
 

coffeescripts/jquery.flexnav.coffee

@@ -1,5 +1,5 @@
 ###
-	FlexNav.js 1.2.2
+	FlexNav.js 1.2.3
 
 	Created by Jason Weaver http://jasonweaver.name
 	Released under http://unlicense.org/
@@ -16,7 +16,8 @@ $.fn.flexNav = (options) ->
     'transitionOpacity': true,
     'buttonSelector': '.menu-button',
     'hoverIntent': false,
-    'hoverIntentTimeout': 150
+    'hoverIntentTimeout': 150,
+    'calcItemWidths': false
     options
 
   $nav = $(@)
@@ -30,10 +31,11 @@ $.fn.flexNav = (options) ->
       $(@).addClass("item-with-ul").find("ul").hide()
 
   # Find the number of top level nav items and set widths
-  $top_nav_items = $nav.find('>li')
-  count = $top_nav_items.length
-  nav_width = 100 / count
-  nav_percent = nav_width+"%"
+  if settings.calcItemWidths is true
+    $top_nav_items = $nav.find('>li')
+    count = $top_nav_items.length
+    nav_width = 100 / count
+    nav_percent = nav_width+"%"
 
   # Get the breakpoint set with data-breakpoint
   if $nav.data('breakpoint') then breakpoint = $nav.data('breakpoint')
@@ -82,7 +84,8 @@ $.fn.flexNav = (options) ->
   resizer = ->
     if $(window).width() <= breakpoint
       $nav.removeClass("lg-screen").addClass("sm-screen")
-      $top_nav_items.css('width','100%')
+      if settings.calcItemWidths is true
+        $top_nav_items.css('width','100%')
       selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button'
       $(selector).removeClass('active')
       # Toggle nav menu closed for one pager after anchor clicked
@@ -91,7 +94,8 @@ $.fn.flexNav = (options) ->
       )
     else if $(window).width() > breakpoint
       $nav.removeClass("sm-screen").addClass("lg-screen")
-      $top_nav_items.css('width',nav_percent)
+      if settings.calcItemWidths is true
+        $top_nav_items.css('width',nav_percent)
       # Make sure navigation is closed when going back to large screens
       $nav.removeClass('show')
       if settings.hoverIntent is true

css/flexnav.css

@@ -117,7 +117,8 @@
       float: left;
       display: block;
       background-color: #a6a6a2;
-      overflow: visible; }
+      overflow: visible;
+      width: 20%; }
     .flexnav li a {
       border-left: 1px solid #acaca1;
       border-bottom: none; }

css/page.css

@@ -40,6 +40,9 @@ p {
   line-height: 1.5;
   font-weight: 300; }
 
+strong {
+  font-weight: 700; }
+
 .video-wrap {
   position: relative;
   padding: 18px 0; }

index.html

@@ -20,8 +20,11 @@
         <hgroup class="site-title">
           <h1>FlexNav</h1>
           <h2 class="site-title-sub">A jQuery Plugin for Responsive Menus</h2>
-		  <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://jasonweaver.name/lab/flexiblenavigation" data-via="mrJasonWeaver" data-size="large">Tweet</a>
-		  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+
+
+      <a href="https://twitter.com/share" class="twitter-share-button" data-via="mrJasonWeaver" data-url="http://jasonweaver.name/lab/flexiblenavigation" data-size="large">Tweet</a>
+      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+
         </hgroup>
         <div class="menu-button">Menu</div>
         <nav>
@@ -87,7 +90,9 @@ <h2 class="site-title-sub">A jQuery Plugin for Responsive Menus</h2>
           <div class="article-wrap">
             <div class="block">
               <h2>A Device-Agnostic Approach to Complex Site Navigation</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 touch events with tap targets (the key feature of FlexNav). 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>
+              <p>FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility. Special attention is paid to touch screens using tap targets (the key feature of FlexNav).
+
+                <p><strong>Note:</strong> If you find a bug, please <a href="https://github.com/indyplanets/flexnav/issues">file an issue</a> and note device and browser versions.</p>
   			 <p>
 				 <div class="github-buttons-wrap">
 						<iframe src="http://ghbtns.com/github-btn.html?user=indyplanets&repo=flexnav&type=watch&count=true&size=large"
@@ -122,11 +127,12 @@ <h2>Basic Usage</h2>
 		  <div class="block">
 			  <h2>Options</h2>
 				<p><code>
-				'animationSpeed' : '250', <span> // default drop animation speed</span> <br>
-	  		    'transitionOpacity': true, <span> // default opacity animation</span> <br>
-	  		    'buttonSelector': '.menu-button', <span> // default menu button class</span> <br>
-	  		    'hoverIntent': false, <span> // Use with hoverIntent plugin</span> <br>
-	  		    'hoverIntentTimeout': 150 <span> // hoverIntent default timeout</span> <br>
+				'animationSpeed' : 250, <span> // default drop animation speed</span> <br>
+		    'transitionOpacity': true, <span> // default opacity animation</span> <br>
+		    'buttonSelector': '.menu-button', <span> // default menu button class</span> <br>
+		    'hoverIntent': false, <span> // use with hoverIntent plugin</span> <br>
+		    'hoverIntentTimeout': 150, <span> // hoverIntent default timeout</span> <br>
+        'calcItemWidths': false <span> // dynamically calcs top level nav item widths</span> <br>
 				</code></p>	
             </div>
           </div>
@@ -169,7 +175,7 @@ <h2>Browser Support</h2>
       <div class="container">
         <ul>
           <li>Code by <a href="http://jasonweaver.name">Jason Weaver</a></li>
-          <li><a href="mailto:indyplanets@gmail.com">Contact Me</a></li>
+          <li><a href="https://github.com/indyplanets/flexnav/issues">File a bug</a></li>
 		  <li class="push"><iframe src="http://ghbtns.com/github-btn.html?user=indyplanets&type=follow&count=true&size=large"
   allowtransparency="true" frameborder="0" scrolling="0" width="250" height="30"></iframe></li>
         </ul>

js/jquery.flexnav.js

@@ -1,5 +1,5 @@
 /*
-	FlexNav.js 1.2.2
+	FlexNav.js 1.2.3
 
 	Created by Jason Weaver http://jasonweaver.name
 	Released under http://unlicense.org/
@@ -20,7 +20,8 @@
       'transitionOpacity': true,
       'buttonSelector': '.menu-button',
       'hoverIntent': false,
-      'hoverIntentTimeout': 150
+      'hoverIntentTimeout': 150,
+      'calcItemWidths': false
     }, options);
     $nav = $(this);
     $nav.addClass('with-js');
@@ -32,10 +33,12 @@
         return $(this).addClass("item-with-ul").find("ul").hide();
       }
     });
-    $top_nav_items = $nav.find('>li');
-    count = $top_nav_items.length;
-    nav_width = 100 / count;
-    nav_percent = nav_width + "%";
+    if (settings.calcItemWidths === true) {
+      $top_nav_items = $nav.find('>li');
+      count = $top_nav_items.length;
+      nav_width = 100 / count;
+      nav_percent = nav_width + "%";
+    }
     if ($nav.data('breakpoint')) {
       breakpoint = $nav.data('breakpoint');
     }
@@ -71,15 +74,19 @@
       var selector;
       if ($(window).width() <= breakpoint) {
         $nav.removeClass("lg-screen").addClass("sm-screen");
-        $top_nav_items.css('width', '100%');
+        if (settings.calcItemWidths === true) {
+          $top_nav_items.css('width', '100%');
+        }
         selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
         $(selector).removeClass('active');
         return $('.one-page li a').on('click', function() {
           return $nav.removeClass('show');
         });
       } else if ($(window).width() > breakpoint) {
         $nav.removeClass("sm-screen").addClass("lg-screen");
-        $top_nav_items.css('width', nav_percent);
+        if (settings.calcItemWidths === true) {
+          $top_nav_items.css('width', nav_percent);
+        }
         $nav.removeClass('show');
         if (settings.hoverIntent === true) {
           return $('.item-with-ul').hoverIntent({

sass/flexnav.scss

@@ -156,6 +156,7 @@ $fourth_level: #cbcbc9;
 			display: block;	
 			background-color: #a6a6a2;
 			overflow: visible;
+      width: 20%;
 		}
 		li a {
 			border-left: 1px solid #acaca1;
@@ -217,7 +218,7 @@ $fourth_level: #cbcbc9;
 			float: left;
 			display: block;	
 			background-color: #a6a6a2;	
-			width: 20%;
+      width: 20%;
 			min-height: 50px;
 			overflow: visible;
 		}

sass/page.scss

@@ -44,6 +44,9 @@ p {
 	line-height: 1.5;
 	font-weight: 300;
 }
+strong {
+  font-weight: 700;
+}
 .video-wrap {
   position: relative;
   padding: 18px 0;