Herman Navigation Components
.nav-subsection
scss
.nav-subsection {
flex: 0 0 auto;
&:last-of-type {
flex: 1 0 auto;
}
& + .nav-item {
border-top: 1px solid;
margin-top: tools.size('double-gutter');
padding-top: tools.size('gutter');
}
}
Group the main navigation into sub-sections…
.nav-home
scss
.nav-home {
font-size: tools.size('large');
font-weight: bold;
margin-top: tools.size('gutter-plus');
}
There is a home link at the top of the navigation…
.nav-title
scss
.nav-title {
border-top: 1px solid;
font-weight: bold;
margin: tools.size('double-gutter') 0 tools.size('gutter');
padding-top: tools.size('quarter-shim');
}
Each subsection may optionally have a title…
.nav-item
scss
.nav-item {
list-style: none;
margin: tools.size('half-shim') 0;
}
Each list-item in the navigation menus…
[data-nav]
scss
[data-nav] {
#{config.$link} {
color: tools.color('background');
line-height: 1.1;
padding-bottom: tools.size('quarter-shim');
position: relative;
text-decoration: none;
transition: color 0.4s;
// Animated underlines
@include tools.before('') {
@include tools.position(null null 0 0);
background: tools.color('theme-light');
height: tools.size('nav-underline');
transform: scale3d(0, 1, 1);
transform-origin: center left;
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: 0.2s;
width: 100%;
}
}
#{config.$focus} {
@include tools.before('') {
transform: scale3d(1, 1, 1);
transition-delay: 0s;
}
}
&[data-nav='is-active'] {
#{config.$link},
#{config.$focus} {
@include tools.before('') {
transform: scale3d(1, 1, 1);
transition-delay: 0s;
}
}
}
}
Navigation items, with inactive and active states.
Example
html
<div class="invert-colors" style="padding: 1em;">
<a href="#" data-nav="is-not-active">not active</a><br />
<a href="#" data-nav="is-active">active</a>
</div>