Vertical Menu

Todo

Roadmap

Vertical Dots

Component Preview
<nav id="vertical-dots" role="navigation" aria-label="Navigation">
    <ul>
        <li>
            <a class="v-dot-link" href="##" aria-labelledby="v-dot-nav-section-1" data-section=#>
                <span id="v-dot-nav-section-1">Undergraduate</span>
                <i class="fas fa-arrow-up"></i>
            </a>
        </li>
        <li>
            <a class="v-dot-link" href="##" aria-labelledby="v-dot-nav-section-2" data-section=#>
                <span id="v-dot-nav-section-2">Graduate</span>
            </a>
        </li>
        <li>
            <a class="v-dot-link" href="##" aria-labelledby="v-dot-nav-section-3" data-section=#>
                <span id="v-dot-nav-section-3">International</span>
            </a>
        </li>
        <li>
            <a class="v-dot-link" href="##" aria-labelledby="v-dot-nav-section-4" data-section=#>
                <span id="v-dot-nav-section-4">Distance and online</span>
            </a>
        </li>
        <li>
            <a class="v-dot-link" href="##" aria-labelledby="v-dot-nav-section-5" data-section=#>
                <span id="v-dot-nav-section-5">Cost and aid</span>
            </a>
        </li>
    </ul>
</nav>
  • Content:
    html {
      scroll-behavior: smooth; }
    
    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto; } }
    
    #vertical-dots ul li span {
      position: relative; }
    
    #vertical-dots ul li span:after {
      left: 100%;
      top: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(136, 183, 213, 0);
      border-left-color: var(--brand-primary);
      border-width: 8px;
      margin-top: -8px; }
    
    #vertical-dots {
      z-index: 2;
      position: fixed;
      right: -20px;
      display: none;
      height: 100vh;
      top: 0;
      padding-right: 20px;
      align-items: center;
      pointer-events: none; }
      @media (min-width: 980px) {
        #vertical-dots {
          display: flex; } }
      #vertical-dots ul {
        pointer-events: all;
        list-style: none;
        margin: 0 10px 0 0;
        background-color: var(--brand-secondary);
        position: relative;
        padding: 0px;
        border-radius: 21px; }
        #vertical-dots ul li {
          list-style: none;
          padding: 4px 0px; }
          #vertical-dots ul li span {
            padding: 0.25rem 1.2rem 0.15rem;
            background-color: var(--brand-primary);
            -webkit-box-decoration-break: clone;
                    box-decoration-break: clone;
            line-height: 1.4;
            text-transform: uppercase;
            font-family: "Antonio", "Antonio-fallback", sans-serif;
            -webkit-font-smoothing: auto;
            -moz-osx-font-smoothing: auto;
            right: calc(100% - 12px);
            position: absolute;
            white-space: nowrap;
            top: calc(50% - 16px);
            transform: translateX(calc(100% + 20px));
            transition: all 0.3s ease-in-out;
            transition-property: transform; }
          #vertical-dots ul li a {
            position: relative;
            color: var(--brand-secondary);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 12px solid var(--brand-secondary);
            background-color: var(--brand-primary);
            display: block;
            transition: all 0.3s ease-in-out;
            transition-property: background-color;
            text-decoration: none; }
            #vertical-dots ul li a:before {
              content: '';
              position: absolute;
              border-radius: 20px;
              width: 10px;
              height: 10px;
              left: -1px;
              top: -1px;
              background-color: transparent;
              border: 1px solid var(--brand-primary);
              transition: all 0.3s ease-in-out;
              transform: scale(0.2);
              transition-property: transform, background-color; }
            #vertical-dots ul li a:hover span {
              transform: translateX(-21px); }
            #vertical-dots ul li a:focus span {
              text-decoration: underline;
              transform: translateX(-11px); }
            #vertical-dots ul li a.current:before {
              transform: scale(2.2); }
          #vertical-dots ul li:first-child {
            position: fixed;
            position: fixed;
            bottom: 14%;
            right: -14px; }
            #vertical-dots ul li:first-child span {
              top: 0;
              z-index: 4;
              right: calc(100% - 40px); }
            #vertical-dots ul li:first-child li {
              padding: 0px; }
            #vertical-dots ul li:first-child a {
              background-color: transparent;
              box-shadow: none;
              display: flex;
              align-items: center;
              justify-content: center;
              text-decoration: none;
              height: unset;
              width: unset;
              border: none;
              padding-right: 3px; }
              #vertical-dots ul li:first-child a:before {
                content: unset; }
              #vertical-dots ul li:first-child a i {
                height: 32px;
                width: 32px;
                background-color: var(--brand-secondary);
                z-index: 3;
                text-align: center;
                display: flex;
                color: var(--brand-primary);
                align-items: center;
                justify-content: center;
                border-radius: 21px;
                margin-right: 20px;
                padding-right: 1px; }
            #vertical-dots ul li:first-child:hover span {
              transform: translateX(-48px); }
    
    .v-dots-scroll-spacer,
    .vertical-dots--section {
      position: relative; }
      .v-dots-scroll-spacer .v-dots-scroll-target,
      .v-dots-scroll-spacer .vertical-dots--target,
      .vertical-dots--section .v-dots-scroll-target,
      .vertical-dots--section .vertical-dots--target {
        position: relative;
        top: 0px; }
        @media (min-width: 980px) {
          .v-dots-scroll-spacer .v-dots-scroll-target,
          .v-dots-scroll-spacer .vertical-dots--target,
          .vertical-dots--section .v-dots-scroll-target,
          .vertical-dots--section .vertical-dots--target {
            top: -49px; } }
    
  • URL: /components/raw/vertical-dots/vertical-dots.css
  • Filesystem Path: src/components/menus/vertical-dots/vertical-dots.css
  • Size: 4.7 KB
  • Content:
    let mainNavLinks = document.querySelectorAll("nav ul li a.v-dot-link");
    console.log(mainNavLinks);
    
    window.addEventListener("scroll", event => {
        let fromTop = window.scrollY;
    
        mainNavLinks.forEach(link => {
            let section = document.querySelector(link.hash).parentNode.nextElementSibling;
            // console.log(section.offsetTop);
            // console.log([section.offsetTop <= fromTop, section.offsetTop + section.offsetHeight > fromTop, [section.offsetTop, section.offsetHeight, fromTop]]);
    
            if (
                section.offsetTop -50 <= fromTop &&
                section.offsetTop -50 + section.offsetHeight > fromTop
            ) {
                link.classList.add("current");
            } else {
                link.classList.remove("current");
            }
        });
    });
    
  • URL: /components/raw/vertical-dots/vertical-dots.js
  • Filesystem Path: src/components/menus/vertical-dots/vertical-dots.js
  • Size: 774 Bytes
  • Content:
    @import '../../../assets/scss/variables';
    @import '../../../assets/scss/utilities';
    
    html {
      scroll-behavior: smooth;
    }
    
    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
    }
    
    #vertical-dots ul li span {
      position: relative;
    }
    
    #vertical-dots ul li span:after {
      left: 100%;
      top: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(136, 183, 213, 0);
      border-left-color: $primary;
      border-width: 8px;
      margin-top: -8px;
    }
    
    #vertical-dots {
      z-index: 2;
      position: fixed;
      right: -20px;
      display: none;
      height: 100vh;
      top: 0;
      padding-right: 20px;
      align-items: center;
      pointer-events: none;
    
      @include breakpoint(md) {
        display: flex;
      }
    
      ul {
        pointer-events: all;
        list-style: none;
        margin: 0 10px 0 0;
        background-color: $secondary;
        position: relative;
        padding: 0px;
        border-radius: 21px;
    
        li {
          list-style: none;
          padding: 4px 0px;
    
          span {
            padding: 0.25rem 1.2rem 0.15rem;
            background-color: $primary;
            box-decoration-break: clone;
            line-height: 1.4;
            text-transform: uppercase;
            font-family: $font-family-caps;
            -webkit-font-smoothing: auto;
            -moz-osx-font-smoothing: auto;
            right: calc(100% - 12px);
            position: absolute;
            white-space: nowrap;
            top: calc(50% - 16px);
            transform: translateX(calc(100% + 20px));
            transition: all 0.3s ease-in-out;
            transition-property: transform;
          }
    
          a {
            position: relative;
            color: $secondary;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 12px solid $secondary;
            background-color: $primary;
            display: block;
            transition: all 0.3s ease-in-out;
            transition-property: background-color;
            text-decoration: none;
    
            &:before {
              content: '';
              position: absolute;
              border-radius: 20px;
              width: 10px;
              height: 10px;
              left: -1px;
              top: -1px;
              background-color: transparent;
              border: 1px solid $primary;
              transition: all 0.3s ease-in-out;
              transform: scale(0.2);
              transition-property: transform, background-color;
            }
    
            &:hover {
              span {
                transform: translateX(-21px);
              }
            }
    
            &:focus {
              span {
                text-decoration: underline;
                transform: translateX(-11px);
              }
            }
    
            &.current {
              &:before {
                transform: scale(2.2);
              }
            }
          }
    
          &:first-child {
            position: fixed;
            position: fixed;
            bottom: 14%;
            right: -14px;
    
            span {
              top: 0;
              z-index: 4;
              right: calc(100% - 40px);
            }
    
            li {
              padding: 0px;
    
            }
    
            a {
              background-color: transparent;
              box-shadow: none;
              display: flex;
              align-items: center;
              justify-content: center;
              text-decoration: none;
              height: unset;
              width: unset;
              border: none;
              padding-right: 3px;
    
              &:before {
                content: unset;
              }
    
              i {
                height: 32px;
                width: 32px;
                background-color: $secondary;
                z-index: 3;
                text-align: center;
                display: flex;
                color: $primary;
                align-items: center;
                justify-content: center;
                border-radius: 21px;
                margin-right: 20px;
                padding-right: 1px;
              }
            }
    
            &:hover span {
              transform: translateX(-48px);
            }
          }
        }
      }
    }
    
    .v-dots-scroll-spacer,
    .vertical-dots--section {
      position: relative;
    
      .v-dots-scroll-target,
      .vertical-dots--target {
        position: relative;
        top: 0px;
    
        @include breakpoint(md) {
          top: -49px;
        }
      }
    }
    
  • URL: /components/raw/vertical-dots/vertical-dots.scss
  • Filesystem Path: src/components/menus/vertical-dots/vertical-dots.scss
  • Size: 4.1 KB