Remove burger menu, replace with responsive row of links
This commit is contained in:
parent
b2d8d569a6
commit
4dff7a9a12
@ -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>
|
||||
|
||||
@ -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");
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user