From a5d9daff139d7c132ff42a34eacc32fa8bc397a1 Mon Sep 17 00:00:00 2001 From: TMMeilleur Date: Fri, 15 Nov 2013 18:40:17 +0200 Subject: [PATCH] added responsive rich menu and small fix in blockbanner --- modules/blockbanner/blockbanner.tpl | 2 +- modules/blocktopmenu/blocktopmenu.php | 4 +- .../blocktopmenu/css/superfish-modified.css | 211 ++++++++++- .../js/modules/blocktopmenu/js/hoverIntent.js | 176 +++++---- .../blocktopmenu/js/superfish-modified.js | 353 ++++++++++++------ .../modules/blocktopmenu/blocktopmenu.tpl | 57 ++- .../blocktopmenu/css/superfish-modified.scss | 180 ++++++++- 7 files changed, 761 insertions(+), 222 deletions(-) diff --git a/modules/blockbanner/blockbanner.tpl b/modules/blockbanner/blockbanner.tpl index 23e946eef..460a41a89 100644 --- a/modules/blockbanner/blockbanner.tpl +++ b/modules/blockbanner/blockbanner.tpl @@ -29,7 +29,7 @@
{if isset($banner_img)} - + {else} {$banner_desc} {/if} diff --git a/modules/blocktopmenu/blocktopmenu.php b/modules/blocktopmenu/blocktopmenu.php index e3d4fe96e..db961a7fb 100644 --- a/modules/blocktopmenu/blocktopmenu.php +++ b/modules/blocktopmenu/blocktopmenu.php @@ -490,13 +490,13 @@ class Blocktopmenu extends Module if ($category->level_depth == 2) { $files = scandir(_PS_CAT_IMG_DIR_); - $this->_menu .= '
'; + $this->_menu .= '
  • '; foreach ($files as $file) if (preg_match('/'.$category->id.'-([0-9])?_thumb.jpg/i', $file) === 1) $this->_menu .= '
    '.ImageManager::thumbnail(_PS_CAT_IMG_DIR_.$file, 'category_'.$file, 100, 'jpg', true, true).'
    '; - $this->_menu .= '
    • '; + $this->_menu .= ''; } $this->_menu .= ''; diff --git a/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css b/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css index b2f91d31a..da2ff11b8 100644 --- a/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css +++ b/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css @@ -2,6 +2,19 @@ /*** ESSENTIAL STYLES ***/ .sf-contener { clear: both; + float: left; + width: 100%; + margin: 50px 0 0; +} +@media (min-width: 480px) and (max-width: 767px) { + .sf-contener { + margin-top: 80px; + } +} +@media (max-width: 479px) { + .sf-contener { + margin-top: 70px; + } } .sf-menu, .sf-menu * { @@ -11,30 +24,28 @@ } .sf-menu { - margin: 50px 0 0; + position: relative; padding: 0; width: 100%; border-bottom: 3px solid #e9e9e9; background: #f6f6f6; } -@media (min-width: 480px) and (max-width: 767px) { +@media (max-width: 767px) { .sf-menu { - margin-top: 80px; - } -} -@media (max-width: 479px) { - .sf-menu { - margin-top: 70px; + display: none; } } .sf-menu ul { position: absolute; top: -999em; - width: 10em; - /* left offset of submenus need to match (see below) */ background: white; } +@media (max-width: 767px) { + .sf-menu ul { + position: relative; + } +} .sf-menu ul li { width: 100%; @@ -45,15 +56,32 @@ /* fixes IE7 'sticky bug' */ } -.sf-menu li { - position: relative; -} - .sf-menu > li { float: left; border-right: 1px solid #d6d4d4; margin-bottom: -3px; } +@media (max-width: 767px) { + .sf-menu > li { + float: none; + position: relative; + border-right: none; + } + .sf-menu > li span { + position: absolute; + right: 6px; + top: 20px; + display: none; + width: 30px; + height: 30px; + z-index: 2; + } + .sf-menu > li span:after { + font-family: "FontAwesome"; + content: ""; + font-size: 26px; + } +} .sf-menu > li > a { font: 600 18px/22px "Open Sans", sans-serif; text-transform: uppercase; @@ -62,14 +90,25 @@ padding: 17px 20px; border-bottom: 3px solid #e9e9e9; } +@media (max-width: 767px) { + .sf-menu > li > a.sf-with-ul:after { + position: absolute; + right: 15px; + top: 18px; + font-family: "FontAwesome"; + content: ""; + font-size: 26px; + z-index: 1; + } +} .sf-menu > li.sfHover > a, .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a { background: #333333; border-bottom-color: #666666; color: white; } -.sf-menu li li a { - display: block; +.sf-menu li li li a { + display: inline-block; position: relative; color: #777777; font-size: 13px; @@ -77,13 +116,13 @@ font-weight: bold; padding-bottom: 10px; } -.sf-menu li li a:before { +.sf-menu li li li a:before { content: ""; display: inline-block; font-family: "FontAwesome"; padding-right: 10px; } -.sf-menu li li a:hover { +.sf-menu li li li a:hover { color: #333333; } @@ -93,12 +132,34 @@ top: 59px; /* match top ul list item height */ z-index: 99; - width: 220px; - padding: 25px 30px; + padding: 12px 0px 18px 0px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px; } +@media (max-width: 767px) { + .sf-menu li ul { + top: 0; + } +} + +.sf-menu li li ul { + position: static; + display: block !important; + opacity: 1 !important; + background: none; + -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; + -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; + box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; +} + +.sf-menu li li li ul { + padding: 0 0 0 20px; +} + +.sf-menu li li li ul { + width: 220px; +} ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { @@ -123,3 +184,113 @@ ul.sf-menu li li li.sfHover ul { /* match ul width */ top: 0; } + +.sf-menu > li > ul { + padding: 26px 30px 31px; + width: 100%; +} +.sf-menu > li > ul > li > a { + text-transform: uppercase; + font: 600 16px/20px "Open Sans", sans-serif; + color: #333333; +} +.sf-menu > li > ul > li > a:hover { + color: #515151; +} + +.sf-menu > li > ul > li:not(#category-thumbnail) { + float: left; + width: 20%; + padding-right: 15px; +} +@media (max-width: 767px) { + .sf-menu > li > ul > li:not(#category-thumbnail) { + width: 50%; + } +} +@media (max-width: 479px) { + .sf-menu > li > ul > li:not(#category-thumbnail) { + width: 100%; + } +} +@media (min-width: 768px) { + .sf-menu > li > ul > li:not(#category-thumbnail).first-in-line-lg { + clear: left; + } +} +@media (min-width: 480px) and (max-width: 767px) { + .sf-menu > li > ul > li:not(#category-thumbnail).first-in-line-xs { + clear: left; + } +} + +.sf-menu > li > ul > li#category-thumbnail { + width: 100%; + clear: both; + overflow: hidden; +} +.sf-menu > li > ul > li#category-thumbnail > div { + float: left; + padding-left: 10px; + width: 33.333%; +} +@media (max-width: 479px) { + .sf-menu > li > ul > li#category-thumbnail > div { + width: 100%; + padding-left: 0; + padding-top: 10px; + text-align: center; + } +} +.sf-menu > li > ul > li#category-thumbnail > div:first-child { + padding-left: 0; +} +.sf-menu > li > ul > li#category-thumbnail > div img { + max-width: 100%; + width: 100%; + display: block; +} + +.cat-title { + display: none; +} +@media (max-width: 767px) { + .cat-title { + display: block; + font: 600 18px/22px "Open Sans", sans-serif; + text-transform: uppercase; + color: #484848; + display: block; + padding: 17px 20px; + border-bottom: 3px solid #e9e9e9; + background: #f6f6f6; + position: relative; + } + .cat-title:hover { + background: #333333; + border-bottom-color: #666666; + color: white; + } + .cat-title:after { + display: block; + font-family: "FontAwesome"; + content: ""; + position: absolute; + right: 15px; + top: 18px; + font-size: 26px; + } + .cat-title.active:after { + content: ""; + } +} + +@media (max-width: 767px) { + .sf-menu > li.sfHover > a.sf-with-ul:after, .sf-menu > li.sfHoverForce > a.sf-with-ul:after { + display: none; + } + + .sf-menu > li.sfHover > span, .sf-menu > li.sfHoverForce > span { + display: block; + } +} diff --git a/themes/default-bootstrap/js/modules/blocktopmenu/js/hoverIntent.js b/themes/default-bootstrap/js/modules/blocktopmenu/js/hoverIntent.js index 91da57b24..cbe3ae715 100644 --- a/themes/default-bootstrap/js/modules/blocktopmenu/js/hoverIntent.js +++ b/themes/default-bootstrap/js/modules/blocktopmenu/js/hoverIntent.js @@ -1,84 +1,114 @@ -(function($){ - /* hoverIntent by Brian Cherne */ - $.fn.hoverIntent = function(f,g) { - // default configuration options - var cfg = { - sensitivity: 7, - interval: 100, - timeout: 0 - }; - // override configuration options with user supplied object - cfg = $.extend(cfg, g ? { over: f, out: g } : f ); +/** + * 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) { - // 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; + // default configuration values + var cfg = { + interval: 100, + sensitivity: 7, + timeout: 0 + }; - // A private function for getting mouse position - var track = function(ev) { - cX = ev.pageX; - cY = ev.pageY; - }; + 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 } ); + } - // 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).unbind("mousemove",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 ); - } - }; + // 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 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 getting mouse position + var track = function(ev) { + cX = ev.pageX; + cY = ev.pageY; + }; - // A private function for handling mouse 'hovering' - var handleHover = function(e) { - // next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut - var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget; - while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } } - if ( p == this ) { return false; } + // 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 ); + } + }; - // copy objects to be passed into t (required for event object to be passed in IE) - var ev = jQuery.extend({},e); - var ob = this; + // 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]); + }; - // cancel hoverIntent timer if it exists - if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); } + // 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; - // else e.type == "onmouseover" - if (e.type == "mouseover") { - // 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).bind("mousemove",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 );} + // cancel hoverIntent timer if it exists + if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); } - // else e.type == "onmouseout" - } else { - // unbind expensive mousemove event - $(ob).unbind("mousemove",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 );} - } - }; + // 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 );} - // bind the function to the two event listeners - return this.mouseover(handleHover).mouseout(handleHover); - }; - + // 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/themes/default-bootstrap/js/modules/blocktopmenu/js/superfish-modified.js b/themes/default-bootstrap/js/modules/blocktopmenu/js/superfish-modified.js index d0dfb5090..03b614702 100644 --- a/themes/default-bootstrap/js/modules/blocktopmenu/js/superfish-modified.js +++ b/themes/default-bootstrap/js/modules/blocktopmenu/js/superfish-modified.js @@ -1,124 +1,257 @@ - /* - * Superfish v1.4.8 - jQuery menu widget - * Copyright (c) 2008 Joel Birch + * 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 - * - * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html */ -;(function($){ - $.fn.superfish = function(op){ +;(function ($) { + "use strict"; - var sf = $.fn.superfish, - c = sf.c, - $arrow = $([' »'].join('')), - over = function(){ - var $$ = $(this), menu = getMenu($$); - clearTimeout(menu.sfTimer); - $$.showSuperfishUl().siblings().hideSuperfishUl(); + 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' }, - out = function(){ - var $$ = $(this), menu = getMenu($$), o = sf.op; - clearTimeout(menu.sfTimer); - menu.sfTimer=setTimeout(function(){ - o.retainPath=($.inArray($$[0],o.$path)>-1); - $$.hideSuperfishUl(); - if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);} - },o.delay); + 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); }, - getMenu = function($menu){ - var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0]; - sf.op = sf.o[menu.serial]; - return menu; + 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); }, - addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); }; - - return this.each(function() { - var s = this.serial = sf.o.length; - var o = $.extend({},sf.defaults,op); - o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){ - $(this).addClass([o.hoverClass,c.bcClass].join(' ')) - .filter('li:has(ul)').removeClass(o.pathClass); - }); - sf.o[s] = sf.op = o; - - $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() { - if (o.autoArrows) addArrow( $('>a:first-child',this) ); - }) - .not('.'+c.bcClass) - .hideSuperfishUl(); - - var $a = $('a',this); - $a.each(function(i){ - var $li = $a.eq(i).parents('li'); - $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);}); - }); - o.onInit.call(this); - - }).each(function() { - menuClasses = [c.menuClass]; - if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass); - $(this).addClass(menuClasses.join(' ')); - }); - }; + 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); - var sf = $.fn.superfish; - sf.o = []; - sf.op = {}; - sf.IE7fix = function(){ - var o = sf.op; - if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined) - this.toggleClass(sf.c.shadowClass+'-off'); + 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); + }); + } }; - sf.c = { - bcClass : 'sf-breadcrumb', - menuClass : 'sf-js-enabled', - anchorClass : 'sf-with-ul', - arrowClass : 'sf-sub-indicator', - shadowClass : 'sf-shadow' - }; - sf.defaults = { - hoverClass : 'sfHover', - pathClass : 'overideThisToUse', - pathLevels : 1, - delay : 800, - animation : {opacity:'show'}, - speed : 'fast', - autoArrows : false, - dropShadows : false, - disableHI : false, // true disables hoverIntent detection - onInit : function(){}, // callback functions - onBeforeShow: function(){}, - onShow : function(){}, - onHide : function(){} - }; - $.fn.extend({ - hideSuperfishUl : function(){ - var o = sf.op, - not = (o.retainPath===true) ? o.$path : ''; - o.retainPath = false; - var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass) - .find('>ul').hide().css('visibility','hidden'); - o.onHide.call($ul); - return this; - }, - showSuperfishUl : function(){ - var o = sf.op, - sh = sf.c.shadowClass+'-off', - $ul = this.addClass(o.hoverClass) - .find('>ul:hidden').css('visibility','visible'); - sf.IE7fix.call($ul); - o.onBeforeShow.call($ul); - $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); }); - return 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); -jQuery(function(){ - jQuery('ul.sf-menu').superfish(); -}); \ No newline at end of file +})(jQuery); \ No newline at end of file diff --git a/themes/default-bootstrap/modules/blocktopmenu/blocktopmenu.tpl b/themes/default-bootstrap/modules/blocktopmenu/blocktopmenu.tpl index a2914e0df..74a3c5966 100644 --- a/themes/default-bootstrap/modules/blocktopmenu/blocktopmenu.tpl +++ b/themes/default-bootstrap/modules/blocktopmenu/blocktopmenu.tpl @@ -2,7 +2,8 @@
    -
      +
      {l s="Categories" mod="blocktopmenu"}
      +
        {$MENU} {if $MENU_SEARCH}
      • @@ -20,4 +21,58 @@
    + {literal} + + {/literal} {/if} \ No newline at end of file diff --git a/themes/default-bootstrap/sass/modules/blocktopmenu/css/superfish-modified.scss b/themes/default-bootstrap/sass/modules/blocktopmenu/css/superfish-modified.scss index a3f7c34a7..c38417b6a 100644 --- a/themes/default-bootstrap/sass/modules/blocktopmenu/css/superfish-modified.scss +++ b/themes/default-bootstrap/sass/modules/blocktopmenu/css/superfish-modified.scss @@ -2,6 +2,15 @@ /*** ESSENTIAL STYLES ***/ .sf-contener { clear:both; + float:left; + width:100%; + margin: 50px 0 0; + @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px + margin-top:80px; + } + @media (max-width: $screen-xs - 1) { // max 479px + margin-top:70px; + } } .sf-right { } @@ -11,23 +20,22 @@ list-style: none; } .sf-menu { - margin: 50px 0 0; + position: relative; padding: 0; width: 100%; border-bottom: 3px solid #e9e9e9; background: #f6f6f6; - @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px - margin-top:80px; - } - @media (max-width: $screen-xs - 1) { // max 479px - margin-top:70px; + @media (max-width: $screen-xs-max) { // max 767px + display:none; } } .sf-menu ul { position: absolute; top: -999em; - width: 10em; /* left offset of submenus need to match (see below) */ background: $light-background; + @media (max-width: $screen-xs-max) { // max 767px + position:relative; + } } .sf-menu ul li { width: 100%; @@ -35,14 +43,31 @@ .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } -.sf-menu li { - position: relative; -} .sf-menu > li { float: left; border-right: 1px solid $base-border-color; margin-bottom: -3px; - + @media (max-width: $screen-xs-max) { // max 767px + float:none; + position:relative; + border-right:none; + + span { + position:absolute; + right:6px; + top:20px; + display:none; + width:30px; + height:30px; + z-index:2; + + &:after { + font-family:$font-icon; + content:""; + font-size:26px; + } + } + } > a { font: 600 18px/22px $font-custom; text-transform: uppercase; @@ -50,6 +75,19 @@ display: block; padding: 17px 20px; border-bottom: 3px solid #e9e9e9; + @media (max-width: $screen-xs-max) { // max 767px + &.sf-with-ul { + &:after { + position:absolute; + right:15px; + top:18px; + font-family:$font-icon; + content:""; + font-size:26px; + z-index:1; + } + } + } } &.sfHover > a, > a:hover, &.sfHoverForce > a { @@ -58,8 +96,8 @@ color: $light-text-color; } } -.sf-menu li li a { - display: block; +.sf-menu li li li a { + display: inline-block; position: relative; color: #777777; font-size: 13px; @@ -83,9 +121,24 @@ left: 0; top: 59px; /* match top ul list item height */ z-index: 99; - width: 220px; - padding: 25px 30px; + padding: 12px 0px 18px 0px; @include box-shadow(rgba(black, 0.20) 0px 5px 13px); + @media (max-width: $screen-xs-max) { // max 767px + top:0; + } +} +.sf-menu li li ul { + position:static; + display:block !important; + opacity:1 !important; + background:none; + @include box-shadow(rgba(black, 0) 0px 0px 0px); +} +.sf-menu li li li ul { + padding:0 0 0 20px; +} +.sf-menu li li li ul { + width: 220px; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { @@ -105,3 +158,100 @@ ul.sf-menu li li li.sfHover ul { left: 200px; /* match ul width */ top: 0; } +.sf-menu > li > ul { + padding:26px 30px 31px; + width:100%; + + > li { + > a { + text-transform:uppercase; + font:600 16px/20px $font-custom; + color:$base-text-color; + + &:hover { + color:$link-hover-color; + } + } + } +} +.sf-menu > li > ul > li:not(#category-thumbnail) { + float:left; + width:20%; + padding-right:15px; + @media (max-width: $screen-xs-max) { // max 767px + width:50%; + } + @media (max-width: $screen-xs - 1) { // max 479px + width:100%; + } + @media (min-width: $screen-sm) { // min 768px + &.first-in-line-lg {clear:left;} + } + @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px + &.first-in-line-xs {clear:left;} + } +} +.sf-menu > li > ul > li#category-thumbnail { + width:100%; + clear:both; + overflow:hidden; + + > div { + float:left; + padding-left:10px; + width:33.333%; + @media (max-width: $screen-xs - 1) { // max 479px + width:100%; + padding-left:0; + padding-top:10px; + text-align:center; + } + + &:first-child {padding-left:0;} + img { + max-width:100%; + width:100%; + display:block; + } + } +} +.cat-title { + display:none; + @media (max-width: $screen-xs-max) { // max 767px + display: block; + font: 600 18px/22px $font-custom; + text-transform: uppercase; + color: #484848; + display: block; + padding: 17px 20px; + border-bottom: 3px solid #e9e9e9; + background: #f6f6f6; + position:relative; + + &:hover { + background: $dark-background; + border-bottom-color: #666666; + color: $light-text-color; + } + &:after { + display:block; + font-family:$font-icon; + content:""; + position:absolute; + right:15px; + top:18px; + font-size:26px; + } + &.active:after{ + content:""; + } + } +} +@media (max-width: $screen-xs-max) { // max 767px +.sf-menu > li.sfHover > a.sf-with-ul:after, .sf-menu > li.sfHoverForce > a.sf-with-ul:after { + display:none; +} +.sf-menu > li.sfHover > span, .sf-menu > li.sfHoverForce > span { + display:block; +} +} \ No newline at end of file