dinislage/PrestaShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added responsive rich menu and small fix in blockbanner

Browse Source
This commit is contained in:
TMMeilleur
2013-11-15 18:40:17 +02:00
parent 96def5033f
commit a5d9daff13
7 changed files with 761 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/blockbanner/blockbanner.tpl
+1 -1
View File
@@ -29,7 +29,7 @@
<div class="container">
<a href="{$banner_link}" title="{$banner_desc}">
{if isset($banner_img)}
<img src="{$module_dir}{$banner_img}" alt=""/>
<img class="img-responsive" src="{$module_dir}{$banner_img}" alt=""/>
{else}
{$banner_desc}
{/if}
modules/blocktopmenu/blocktopmenu.php
+2 -2
View File
@@ -490,13 +490,13 @@ class Blocktopmenu extends Module
if ($category->level_depth == 2)
{
$files = scandir(_PS_CAT_IMG_DIR_);
$this->_menu .= '<div id="category-thumbnail">';
$this->_menu .= '<li id="category-thumbnail">';
foreach ($files as $file)
if (preg_match('/'.$category->id.'-([0-9])?_thumb.jpg/i', $file) === 1)
$this->_menu .= '<div>'.ImageManager::thumbnail(_PS_CAT_IMG_DIR_.$file, 'category_'.$file, 100, 'jpg', true, true).'</div>';
$this->_menu .= '</div>';
$this->_menu .= '</li>';
}
$this->_menu .= '</ul>';
themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css
+191 -20
View File
@@ -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;
}
}
themes/default-bootstrap/js/modules/blocktopmenu/js/hoverIntent.js
+103 -73
View File
@@ -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 <brian(at)cherne(dot)net>
**/
(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);
themes/default-bootstrap/js/modules/blocktopmenu/js/superfish-modified.js
+243 -110
View File
@@ -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 = $(['<span class="',c.arrowClass,'"> &#187;</span>'].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();
});
})(jQuery);
themes/default-bootstrap/modules/blocktopmenu/blocktopmenu.tpl
+56 -1
View File
@@ -2,7 +2,8 @@
<!-- Menu -->
<div class="sf-contener clearfix">
<ul class="sf-menu clearfix">
<div class="cat-title">{l s="Categories" mod="blocktopmenu"}</div>
<ul class="sf-menu clearfix menu-content">
{$MENU}
{if $MENU_SEARCH}
<li class="sf-search noBack" style="float:right">
@@ -20,4 +21,58 @@
</div>
<!--/ Menu -->
{literal}
<script type="text/javascript">
$(document).ready(function() {
categoryMenu = $('ul.sf-menu'); //var rich menu
categoryMenu.superfish(); //menu initialization
$('.sf-menu > li > ul').addClass('container'); //add class for width define
i = 0;
$('.sf-menu > li > ul > li:not(#category-thumbnail)').each(function() { //add classes for clearing
i++;
if(i%2==1)
$(this).addClass('first-in-line-xs');
else if (i%5==1)
$(this).addClass('first-in-line-lg');
});
});
// accordion for definition smaller that 767px
responsiveflagMenu = false;
function menuChange(status){
if(status == 'enable'){
$('.sf-menu > li > ul').removeAttr('style');
$('.sf-menu').removeAttr('style');
$('.sf-contener .cat-title').on('click', function(){
$(this).toggleClass('active').parent().find('ul.menu-content').stop().slideToggle('medium');
}),
$('.sf-menu > li:has(ul)').each(function() {
$(this).prepend('<span></span>'),
$(this).find('span').on('click touchend', function(){
categoryMenu.superfish('hide');
});
});
}else{
$('.sf-contener .cat-title').off();
$('.sf-menu').removeAttr('style');
$('.sf-menu > li > ul').removeAttr('style');
$('.sf-contener .cat-title').removeClass('active');
}
}
function resposiveMenu(){
if ($(document).width() <= 767 && responsiveflagMenu == false){
menuChange('enable'),
responsiveflagMenu = true
}
else if ($(document).width() >= 768){
menuChange('disable'),
responsiveflagMenu = false
}
}
$(document).ready(resposiveMenu);
$(window).resize(resposiveMenu);
</script>
{/literal}
{/if}
themes/default-bootstrap/sass/modules/blocktopmenu/css/superfish-modified.scss
+165 -15
View File
@@ -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;
}
}