diff --git a/css/flexnav.css b/css/flexnav.css index 4c94c70..ae12b40 100644 --- a/css/flexnav.css +++ b/css/flexnav.css @@ -98,6 +98,16 @@ position: relative; top: 1em; color: #666; } + +/* edge detect fix */ +.flexnav li ul li.edge > ul { + left: auto; + right: 97%; } + +.flexnav li.edge > ul { + left: auto; + right: 0; } +/* end edge detect */ @media all and (min-width: 800px) { body.one-page { diff --git a/js/jquery.flexnav.js b/js/jquery.flexnav.js index d8f6bf9..1a0b240 100644 --- a/js/jquery.flexnav.js +++ b/js/jquery.flexnav.js @@ -14,7 +14,7 @@ $ = jQuery; $.fn.flexNav = function(options) { - var $nav, $top_nav_items, breakpoint, count, nav_percent, nav_width, resetMenu, resizer, settings, showMenu, toggle_selector, touch_selector; + var $nav, $top_nav_items, breakpoint, count, nav_percent, nav_width, resetMenu, resizer, settings, showMenu, toggle_selector, touch_selector, edgeDetect; settings = $.extend({ 'animationSpeed': 250, 'transitionOpacity': true, @@ -22,7 +22,8 @@ 'hoverIntent': false, 'hoverIntentTimeout': 150, 'calcItemWidths': false, - 'hover': true + 'hover': true, + 'detectEdges': true }, options); $nav = $(this); $nav.addClass('with-js'); @@ -40,6 +41,33 @@ nav_width = 100 / count; nav_percent = nav_width + "%"; } + /* Edge Detect */ + if (settings.detectEdges === true) { + $(function () { + + $('.item-with-ul').on('mouseenter mouseleave', function (e) { + var elm = $('ul:first', this); + var off = elm.offset(); + var l = off.left; + var w = elm.width(); + var docW = $(window).width(); + + var isEntirelyVisible = (l + w <= docW); + + if (!isEntirelyVisible) { + $(this).addClass('edge'); + } else { + $(this).delay(260).queue(function () { + $(this).removeClass('edge'); + $(this).dequeue(); + }); + } + }); + + + }); + } + /* End Edge Detect */ if ($nav.data('breakpoint')) { breakpoint = $nav.data('breakpoint'); }