Remove burger menu, replace with responsive row of links

This commit is contained in:
Anna Sidwell 2019-11-14 02:58:10 +00:00
parent b2d8d569a6
commit 4dff7a9a12
5 changed files with 91 additions and 504 deletions

View File

@ -1,20 +1,21 @@
<header class="header {% if page.layout == 'default' %}alt{% endif %}">
<h1 class="header-home"><a href="{{ "/" | absolute_url }}">Autonomic</a></h1>
<nav>
<ul class="header-nav">
<li>
<a class="header-link" href="{{ "/#core-values" | relative_url }}">Values</a>
</li>
<li>
<a class="header-link" href="{{ "/#services" | relative_url }}">Services</a>
</li>
<li>
<a class="header-link" href="{{ "/blog" | relative_url }}">Blog</a>
</li>
<li>
<a class="header-link" href="{{ "/#contact" | relative_url }}">Contact</a>
</li>
</ul>
</nav>
</header>
<div id="page-wrapper">
<header id="header" {% if page.layout == 'default' %} class="alt" {% endif %}>
<h1><a href="{{ "/" | absolute_url }}">Autonomic</a></h1>
<nav id="nav">
<ul>
<li class="special">
<a href="#menu" class="menuToggle"><span>Menu</span></a>
<div id="menu">
<ul>
<li><a href="{{ "/" | relative_url }}">Home</a></li>
<li><a href="{{ "/#core-values" | relative_url }}">Our Core Values</a></li>
<li><a href="{{ "/blog" | relative_url }}">Blog</a></li>
<li><a href="{{ "/#services" | relative_url }}">Services We Offer</a></li>
<li><a href="{{ "/#contact" | relative_url }}">Get In Touch</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</header>

View File

@ -18,7 +18,7 @@
$body = $("body"),
$wrapper = $("#page-wrapper"),
$banner = $("#banner"),
$header = $("#header");
$header = $(".header");
// Disable animations/transitions until the page has loaded.
$body.addClass("is-loading");
@ -51,23 +51,6 @@
);
});
$("#menu").show();
// Menu.
$("#menu")
.append('<a href="#menu" class="close"></a>')
.appendTo($body)
.panel({
delay: 500,
hideOnClick: true,
hideOnSwipe: true,
resetScroll: true,
resetForms: true,
side: "right",
target: $body,
visibleClass: "is-menu-visible"
});
// Header.
if (skel.vars.IEVersion < 9) $header.removeClass("alt");

View File

