<div class="navigation-a-z__wrapper js-navigation-a-z">
<div class="navigation-a-z__container">
<nav class="navigation-a-z">
<ul class="navigation-a-z__list">
<li class="navigation-a-z__list-item navigation-a-z__list-item--active"><a class="navigation-a-z__link" href="#">A</a>
<div class="navigation-a-z__marker"></div>
</li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">B</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">C</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">D</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">E</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">F</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">G</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">H</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">I</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">J</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">K</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">L</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">M</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">N</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">O</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">P</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">Q</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">R</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">S</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">T</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">U</a></li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">V</a></li>
<li class="navigation-a-z__list-item navigation-a-z__list-item--disabled">
<div class="navigation-a-z__link">X</div>
</li>
<li class="navigation-a-z__list-item navigation-a-z__list-item--disabled">
<div class="navigation-a-z__link">Y</div>
</li>
<li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">Z</a></li>
</ul>
</nav>
</div>
</div>
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
//- Render slider
.navigation-a-z__wrapper.js-navigation-a-z
.navigation-a-z__container
nav.navigation-a-z&attributes(attr)
ul.navigation-a-z__list
if letters
each letter in letters
if letter.default
li.navigation-a-z__list-item.navigation-a-z__list-item--active
a.navigation-a-z__link(href='#') #{letter.label}
.navigation-a-z__marker
else if letter.disabled
li.navigation-a-z__list-item.navigation-a-z__list-item--disabled
.navigation-a-z__link #{letter.label}
else
li.navigation-a-z__list-item
a.navigation-a-z__link(href='#') #{letter.label}
{
"letters": [
{
"label": "A",
"default": true
},
{
"label": "B"
},
{
"label": "C"
},
{
"label": "D"
},
{
"label": "E"
},
{
"label": "F"
},
{
"label": "G"
},
{
"label": "H"
},
{
"label": "I"
},
{
"label": "J"
},
{
"label": "K"
},
{
"label": "L"
},
{
"label": "M"
},
{
"label": "N"
},
{
"label": "O"
},
{
"label": "P"
},
{
"label": "Q"
},
{
"label": "R"
},
{
"label": "S"
},
{
"label": "T"
},
{
"label": "U"
},
{
"label": "V"
},
{
"label": "X",
"disabled": true
},
{
"label": "Y",
"disabled": true
},
{
"label": "Z"
}
]
}
class NavigationAZ {
constructor($el) {
this.$el = $el;
this.$container = this.$el.querySelector('.navigation-a-z__container');
this.$selectedLetter = this.$el.querySelector('.navigation-a-z__list-item--active');
this.centerSelectedLetter();
}
centerSelectedLetter() {
if (!this.isLetterInViewport()) {
this.$container.scrollLeft = this.$selectedLetter.getBoundingClientRect().left;
}
}
isLetterInViewport() {
const rect = this.$selectedLetter.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
}
document
.querySelectorAll('.js-navigation-a-z')
.forEach($nav => new NavigationAZ($nav));
$navigation-a-z-border-radius: 2px;
$navigation-a-z-marker-size: 8px;
$navigation-a-z-breakpoint: l;
.navigation-a-z__wrapper {
overflow: visible;
width: 100%;
@include mq($until: $navigation-a-z-breakpoint) {
bottom: 0;
left: 0;
position: fixed;
z-index: z('header');
}
}
.navigation-a-z__container {
overflow-x: scroll;
overflow-y: hidden;
padding-top: 10px;
width: 100%;
@include mq($from: $navigation-a-z-breakpoint) {
overflow-x: visible;
padding-bottom: 10px;
padding-top: 0;
}
}
.navigation-a-z {
background-color: $color-blue-light;
color: #fff;
font-size: 1.3rem;
height: 4rem;
@include mq($until: $navigation-a-z-breakpoint) {
width: 1000px;
}
@include mq($from: $navigation-a-z-breakpoint) {
border-radius: $navigation-a-z-border-radius;
}
}
.navigation-a-z__list {
@include list-reset();
display: flex;
height: 100%;
justify-content: space-between;
width: 100%;
}
.navigation-a-z__list-item {
border-right: 1px solid $color-blue;
flex-grow: 1;
position: relative;
&:first-child {
@include mq($from: $navigation-a-z-breakpoint) {
border-radius: $navigation-a-z-border-radius 0 0 $navigation-a-z-border-radius;
}
}
&:last-child {
border-right: 0;
@include mq($from: $navigation-a-z-breakpoint) {
border-radius: 0 $navigation-a-z-border-radius $navigation-a-z-border-radius 0;
}
}
}
.navigation-a-z__list-item--active {
background-color: $color-blue;
}
.navigation-a-z__list-item--disabled {
color: $color-blue;
pointer-events: none;
}
.navigation-a-z__link {
bottom: 0;
left: 0;
padding: 10px 15px;
position: absolute;
right: 0;
top: 0;
@include mq($from: l) {
padding: 10px;
}
}
.navigation-a-z__marker {
border-color: $color-blue transparent transparent transparent;
border-style: solid;
border-width: $navigation-a-z-marker-size $navigation-a-z-marker-size 0;
bottom: 5 * $navigation-a-z-marker-size;
height: 0;
left: 50%;
position: absolute;
transform: translate(-50%, 0%) rotate(180deg);
width: 0;
@include mq($from: $navigation-a-z-breakpoint) {
bottom: -$navigation-a-z-marker-size;
transform: translate(-50%, 0%);
}
}
There are no notes for this item.