hkk Frontend 2017

Navigation A-Z 

<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"
    }
  ]
}
  • Content: 
    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));
  • URL: /components/raw/navigation-a-z/navigation-a-z.js
  • Filesystem Path: src/components/organisms/navigation-a-z/navigation-a-z.js
  • Size: 852 Bytes
  • Content: 
    $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%);
  }
}
  • URL: /components/raw/navigation-a-z/navigation-a-z.scss
  • Filesystem Path: src/components/organisms/navigation-a-z/navigation-a-z.scss
  • Size: 2.2 KB
  • Handle: @navigation-a-z
  • Preview:
  • Filesystem Path: src/components/organisms/navigation-a-z/navigation-a-z.pug

There are no notes for this item.