Add "priority plus" navigation pattern for masthead links
This commit is contained in:
Michael Rose
parent
3925087ac2
commit
4df2367e1c
10 changed files with 264 additions and 46 deletions
|
|
@ -1,10 +1,12 @@
|
|||
<div class="masthead">
|
||||
<div class="site-name">
|
||||
<a href="{{ base_path }}/">{{ site.title }}</a>
|
||||
</div><!-- /.site-name -->
|
||||
</div>
|
||||
|
||||
<div class="masthead__menu">
|
||||
<nav id="site-nav">
|
||||
<ul>
|
||||
<nav id="site-nav" class="greedy-nav">
|
||||
<button><div class="navicon"></div></button>
|
||||
<ul class="visible-links">
|
||||
{% for link in site.data.navigation %}
|
||||
{% if link.url contains 'http' %}
|
||||
{% assign domain = '' %}
|
||||
|
|
@ -14,6 +16,7 @@
|
|||
<li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<ul class="hidden-links hidden"></ul>
|
||||
</nav>
|
||||
</div><!-- /.top-navigation -->
|
||||
</div><!-- /.navigation-wrapper -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,9 @@
|
|||
@include breakpoint($x-large) {
|
||||
max-width: $x-large;
|
||||
}
|
||||
nav {
|
||||
z-index: 1;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -49,25 +52,8 @@
|
|||
}
|
||||
|
||||
.masthead__menu-item {
|
||||
display: block;
|
||||
list-style-type: none;
|
||||
border-bottom: 1px solid $border-color;
|
||||
font-size: 16px;
|
||||
&:last-child {
|
||||
border-bottom: 0 solid transparent;
|
||||
}
|
||||
@include breakpoint($small) {
|
||||
display: inline;
|
||||
margin-right: 25px;
|
||||
white-space: nowrap;
|
||||
border-bottom: 0 solid transparent;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
@include breakpoint($small) {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
display: block;
|
||||
list-style-type: none;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -53,4 +53,105 @@
|
|||
.current {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Priority plus navigation
|
||||
========================================================================== */
|
||||
|
||||
.greedy-nav {
|
||||
position: relative;
|
||||
min-width: 250px;
|
||||
background: #fff;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.visible-links {
|
||||
display: inline-table;
|
||||
|
||||
li {
|
||||
display: table-cell;
|
||||
|
||||
&:first-child {
|
||||
font-weight: bold;
|
||||
a {
|
||||
padding-left: 0;
|
||||
color: $text-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
a {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-links {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 15px;
|
||||
padding: 5px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px rgba(#000, 0.25);
|
||||
|
||||
a {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
right: 10px;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px;
|
||||
border-color: $border-color transparent;
|
||||
display: block;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: 10px;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px;
|
||||
border-color: #fff transparent;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
border-bottom: 1px solid $border-color;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
margin-top: 2em;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
z-index: 0;
|
||||
@include breakpoint($large) {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
|
|
|
|||
|
|
@ -151,31 +151,31 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
&:before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: calc(50% - 10px);
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px;
|
||||
border-color: $border-color transparent;
|
||||
display: block;
|
||||
width: 0;
|
||||
z-index: 0;
|
||||
top: -11px;
|
||||
left: calc(50% - 10px);
|
||||
@include breakpoint($large) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: calc(50% - 10px);
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px;
|
||||
border-color: #fff transparent;
|
||||
display: block;
|
||||
width: 0;
|
||||
z-index: 1;
|
||||
top: -10px;
|
||||
left: calc(50% - 10px);
|
||||
@include breakpoint($large) {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -152,6 +152,62 @@ body:hover .visually-hidden button {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
Navicons
|
||||
========================================================================== */
|
||||
|
||||
$navicon-width : 32px;
|
||||
$navicon-height : 4px;
|
||||
|
||||
.navicon {
|
||||
position: relative;
|
||||
width: $navicon-width;
|
||||
height: $navicon-height;
|
||||
background: #fff;
|
||||
margin: auto;
|
||||
transition: 0.3s;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: $navicon-width;
|
||||
height: $navicon-height;
|
||||
background: #fff;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: (-2 * $navicon-height);
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: (-2 * $navicon-height);
|
||||
}
|
||||
}
|
||||
|
||||
.close .navicon {
|
||||
// hide the middle line
|
||||
background: transparent;
|
||||
|
||||
// overlay the lines by setting both their top values to 0
|
||||
&:before, &:after{
|
||||
transform-origin: 50% 50%;
|
||||
top: 0;
|
||||
width: $navicon-width;
|
||||
}
|
||||
|
||||
// rotate the lines to form the x shape
|
||||
&:before{
|
||||
transform: rotate3d(0,0,1,45deg);
|
||||
}
|
||||
&:after{
|
||||
transform: rotate3d(0,0,1,-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Sticky, fixed to top content
|
||||
========================================================================== */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -30,11 +30,10 @@ $(document).ready(function(){
|
|||
|
||||
// Follow menu drop down
|
||||
|
||||
$(".author__urls-wrapper button").on("click", function() {
|
||||
$(".author__urls").fadeToggle("fast", function() {});
|
||||
$(".author__urls-wrapper button").toggleClass("open");
|
||||
$(".author__urls-wrapper button:after").css("content", "-");
|
||||
});
|
||||
$(".author__urls-wrapper button").on("click", function() {
|
||||
$(".author__urls").fadeToggle("fast", function() {});
|
||||
$(".author__urls-wrapper button").toggleClass("open");
|
||||
});
|
||||
|
||||
// init smooth scroll
|
||||
$("a").smoothScroll({offset: -20});
|
||||
|
|
|
|||
10
assets/js/main.min.js
vendored
10
assets/js/main.min.js
vendored
File diff suppressed because one or more lines are too long
72
assets/js/plugins/jquery.greedy-navigation.js
Normal file
72
assets/js/plugins/jquery.greedy-navigation.js
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
/*
|
||||
* Greedy Navigation
|
||||
*
|
||||
* http://codepen.io/lukejacksonn/pen/PwmwWV
|
||||
*
|
||||
*/
|
||||
|
||||
var $nav = $('#site-nav');
|
||||
var $btn = $('#site-nav button');
|
||||
var $vlinks = $('#site-nav .visible-links');
|
||||
var $hlinks = $('#site-nav .hidden-links');
|
||||
|
||||
var breaks = [];
|
||||
|
||||
function updateNav() {
|
||||
|
||||
var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;
|
||||
|
||||
// The visible list is overflowing the nav
|
||||
if($vlinks.width() > availableSpace) {
|
||||
|
||||
// Record the width of the list
|
||||
breaks.push($vlinks.width());
|
||||
|
||||
// Move item to the hidden list
|
||||
$vlinks.children().last().prependTo($hlinks);
|
||||
|
||||
// Show the dropdown btn
|
||||
if($btn.hasClass('hidden')) {
|
||||
$btn.removeClass('hidden');
|
||||
}
|
||||
|
||||
// The visible list is not overflowing
|
||||
} else {
|
||||
|
||||
// There is space for another item in the nav
|
||||
if(availableSpace > breaks[breaks.length-1]) {
|
||||
|
||||
// Move the item to the visible list
|
||||
$hlinks.children().first().appendTo($vlinks);
|
||||
breaks.pop();
|
||||
}
|
||||
|
||||
// Hide the dropdown btn if hidden list is empty
|
||||
if(breaks.length < 1) {
|
||||
$btn.addClass('hidden');
|
||||
$hlinks.addClass('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// Keep counter updated
|
||||
$btn.attr("count", breaks.length);
|
||||
|
||||
// Recur if the visible list is still overflowing the nav
|
||||
if($vlinks.width() > availableSpace) {
|
||||
updateNav();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Window listeners
|
||||
|
||||
$(window).resize(function() {
|
||||
updateNav();
|
||||
});
|
||||
|
||||
$btn.on('click', function() {
|
||||
$hlinks.toggleClass('hidden');
|
||||
$(this).toggleClass('close');
|
||||
});
|
||||
|
||||
updateNav();
|
||||
Loading…
Reference in a new issue