Mobile menu adjustments
This commit is contained in:
kjodle
parent
c7f1608189
commit
5534433ec8
262
js/superfish.js
262
js/superfish.js
@ -1,262 +0,0 @@
|
|||||||
/*
|
|
||||||
* jQuery Superfish Menu Plugin
|
|
||||||
* 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 ($, w) {
|
|
||||||
"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
|
|
||||||
$(w).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));
|
|
||||||
})(),
|
|
||||||
unprefixedPointerEvents = (function () {
|
|
||||||
return (!!w.PointerEvent);
|
|
||||||
})(),
|
|
||||||
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 msTouchAction = $menu.css('ms-touch-action');
|
|
||||||
var touchAction = $menu.css('touch-action');
|
|
||||||
touchAction = touchAction || msTouchAction;
|
|
||||||
touchAction = (touchAction === 'pan-y') ? 'auto' : 'pan-y';
|
|
||||||
$menu.css({
|
|
||||||
'ms-touch-action': touchAction,
|
|
||||||
'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 (unprefixedPointerEvents) {
|
|
||||||
touchevent = 'pointerdown.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' || e.type === 'pointerdown') {
|
|
||||||
$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
|
|
||||||
};
|
|
||||||
|
|
||||||
})(jQuery, window);
|
|
||||||
13
style.css
13
style.css
@ -160,15 +160,6 @@ nav#primary-menu {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li.menu-item a {
|
|
||||||
color: #444;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.current-menu-item {
|
|
||||||
background: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**********************************/
|
/**********************************/
|
||||||
/* 4. #content Elements */
|
/* 4. #content Elements */
|
||||||
@ -521,10 +512,6 @@ footer a:hover {
|
|||||||
width: 30%;
|
width: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav#footer-menu {
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul#footermenu-ul {
|
ul#footermenu-ul {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|||||||
@ -1,3 +1,12 @@
|
|||||||
|
/* All Menus */
|
||||||
|
|
||||||
|
.current-menu-item {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Above Header Menu */
|
||||||
|
|
||||||
#aboveheadermenu,
|
#aboveheadermenu,
|
||||||
#aboveheadermenu ul,
|
#aboveheadermenu ul,
|
||||||
#aboveheadermenu ul li,
|
#aboveheadermenu ul li,
|
||||||
@ -29,7 +38,7 @@
|
|||||||
#aboveheadermenu {
|
#aboveheadermenu {
|
||||||
font-family: "IM Fell English", serif;
|
font-family: "IM Fell English", serif;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-bottom: solid 1px #333;
|
border-bottom: solid 1px #ddd;
|
||||||
}
|
}
|
||||||
#aboveheadermenu > ul > li {
|
#aboveheadermenu > ul > li {
|
||||||
float: left;
|
float: left;
|
||||||
@ -49,8 +58,8 @@
|
|||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
#aboveheadermenu > ul > li > a {
|
#aboveheadermenu > ul > li > a {
|
||||||
padding: 17px;
|
padding: 0.5em;
|
||||||
font-size: 12px;
|
font-size: 0.9em;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #333;
|
color: #333;
|
||||||
@ -347,6 +356,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Below Header Menu */
|
||||||
|
|
||||||
#belowheadermenu,
|
#belowheadermenu,
|
||||||
#belowheadermenu ul,
|
#belowheadermenu ul,
|
||||||
#belowheadermenu ul li,
|
#belowheadermenu ul li,
|
||||||
@ -406,7 +417,8 @@
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
#belowheadermenu > ul > li:hover > a {
|
#belowheadermenu > ul > li:hover > a {
|
||||||
color: #ffffff;
|
background: #333;
|
||||||
|
color: #ddd;
|
||||||
}
|
}
|
||||||
#belowheadermenu > ul > li.has-sub > a {
|
#belowheadermenu > ul > li.has-sub > a {
|
||||||
padding-right: 30px;
|
padding-right: 30px;
|
||||||
@ -692,6 +704,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Footer Menu */
|
||||||
|
|
||||||
|
#footermenu li.current-menu-item a {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
#footermenu,
|
#footermenu,
|
||||||
#footermenu ul,
|
#footermenu ul,
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: blue;
|
color: green;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > header {
|
body > header {
|
||||||
@ -49,7 +49,7 @@ body > header {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > footer{
|
body > footer {
|
||||||
background: #333;
|
background: #333;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,118 +0,0 @@
|
|||||||
/*** 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 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: .65em .8em;
|
|
||||||
text-decoration: none;
|
|
||||||
zoom: 1; /* IE7 */
|
|
||||||
}
|
|
||||||
.sf-menu a {
|
|
||||||
color: #339;
|
|
||||||
}
|
|
||||||
.sf-menu 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;
|
|
||||||
border-right: solid 1px #ccc;
|
|
||||||
}
|
|
||||||
.sf-menu ul li {
|
|
||||||
background: #ddd;
|
|
||||||
}
|
|
||||||
.sf-menu ul ul li {
|
|
||||||
background: #ddd;
|
|
||||||
}
|
|
||||||
.sf-menu li:hover,
|
|
||||||
.sf-menu li.sfHover {
|
|
||||||
background: #eee;
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user