From 5ec362f7a0f44669145681c8e17a2bcd96053ef5 Mon Sep 17 00:00:00 2001 From: Jason Weaver Date: Sun, 10 Nov 2013 11:40:04 -0600 Subject: [PATCH] Adding option for calculating item widths with js --- README.md | 6 +++++- coffeescripts/jquery.flexnav.coffee | 20 ++++++++++++-------- css/flexnav.css | 3 ++- css/page.css | 3 +++ index.html | 24 +++++++++++++++--------- js/jquery.flexnav.js | 23 +++++++++++++++-------- js/jquery.flexnav.min.js | 4 ++-- sass/flexnav.scss | 3 ++- sass/page.scss | 3 +++ 9 files changed, 59 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index 014b3d9..46bd5c2 100644 --- a/README.md +++ b/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) diff --git a/coffeescripts/jquery.flexnav.coffee b/coffeescripts/jquery.flexnav.coffee index 61f6671..a2ed646 100644 --- a/coffeescripts/jquery.flexnav.coffee +++ b/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 diff --git a/css/flexnav.css b/css/flexnav.css index 9d8f883..370748e 100644 --- a/css/flexnav.css +++ b/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; } diff --git a/css/page.css b/css/page.css index a1f2e51..642b921 100644 --- a/css/page.css +++ b/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; } diff --git a/index.html b/index.html index 7a43859..b1e4550 100644 --- a/index.html +++ b/index.html @@ -20,8 +20,11 @@

FlexNav

A jQuery Plugin for Responsive Menus

- - + + + + +
Menu