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.
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).
+
+
diff --git a/js/jquery.flexnav.js b/js/jquery.flexnav.js
index 97e68bf..ac68bdd 100644
--- a/js/jquery.flexnav.js
+++ b/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,7 +74,9 @@
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() {
@@ -79,7 +84,9 @@
});
} 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({
diff --git a/js/jquery.flexnav.min.js b/js/jquery.flexnav.min.js
index 46cce50..89e6c9d 100644
--- a/js/jquery.flexnav.min.js
+++ b/js/jquery.flexnav.min.js
@@ -1,2 +1,2 @@
-/*! flexnav https://github.com/indyplanets/flexnav http://unlicense.org/ 2013-11-05 */
-!function(){var a;a=jQuery,a.fn.flexNav=function(b){var c,d,e,f,g,h,i,j,k,l,m,n;return k=a.extend({animationSpeed:250,transitionOpacity:!0,buttonSelector:".menu-button",hoverIntent:!1,hoverIntentTimeout:150},b),c=a(this),c.addClass("with-js"),k.transitionOpacity===!0&&c.addClass("opacity"),c.find("li").each(function(){return a(this).has("ul").length?a(this).addClass("item-with-ul").find("ul").hide():void 0}),d=c.find(">li"),f=d.length,h=100/f,g=h+"%",c.data("breakpoint")&&(e=c.data("breakpoint")),l=function(){return c.hasClass("lg-screen")===!0?k.transitionOpacity===!0?a(this).find(">ul").addClass("show").stop(!0,!0).animate({height:["toggle","swing"],opacity:"toggle"},k.animationSpeed):a(this).find(">ul").addClass("show").stop(!0,!0).animate({height:["toggle","swing"]},k.animationSpeed):void 0},i=function(){return c.hasClass("lg-screen")===!0&&a(this).find(">ul").hasClass("show")===!0?k.transitionOpacity===!0?a(this).find(">ul").removeClass("show").stop(!0,!0).animate({height:["toggle","swing"],opacity:"toggle"},k.animationSpeed):a(this).find(">ul").removeClass("show").stop(!0,!0).animate({height:["toggle","swing"]},k.animationSpeed):void 0},j=function(){var b;if(a(window).width()<=e)return c.removeClass("lg-screen").addClass("sm-screen"),d.css("width","100%"),b=k.buttonSelector+", "+k.buttonSelector+" .touch-button",a(b).removeClass("active"),a(".one-page li a").on("click",function(){return c.removeClass("show")});if(a(window).width()>e){if(c.removeClass("sm-screen").addClass("lg-screen"),d.css("width",g),c.removeClass("show"),k.hoverIntent===!0)return a(".item-with-ul").hoverIntent({over:l,out:i,timeout:k.hoverIntentTimeout});if(k.hoverIntent===!1)return a(".item-with-ul").on("mouseenter",l).on("mouseleave",i)}},a(k.buttonSelector).data("navEl",c),n=".item-with-ul, "+k.buttonSelector,a(n).append('
▼'),m=k.buttonSelector+", "+k.buttonSelector+" .touch-button",a(m).on("click",function(b){var c,d,e;return a(m).toggleClass("active"),b.preventDefault(),b.stopPropagation(),e=k.buttonSelector,c=a(this).is(e)?a(this):a(this).parent(e),d=c.data("navEl"),d.toggleClass("show")}),a(".touch-button").on("click",function(){var b,d;return b=a(this).parent(".item-with-ul").find(">ul"),d=a(this).parent(".item-with-ul").find(">span.touch-button"),c.hasClass("lg-screen")===!0&&a(this).parent(".item-with-ul").siblings().find("ul.show").removeClass("show").hide(),b.hasClass("show")===!0?(b.removeClass("show").slideUp(k.animationSpeed),d.removeClass("active")):b.hasClass("show")===!1?(b.addClass("show").slideDown(k.animationSpeed),d.addClass("active")):void 0}),c.find(".item-with-ul *").focus(function(){return a(this).parent(".item-with-ul").parent().find(".open").not(this).removeClass("open").hide(),a(this).parent(".item-with-ul").find(">ul").addClass("open").show()}),j(),a(window).on("resize",j)}}.call(this);
\ No newline at end of file
+/*! flexnav https://github.com/indyplanets/flexnav http://unlicense.org/ 2013-11-10 */
+!function(){var a;a=jQuery,a.fn.flexNav=function(b){var c,d,e,f,g,h,i,j,k,l,m,n;return k=a.extend({animationSpeed:250,transitionOpacity:!0,buttonSelector:".menu-button",hoverIntent:!1,hoverIntentTimeout:150,calcItemWidths:!1},b),c=a(this),c.addClass("with-js"),k.transitionOpacity===!0&&c.addClass("opacity"),c.find("li").each(function(){return a(this).has("ul").length?a(this).addClass("item-with-ul").find("ul").hide():void 0}),k.calcItemWidths===!0&&(d=c.find(">li"),f=d.length,h=100/f,g=h+"%"),c.data("breakpoint")&&(e=c.data("breakpoint")),l=function(){return c.hasClass("lg-screen")===!0?k.transitionOpacity===!0?a(this).find(">ul").addClass("show").stop(!0,!0).animate({height:["toggle","swing"],opacity:"toggle"},k.animationSpeed):a(this).find(">ul").addClass("show").stop(!0,!0).animate({height:["toggle","swing"]},k.animationSpeed):void 0},i=function(){return c.hasClass("lg-screen")===!0&&a(this).find(">ul").hasClass("show")===!0?k.transitionOpacity===!0?a(this).find(">ul").removeClass("show").stop(!0,!0).animate({height:["toggle","swing"],opacity:"toggle"},k.animationSpeed):a(this).find(">ul").removeClass("show").stop(!0,!0).animate({height:["toggle","swing"]},k.animationSpeed):void 0},j=function(){var b;if(a(window).width()<=e)return c.removeClass("lg-screen").addClass("sm-screen"),k.calcItemWidths===!0&&d.css("width","100%"),b=k.buttonSelector+", "+k.buttonSelector+" .touch-button",a(b).removeClass("active"),a(".one-page li a").on("click",function(){return c.removeClass("show")});if(a(window).width()>e){if(c.removeClass("sm-screen").addClass("lg-screen"),k.calcItemWidths===!0&&d.css("width",g),c.removeClass("show"),k.hoverIntent===!0)return a(".item-with-ul").hoverIntent({over:l,out:i,timeout:k.hoverIntentTimeout});if(k.hoverIntent===!1)return a(".item-with-ul").on("mouseenter",l).on("mouseleave",i)}},a(k.buttonSelector).data("navEl",c),n=".item-with-ul, "+k.buttonSelector,a(n).append('
▼'),m=k.buttonSelector+", "+k.buttonSelector+" .touch-button",a(m).on("click",function(b){var c,d,e;return a(m).toggleClass("active"),b.preventDefault(),b.stopPropagation(),e=k.buttonSelector,c=a(this).is(e)?a(this):a(this).parent(e),d=c.data("navEl"),d.toggleClass("show")}),a(".touch-button").on("click",function(){var b,d;return b=a(this).parent(".item-with-ul").find(">ul"),d=a(this).parent(".item-with-ul").find(">span.touch-button"),c.hasClass("lg-screen")===!0&&a(this).parent(".item-with-ul").siblings().find("ul.show").removeClass("show").hide(),b.hasClass("show")===!0?(b.removeClass("show").slideUp(k.animationSpeed),d.removeClass("active")):b.hasClass("show")===!1?(b.addClass("show").slideDown(k.animationSpeed),d.addClass("active")):void 0}),c.find(".item-with-ul *").focus(function(){return a(this).parent(".item-with-ul").parent().find(".open").not(this).removeClass("open").hide(),a(this).parent(".item-with-ul").find(">ul").addClass("open").show()}),j(),a(window).on("resize",j)}}.call(this);
\ No newline at end of file
diff --git a/sass/flexnav.scss b/sass/flexnav.scss
index e50c9cc..abb59c5 100644
--- a/sass/flexnav.scss
+++ b/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;
}
diff --git a/sass/page.scss b/sass/page.scss
index 70a9cfb..c741db9 100644
--- a/sass/page.scss
+++ b/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;