Calculate number of top level nav items with js

mrjasonweaver · Nov 5, 2013 · 44bb776 · 44bb776
1 parent abbc35f
commit 44bb776
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ A mobile-first example of using media queries and jQuery to make a decent site m
 * Hover reveal for desktop
 * Keyboard tab input accessibility
 * Use class `.one-page` on the `body`, `.menu-button`, and `ul.flexnav` for single page fixed menu
-* Use with hoverIntent jQuery plugin
+* Use with [hoverIntent jQuery plugin](http://cherne.net/brian/resources/jquery.hoverIntent.html) (not included)
 
 ### Browser Support
 * IE7-10
@@ -83,6 +83,9 @@ Initialize
 * * *
 ### Changelog
 
+#### v.1.2 : November 4th, 2013
+* [Calculate number of top level nav items with js](https://github.com/indyplanets/flexnav/issues/91)
+
 #### v.1.2 : October 6th, 2013
 * Removed touchstart for fast clicks—possible cause of problems in some Android browsers.
 

diff --git a/coffeescripts/jquery.flexnav.coffee b/coffeescripts/jquery.flexnav.coffee
@@ -1,5 +1,5 @@
 ###
-	FlexNav.js 1.2
+	FlexNav.js 1.2.1
 
 	Created by Jason Weaver http://jasonweaver.name
 	Released under http://unlicense.org/
@@ -28,6 +28,13 @@ $.fn.flexNav = (options) ->
   $nav.find("li").each ->
     if $(@).has("ul").length
       $(@).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+"%"
+  $top_nav_items.css('width',nav_percent)
 
   # Get the breakpoint set with data-breakpoint
   if $nav.data('breakpoint') then breakpoint = $nav.data('breakpoint')

diff --git a/css/flexnav.css b/css/flexnav.css
@@ -117,7 +117,6 @@
       float: left;
       display: block;
       background-color: #a6a6a2;
-      width: 20%;
       overflow: visible; }
     .flexnav li a {
       border-left: 1px solid #acaca1;

diff --git a/js/jquery.flexnav.js b/js/jquery.flexnav.js
@@ -1,5 +1,5 @@
 /*
-	FlexNav.js 1.2
+	FlexNav.js 1.2.1
 
 	Created by Jason Weaver http://jasonweaver.name
 	Released under http://unlicense.org/
@@ -14,7 +14,7 @@
   $ = jQuery;
 
   $.fn.flexNav = function(options) {
-    var $nav, breakpoint, resetMenu, resizer, selector, settings, showMenu;
+    var $nav, $top_nav_items, breakpoint, count, nav_percent, nav_width, resetMenu, resizer, selector, settings, showMenu;
     settings = $.extend({
       'animationSpeed': 250,
       'transitionOpacity': true,
@@ -32,6 +32,11 @@
         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 + "%";
+    $top_nav_items.css('width', nav_percent);
     if ($nav.data('breakpoint')) {
       breakpoint = $nav.data('breakpoint');
     }

diff --git a/js/jquery.flexnav.min.js b/js/jquery.flexnav.min.js
diff --git a/package.json b/package.json
@@ -11,4 +11,4 @@
         "grunt-contrib-uglify": "latest",
         "grunt-contrib-watch": "latest"
     }
-}
+}
diff --git a/sass/flexnav.scss b/sass/flexnav.scss
@@ -154,8 +154,7 @@ $fourth_level: #cbcbc9;
 			list-style: none;
 			float: left;
 			display: block;	
-			background-color: #a6a6a2;	
-			width: 20%;
+			background-color: #a6a6a2;
 			overflow: visible;
 		}
 		li a {