<nav class="navigation ">
<ul class="navigation__list">
<li class="navigation__item is-current navigation__item--only-mobile " data-text="home">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
home
</span>
</a>
</li>
<li class="navigation__item " data-text="fonts">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
fonts
</span>
</a>
</li>
<li class="navigation__item " data-text="about">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
about
</span>
</a>
</li>
<li class="navigation__item navigation__item--only-mobile " data-text="contact">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
contact
</span>
</a>
</li>
</ul>
</nav>
{% macro navItemLink(item) %}
{% set attributes %}
{% if item.target %} target="{{ item.target }}"{% endif %}
{%- if item.attr_title %} title="{{ item.attr_title }}"{% endif %}
{%- if item._menu_item_xfn and item.link %} rel="{{ item._menu_item_xfn }}"{% endif %}
{% endset %}
<a href="{{ item.link }}" class="navigation__link" {{ attributes|trim }}>
<span class="navigation__link-text">
{{ item.title }}
</span>
</a>
{% endmacro %}
{% import _self as navigation %}
<nav class="navigation {{ modifier }} {{ class }}">
{% if data.items %}
<ul class="navigation__list">
{% for item in data.items %}
<li class="navigation__item {% if item.current or item.current_item_ancestor %}is-current{% endif %} {% if item.is_only_mobile %}navigation__item--only-mobile{% endif %} {{ item.classes|join(' ') }}" data-text="{{ item.title }}">
{{ navigation.navItemLink(item)|trim }}
</li>
{% endfor %}
</ul>
{% endif %}
</nav>
{
"language": "en-US",
"data": {
"items": [
{
"link": "#",
"title": "home",
"current": "true",
"is_only_mobile": true
},
{
"link": "#",
"title": "fonts"
},
{
"link": "#",
"title": "about"
},
{
"link": "#",
"title": "contact",
"is_only_mobile": true
}
]
}
}
.navigation__list {
display: flex;
flex-direction: column;
@include bp(md-min) {
flex-direction: row;
}
}
.navigation__list a {
&:after {
display: none;
}
&:before {
display: none;
}
}
.navigation__item {
overflow: hidden;
position: relative;
padding: 0;
box-shadow: 0 -1px 0 0 var(--color-text) inset;
transition: $transition-duration $transition-easing;
transition-property: box-shadow;
@include bp(md-min) {
box-shadow: 1px -1px 0 0 var(--color-text) inset;
}
&:after {
content: attr(data-text);
pointer-events: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-text);
color: var(--color-text-inverse);
padding: 7px 40px;
transform: translateX(-100%);
transition: $transition-duration $transition-easing;
transition-property: transform, background-color, color;
@include bp(md-min) {
padding: 15px 24px;
}
}
&:hover:after {
@media (hover: hover) {
transform: translateX(0);
}
}
&:active:after {
color: rgba(var(--color-text-inverse--rgb), .5);
}
}
.navigation__item--only-mobile {
@include bp(md-min) {
display: none;
}
}
.navigation__link {
display: block;
}
.navigation__link-text {
display: block;
text-decoration: none;
transform: translateY(0);
padding: 7px 40px;
transition: $transition-duration $transition-easing;
transition-property: transform;
.navigation__item:hover & {
@media (hover: hover) {
transform: translateY(100%);
}
}
@include bp(md-min) {
padding: 15px 24px;
}
}
import './navigation.scss';