@ -1,301 +1,5 @@
(function($) {
/**
* Generate an indented list of links from a nav. Meant for use with panel().
* @return {jQuery} jQuery object.
*/
$.fn.navList = function() {
var $this = $(this);
$a = $this.find('a'),
b = [];
$a.each(function() {
var $this = $(this),
indent = Math.max(0, $this.parents('li').length - 1),
href = $this.attr('href'),
target = $this.attr('target');
b.push(
'<a ' +
'class="link depth-' + indent + '"' +
( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
'>' +
'<span class="indent-' + indent + '"></span>' +
$this.text() +
'</a>'
);
});
return b.join('');
};
/**
* Panel-ify an element.
* @param {object} userConfig User config.
* @return {jQuery} jQuery object.
*/
$.fn.panel = function(userConfig) {
// No elements?
if (this.length == 0)
return $this;
// Multiple elements?
if (this.length > 1) {
for (var i=0; i < this.length; i++)
$(this[i]).panel(userConfig);
return $this;
}
// Vars.
var $this = $(this),
$body = $('body'),
$window = $(window),
id = $this.attr('id'),
config;
// Config.
config = $.extend({
// Delay.
delay: 0,
// Hide panel on link click.
hideOnClick: false,
// Hide panel on escape keypress.
hideOnEscape: false,
// Hide panel on swipe.
hideOnSwipe: false,
// Reset scroll position on hide.
resetScroll: false,
// Reset forms on hide.
resetForms: false,
// Side of viewport the panel will appear.
side: null,
// Target element for "class".
target: $this,
// Class to toggle.
visibleClass: 'visible'
}, userConfig);
// Expand "target" if it's not a jQuery object already.
if (typeof config.target != 'jQuery')
config.target = $(config.target);
// Panel.
// Methods.
$this._hide = function(event) {
// Already hidden? Bail.
if (!config.target.hasClass(config.visibleClass))
return;
// If an event was provided, cancel it.
if (event) {
event.preventDefault();
event.stopPropagation();
}
// Hide.
config.target.removeClass(config.visibleClass);
// Post-hide stuff.
window.setTimeout(function() {
// Reset scroll position.
if (config.resetScroll)
$this.scrollTop(0);
// Reset forms.
if (config.resetForms)
$this.find('form').each(function() {
this.reset();
});
}, config.delay);
};
// Vendor fixes.
$this
.css('-ms-overflow-style', '-ms-autohiding-scrollbar')
.css('-webkit-overflow-scrolling', 'touch');
// Hide on click.
if (config.hideOnClick) {
$this.find('a')
.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
$this
.on('click', 'a', function(event) {
var $a = $(this),
href = $a.attr('href'),
target = $a.attr('target');
if (!href || href == '#' || href == '' || href == '#' + id)
return;
// Cancel original event.
event.preventDefault();
event.stopPropagation();
// Hide panel.
$this._hide();
// Redirect to href.
window.setTimeout(function() {
if (target == '_blank')
window.open(href);
else
window.location.href = href;
}, config.delay + 10);
});
}
// Event: Touch stuff.
$this.on('touchstart', function(event) {
$this.touchPosX = event.originalEvent.touches[0].pageX;
$this.touchPosY = event.originalEvent.touches[0].pageY;
})
$this.on('touchmove', function(event) {
if ($this.touchPosX === null
|| $this.touchPosY === null)
return;
var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
th = $this.outerHeight(),
ts = ($this.get(0).scrollHeight - $this.scrollTop());
// Hide on swipe?
if (config.hideOnSwipe) {
var result = false,
boundary = 20,
delta = 50;
switch (config.side) {
case 'left':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
break;
case 'right':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
break;
case 'top':
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
break;
case 'bottom':
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
break;
default:
break;
}
if (result) {
$this.touchPosX = null;
$this.touchPosY = null;
$this._hide();
return false;
}
}
// Prevent vertical scrolling past the top or bottom.
if (($this.scrollTop() < 0 && diffY < 0)
|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
event.preventDefault();
event.stopPropagation();
}
});
// Event: Prevent certain events inside the panel from bubbling.
$this.on('click touchend touchstart touchmove', function(event) {
event.stopPropagation();
});
// Event: Hide panel if a child anchor tag pointing to its ID is clicked.
$this.on('click', 'a[href="#' + id + '"]', function(event) {
event.preventDefault();
event.stopPropagation();
config.target.removeClass(config.visibleClass);
});
// Body.
// Event: Hide panel on body click/tap.
$body.on('click touchend', function(event) {
$this._hide(event);
});
// Event: Toggle.
$body.on('click', 'a[href="#' + id + '"]', function(event) {
event.preventDefault();
event.stopPropagation();
config.target.toggleClass(config.visibleClass);
});
// Window.
// Event: Hide on ESC.
if (config.hideOnEscape)
$window.on('keydown', function(event) {
if (event.keyCode == 27)
$this._hide(event);
});
return $this;
};
/**
* Apply "placeholder" attribute polyfill to one or more forms.
* @return {jQuery} jQuery object.

View File

@ -1,105 +1,86 @@
/* Header */
#header {
@include vendor('transition', 'background-color #{_duration(transitions)} ease');
background: _palette(bg);
height: 3em;
left: 0;
line-height: 3em;
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
@include vendor('transition', 'background-color #{_duration(transitions)} ease');
background: _palette(bg);
z-index: _misc(z-index-base);
height: 3em;
line-height: 3em;
padding-left: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
@include breakpoint(small) {
position: initial;
height: auto;
line-height: inherit;
display: block;
margin: 0 auto;
text-align: center
}
}
.header.alt {
background: transparent;
h1 {
@include vendor('transition', 'opacity #{_duration(transitions)} ease');
height: inherit;
left: 1.25em;
line-height: inherit;
position: absolute;
top: 0;
a {
border: 0;
display: block;
height: inherit;
line-height: inherit;
@include breakpoint(small) {
font-size: 0.8em;
}
}
@include vendor('pointer-events', 'none');
opacity: 0;
}
}
nav {
.header-home {
@include vendor('transition', 'opacity #{_duration(transitions)} ease');
margin: 0;
padding: 0;
a {
border: 0;
display: block;
height: inherit;
line-height: inherit;
position: absolute;
right: 0;
top: 0;
> ul {
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
> li {
display: inline-block;
padding: 0;
> a {
border: 0;
color: _palette(fg-bold);
display: block;
font-size: 0.8em;
letter-spacing: _size(letter-spacing-alt);
padding: 0 1.5em;
text-transform: uppercase;
&.menuToggle {
outline: 0;
position: relative;
&:after {
background-image: url('images/bars.svg');
background-position: right center;
background-repeat: no-repeat;
content: '';
display: inline-block;
height: 3.75em;
vertical-align: top;
width: 2em;
}
@include breakpoint(small) {
padding: 0 1.5em;
span {
display: none;
}
}
}
@include breakpoint(small) {
padding: 0 0 0 1.5em;
}
}
&:first-child {
margin-left: 0;
}
}
}
}
&.alt {
background: transparent;
h1 {
@include vendor('pointer-events', 'none');
opacity: 0;
}
@include breakpoint(small) {
padding: 1rem 0;
}
}
}
.header-nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
li { padding: 0; }
@include breakpoint(small) {
justify-content: space-around;
padding-bottom: 0.5rem;
}
}
.header-link {
border: 0;
color: _palette(fg-bold);
font-size: 0.8em;
letter-spacing: _size(letter-spacing-alt);
padding: 0 1.5rem;
text-transform: uppercase;
@include breakpoint(small) {
padding: 0 0.75rem;
}
}

View File

@ -20,85 +20,3 @@
}
}
#menu {
display:none;
@include vendor('transform', 'translateX(20em)');
@include vendor('transition', 'transform #{_duration(menu)} ease');
-webkit-overflow-scrolling: touch;
background: _palette(accent1, bg);
color: _palette(accent1, fg-bold);
height: 100%;
max-width: 80%;
overflow-y: auto;
padding: 3em 2em;
position: fixed;
right: 0;
top: 0;
width: 20em;
z-index: _misc(z-index-base) + 2;
ul {
list-style: none;
padding: 0;
> li {
border-top: solid 1px _palette(accent1, border);
margin: 0.5em 0 0 0;
padding: 0.5em 0 0 0;
&:first-child {
border-top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
> a {
border: 0;
color: black;
display: block;
font-size: 0.8em;
letter-spacing: _size(letter-spacing-alt);
outline: 0;
text-decoration: none;
text-transform: uppercase;
@include breakpoint(small) {
line-height: 3em;
}
}
}
}
.close {
background-image: url('images/close.svg');
background-position: 4.85em 1em;
background-repeat: no-repeat;
border: 0;
cursor: pointer;
display: block;
height: 3em;
position: absolute;
right: 0;
top: 0;
vertical-align: middle;
width: 7em;
}
@include breakpoint(small) {
padding: 3em 1.5em;
}
}
body.is-menu-visible {
#page-wrapper {
opacity: 0.35;
&:before {
display: block;
}
}
#menu {
@include vendor('transform', 'translateX(0)');
}
}