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;
|
||||
}
|
||||
|
||||
li.menu-item a {
|
||||
color: #444;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.current-menu-item {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
|
||||
/**********************************/
|
||||
/* 4. #content Elements */
|
||||
@ -521,10 +512,6 @@ footer a:hover {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
nav#footer-menu {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
ul#footermenu-ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
/* All Menus */
|
||||
|
||||
.current-menu-item {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
|
||||
/* Above Header Menu */
|
||||
|
||||
#aboveheadermenu,
|
||||
#aboveheadermenu ul,
|
||||
#aboveheadermenu ul li,
|
||||
@ -29,7 +38,7 @@
|
||||
#aboveheadermenu {
|
||||
font-family: "IM Fell English", serif;
|
||||
background: #fff;
|
||||
border-bottom: solid 1px #333;
|
||||
border-bottom: solid 1px #ddd;
|
||||
}
|
||||
#aboveheadermenu > ul > li {
|
||||
float: left;
|
||||
@ -49,8 +58,8 @@
|
||||
float: right;
|
||||
}
|
||||
#aboveheadermenu > ul > li > a {
|
||||
padding: 17px;
|
||||
font-size: 12px;
|
||||
padding: 0.5em;
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 1px;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
@ -347,6 +356,8 @@
|
||||
}
|
||||
|
||||
|
||||
/* Below Header Menu */
|
||||
|
||||
#belowheadermenu,
|
||||
#belowheadermenu ul,
|
||||
#belowheadermenu ul li,
|
||||
@ -406,7 +417,8 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
#belowheadermenu > ul > li:hover > a {
|
||||
color: #ffffff;
|
||||
background: #333;
|
||||
color: #ddd;
|
||||
}
|
||||
#belowheadermenu > ul > li.has-sub > a {
|
||||
padding-right: 30px;
|
||||
@ -692,6 +704,11 @@
|
||||
}
|
||||
|
||||
|
||||
/* Footer Menu */
|
||||
|
||||
#footermenu li.current-menu-item a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#footermenu,
|
||||
#footermenu ul,
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
color: blue;
|
||||
color: green;
|
||||
}
|
||||
|
||||
body > header {
|
||||
@ -49,7 +49,7 @@ body > header {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body > footer{
|
||||
body > footer {
|
||||
background: #333;
|
||||
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