From 3bba4a7f68da63b2c121552150cf0cac540bdcfa Mon Sep 17 00:00:00 2001 From: Ove Klykken Date: Thu, 31 Jul 2014 13:36:51 -0400 Subject: [PATCH] new files for dropdown --- css/superfish.css | 113 ++++++++++++++++++++ js/hoverIntent.js | 114 ++++++++++++++++++++ js/superfish.js | 257 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 484 insertions(+) create mode 100755 css/superfish.css create mode 100755 js/hoverIntent.js create mode 100755 js/superfish.js diff --git a/css/superfish.css b/css/superfish.css new file mode 100755 index 0000000..3d623c5 --- /dev/null +++ b/css/superfish.css @@ -0,0 +1,113 @@ +/*** ESSENTIAL STYLES ***/ +.sf-menu, .sf-menu * { + margin: 0; + padding: 0; + list-style: none; +} +.sf-menu li { + position: relative; +} +.sf-menu ul { + position: absolute; + display: none; + top: 100%; + left: 0; + z-index: 99; +} +.sf-menu > li { + float: left; +} +.sf-menu li:hover > ul, +.sf-menu li.sfHover > ul { + display: block; +} + +.sf-menu a { + display: block; + position: relative; +} +.sf-menu ul ul { + top: 0; + left: 100%; +} + + +/*** DEMO SKIN ***/ +.sf-menu { + float: left; + margin-bottom: 1em; +} +.sf-menu ul { + box-shadow: 2px 2px 6px rgba(0,0,0,.2); + min-width: 12em; /* allow long menu items to determine submenu width */ + *width: 12em; /* no auto sub width for IE7, see white-space comment below */ +} +.sf-menu ul a { + border-left: 1px solid #fff; + border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */ + border-top: 1px solid rgba(255,255,255,.5); + padding: .75em 1em; + text-decoration: none; + zoom: 1; /* IE7 */ +} +.sf-menu a { + color: #13a; +} +.sf-menu ul li { + background: #BDD2FF; + white-space: nowrap; /* no need for Supersubs plugin */ + *white-space: normal; /* ...unless you support IE7 (let it wrap) */ + -webkit-transition: background .2s; + transition: background .2s; +} +.sf-menu ul li { + background: #AABDE6; +} +.sf-menu ul ul li { + background: #9AAEDB; +} +.sf-menu ul li:hover, +.sf-menu ul li.sfHover { + background: #CFDEFF; + /* only transition out, not in */ + -webkit-transition: none; + transition: none; +} + +/*** arrows (for all except IE7) **/ +.sf-arrows .sf-with-ul { + padding-right: 2.5em; + *padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */ +} +/* styling for both css and generated arrows */ +.sf-arrows .sf-with-ul:after { + content: ''; + position: absolute; + top: 50%; + right: 1em; + margin-top: -3px; + height: 0; + width: 0; + /* order of following 3 rules important for fallbacks to work */ + border: 5px solid transparent; + border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ + border-top-color: rgba(255,255,255,.5); +} +.sf-arrows > li > .sf-with-ul:focus:after, +.sf-arrows > li:hover > .sf-with-ul:after, +.sf-arrows > .sfHover > .sf-with-ul:after { + border-top-color: white; /* IE8 fallback colour */ +} +/* styling for right-facing arrows */ +.sf-arrows ul .sf-with-ul:after { + margin-top: -5px; + margin-right: -3px; + border-color: transparent; + border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ + border-left-color: rgba(255,255,255,.5); +} +.sf-arrows ul li > .sf-with-ul:focus:after, +.sf-arrows ul li:hover > .sf-with-ul:after, +.sf-arrows ul .sfHover > .sf-with-ul:after { + border-left-color: white; +} diff --git a/js/hoverIntent.js b/js/hoverIntent.js new file mode 100755 index 0000000..cbe3ae7 --- /dev/null +++ b/js/hoverIntent.js @@ -0,0 +1,114 @@ +/** + * hoverIntent is similar to jQuery's built-in "hover" method except that + * instead of firing the handlerIn function immediately, hoverIntent checks + * to see if the user's mouse has slowed down (beneath the sensitivity + * threshold) before firing the event. The handlerOut function is only + * called after a matching handlerIn. + * + * hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+ + * http://cherne.net/brian/resources/jquery.hoverIntent.html + * + * You may use hoverIntent under the terms of the MIT license. Basically that + * means you are free to use hoverIntent as long as this header is left intact. + * Copyright 2007, 2013 Brian Cherne + * + * // basic usage ... just like .hover() + * .hoverIntent( handlerIn, handlerOut ) + * .hoverIntent( handlerInOut ) + * + * // basic usage ... with event delegation! + * .hoverIntent( handlerIn, handlerOut, selector ) + * .hoverIntent( handlerInOut, selector ) + * + * // using a basic configuration object + * .hoverIntent( config ) + * + * @param handlerIn function OR configuration object + * @param handlerOut function OR selector for delegation OR undefined + * @param selector selector OR undefined + * @author Brian Cherne + **/ +(function($) { + $.fn.hoverIntent = function(handlerIn,handlerOut,selector) { + + // default configuration values + var cfg = { + interval: 100, + sensitivity: 7, + timeout: 0 + }; + + if ( typeof handlerIn === "object" ) { + cfg = $.extend(cfg, handlerIn ); + } else if ($.isFunction(handlerOut)) { + cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } ); + } else { + cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } ); + } + + // instantiate variables + // cX, cY = current X and Y position of mouse, updated by mousemove event + // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval + var cX, cY, pX, pY; + + // A private function for getting mouse position + var track = function(ev) { + cX = ev.pageX; + cY = ev.pageY; + }; + + // A private function for comparing current and previous mouse position + var compare = function(ev,ob) { + ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); + // compare mouse positions to see if they've crossed the threshold + if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) { + $(ob).off("mousemove.hoverIntent",track); + // set hoverIntent state to true (so mouseOut can be called) + ob.hoverIntent_s = 1; + return cfg.over.apply(ob,[ev]); + } else { + // set previous coordinates for next time + pX = cX; pY = cY; + // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs) + ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval ); + } + }; + + // A private function for delaying the mouseOut function + var delay = function(ev,ob) { + ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); + ob.hoverIntent_s = 0; + return cfg.out.apply(ob,[ev]); + }; + + // A private function for handling mouse 'hovering' + var handleHover = function(e) { + // copy objects to be passed into t (required for event object to be passed in IE) + var ev = jQuery.extend({},e); + var ob = this; + + // cancel hoverIntent timer if it exists + if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); } + + // if e.type == "mouseenter" + if (e.type == "mouseenter") { + // set "previous" X and Y position based on initial entry point + pX = ev.pageX; pY = ev.pageY; + // update "current" X and Y position based on mousemove + $(ob).on("mousemove.hoverIntent",track); + // start polling interval (self-calling timeout) to compare mouse coordinates over time + if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );} + + // else e.type == "mouseleave" + } else { + // unbind expensive mousemove event + $(ob).off("mousemove.hoverIntent",track); + // if hoverIntent state is true, then call the mouseOut function after the specified delay + if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );} + } + }; + + // listen for mouseenter and mouseleave + return this.on({'mouseenter.hoverIntent':handleHover,'mouseleave.hoverIntent':handleHover}, cfg.selector); + }; +})(jQuery); \ No newline at end of file diff --git a/js/superfish.js b/js/superfish.js new file mode 100755 index 0000000..9f4267f --- /dev/null +++ b/js/superfish.js @@ -0,0 +1,257 @@ +/* + * jQuery Superfish Menu Plugin - v1.7.4 + * Copyright (c) 2013 Joel Birch + * + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + */ + +;(function ($) { + "use strict"; + + var methods = (function () { + // private properties and methods go here + var c = { + bcClass: 'sf-breadcrumb', + menuClass: 'sf-js-enabled', + anchorClass: 'sf-with-ul', + menuArrowClass: 'sf-arrows' + }, + ios = (function () { + var ios = /iPhone|iPad|iPod/i.test(navigator.userAgent); + if (ios) { + // iOS clicks only bubble as far as body children + $(window).load(function () { + $('body').children().on('click', $.noop); + }); + } + return ios; + })(), + wp7 = (function () { + var style = document.documentElement.style; + return ('behavior' in style && 'fill' in style && /iemobile/i.test(navigator.userAgent)); + })(), + toggleMenuClasses = function ($menu, o) { + var classes = c.menuClass; + if (o.cssArrows) { + classes += ' ' + c.menuArrowClass; + } + $menu.toggleClass(classes); + }, + setPathToCurrent = function ($menu, o) { + return $menu.find('li.' + o.pathClass).slice(0, o.pathLevels) + .addClass(o.hoverClass + ' ' + c.bcClass) + .filter(function () { + return ($(this).children(o.popUpSelector).hide().show().length); + }).removeClass(o.pathClass); + }, + toggleAnchorClass = function ($li) { + $li.children('a').toggleClass(c.anchorClass); + }, + toggleTouchAction = function ($menu) { + var touchAction = $menu.css('ms-touch-action'); + touchAction = (touchAction === 'pan-y') ? 'auto' : 'pan-y'; + $menu.css('ms-touch-action', touchAction); + }, + applyHandlers = function ($menu, o) { + var targets = 'li:has(' + o.popUpSelector + ')'; + if ($.fn.hoverIntent && !o.disableHI) { + $menu.hoverIntent(over, out, targets); + } + else { + $menu + .on('mouseenter.superfish', targets, over) + .on('mouseleave.superfish', targets, out); + } + var touchevent = 'MSPointerDown.superfish'; + if (!ios) { + touchevent += ' touchend.superfish'; + } + if (wp7) { + touchevent += ' mousedown.superfish'; + } + $menu + .on('focusin.superfish', 'li', over) + .on('focusout.superfish', 'li', out) + .on(touchevent, 'a', o, touchHandler); + }, + touchHandler = function (e) { + var $this = $(this), + $ul = $this.siblings(e.data.popUpSelector); + + if ($ul.length > 0 && $ul.is(':hidden')) { + $this.one('click.superfish', false); + if (e.type === 'MSPointerDown') { + $this.trigger('focus'); + } else { + $.proxy(over, $this.parent('li'))(); + } + } + }, + over = function () { + var $this = $(this), + o = getOptions($this); + clearTimeout(o.sfTimer); + $this.siblings().superfish('hide').end().superfish('show'); + }, + out = function () { + var $this = $(this), + o = getOptions($this); + if (ios) { + $.proxy(close, $this, o)(); + } + else { + clearTimeout(o.sfTimer); + o.sfTimer = setTimeout($.proxy(close, $this, o), o.delay); + } + }, + close = function (o) { + o.retainPath = ($.inArray(this[0], o.$path) > -1); + this.superfish('hide'); + + if (!this.parents('.' + o.hoverClass).length) { + o.onIdle.call(getMenu(this)); + if (o.$path.length) { + $.proxy(over, o.$path)(); + } + } + }, + getMenu = function ($el) { + return $el.closest('.' + c.menuClass); + }, + getOptions = function ($el) { + return getMenu($el).data('sf-options'); + }; + + return { + // public methods + hide: function (instant) { + if (this.length) { + var $this = this, + o = getOptions($this); + if (!o) { + return this; + } + var not = (o.retainPath === true) ? o.$path : '', + $ul = $this.find('li.' + o.hoverClass).add(this).not(not).removeClass(o.hoverClass).children(o.popUpSelector), + speed = o.speedOut; + + if (instant) { + $ul.show(); + speed = 0; + } + o.retainPath = false; + o.onBeforeHide.call($ul); + $ul.stop(true, true).animate(o.animationOut, speed, function () { + var $this = $(this); + o.onHide.call($this); + }); + } + return this; + }, + show: function () { + var o = getOptions(this); + if (!o) { + return this; + } + var $this = this.addClass(o.hoverClass), + $ul = $this.children(o.popUpSelector); + + o.onBeforeShow.call($ul); + $ul.stop(true, true).animate(o.animation, o.speed, function () { + o.onShow.call($ul); + }); + return this; + }, + destroy: function () { + return this.each(function () { + var $this = $(this), + o = $this.data('sf-options'), + $hasPopUp; + if (!o) { + return false; + } + $hasPopUp = $this.find(o.popUpSelector).parent('li'); + clearTimeout(o.sfTimer); + toggleMenuClasses($this, o); + toggleAnchorClass($hasPopUp); + toggleTouchAction($this); + // remove event handlers + $this.off('.superfish').off('.hoverIntent'); + // clear animation's inline display style + $hasPopUp.children(o.popUpSelector).attr('style', function (i, style) { + return style.replace(/display[^;]+;?/g, ''); + }); + // reset 'current' path classes + o.$path.removeClass(o.hoverClass + ' ' + c.bcClass).addClass(o.pathClass); + $this.find('.' + o.hoverClass).removeClass(o.hoverClass); + o.onDestroy.call($this); + $this.removeData('sf-options'); + }); + }, + init: function (op) { + return this.each(function () { + var $this = $(this); + if ($this.data('sf-options')) { + return false; + } + var o = $.extend({}, $.fn.superfish.defaults, op), + $hasPopUp = $this.find(o.popUpSelector).parent('li'); + o.$path = setPathToCurrent($this, o); + + $this.data('sf-options', o); + + toggleMenuClasses($this, o); + toggleAnchorClass($hasPopUp); + toggleTouchAction($this); + applyHandlers($this, o); + + $hasPopUp.not('.' + c.bcClass).superfish('hide', true); + + o.onInit.call(this); + }); + } + }; + })(); + + $.fn.superfish = function (method, args) { + if (methods[method]) { + return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); + } + else if (typeof method === 'object' || ! method) { + return methods.init.apply(this, arguments); + } + else { + return $.error('Method ' + method + ' does not exist on jQuery.fn.superfish'); + } + }; + + $.fn.superfish.defaults = { + popUpSelector: 'ul,.sf-mega', // within menu context + hoverClass: 'sfHover', + pathClass: 'overrideThisToUse', + pathLevels: 1, + delay: 800, + animation: {opacity: 'show'}, + animationOut: {opacity: 'hide'}, + speed: 'normal', + speedOut: 'fast', + cssArrows: true, + disableHI: false, + onInit: $.noop, + onBeforeShow: $.noop, + onShow: $.noop, + onBeforeHide: $.noop, + onHide: $.noop, + onIdle: $.noop, + onDestroy: $.noop + }; + + // soon to be deprecated + $.fn.extend({ + hideSuperfishUl: methods.hide, + showSuperfishUl: methods.show + }); + +})(jQuery); -- 2.17.1