Vertical Navigation Menu Tutorial

Vertical Navigation Menu Tutorial

HTML

<nav class="verticalNavigation">
    <button class="trigger">
      <span class="iconBar"></span>
      <span class="iconBar"></span>
      <span class="iconBar"></span>
    </button>
    <div class="logo">
      Logo
    </div>
    <div class="menuWrapper">
      <ul class="menu">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </nav>
  <div class="overlay"></div>

SCSS

@import url("https://fonts.googleapis.com/css?family=Teko");
@import url("https://fonts.googleapis.com/css?family=Quicksand");
$headig: "Teko", sans-serif;
$links: "Quicksand", sans-serif;
@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}
$navColor: #ef5030;
$white: #ffffff;
$ease: 0.5s;
.verticalNavigation {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: rem(250px);
  background-color: $navColor;
  transform-origin: top right;
  display: flex;
  flex-direction: column;
  padding: rem(40px) rem(0px) rem(0px);
  transform: translateX(-60%) rotate(45deg);
  transition: all ease $ease;
  z-index: 9999;
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: rem(50px);
    font-family: $headig;
    color: $white;
    padding-right: rem(60px);
    margin: rem(13px) rem(0px);
  }
  .menu {
    padding: 0;
    margin: 0;
    li {
      margin-bottom: rem(10px);
      margin-right: rem(30px);
      transition: all ease $ease;
      a {
        padding: rem(10px);
        padding-right: rem(30px);
        display: flex;
        font-family: $links;
        text-decoration: none;
        justify-content: flex-end;
        color: $white;
        background-color: darken($navColor, 10%);
        transition: all ease $ease;
        font-weight: 600;
      }
      &.active,
      &:hover {
        margin-right: rem(10px);
        cursor: pointer;
        a {
          background-color: $white;
          color: $navColor;
        }
      }
    }
  }
  .trigger {
    height: rem(60px);
    width: rem(60px);
    margin-left: auto;
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: rotate(-45deg);
    padding: 0;
    outline: 0;
    position: absolute;
    right: 0;
    z-index: 1000;
    &:hover {
      cursor: pointer;
    }
    .iconBar {
      height: rem(2px);
      width: rem(40px);
      background-color: $white;
      display: inline-flex;
      margin: rem(4px) auto;
      position: relative;
      transition: all ease $ease;
    }
  }
  /*active state*/
  &.show {
    transform: translateX(0) rotate(0deg);
    .trigger {
      .iconBar {
        opacity: 0;
        margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        &:nth-child(2) {
          display: none;
        }
        &:first-child {
          opacity: 1;
          transform: rotate(90deg);
        }
        &:last-child {
          opacity: 1;
        }
      }
    }
    & ~ .overlay {
      display: block;
    }
  }
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  z-index: 998;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  cursor: pointer;
}

CSS

@import url("https://fonts.googleapis.com/css?family=Teko");
@import url("https://fonts.googleapis.com/css?family=Quicksand");
.verticalNavigation {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 15.625rem;
  background-color: #ef5030;
  transform-origin: top right;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 0rem 0rem;
  transform: translateX(-60%) rotate(45deg);
  transition: all ease 0.5s;
  z-index: 9999;
  /*active state*/
}
.verticalNavigation .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.125rem;
  font-family: "Teko", sans-serif;
  color: #ffffff;
  padding-right: 3.75rem;
  margin: 0.8125rem 0rem;
}
.verticalNavigation .menu {
  padding: 0;
  margin: 0;
}
.verticalNavigation .menu li {
  margin-bottom: 0.625rem;
  margin-right: 1.875rem;
  transition: all ease 0.5s;
}
.verticalNavigation .menu li a {
  padding: 0.625rem;
  padding-right: 1.875rem;
  display: flex;
  font-family: "Quicksand", sans-serif;
  text-decoration: none;
  justify-content: flex-end;
  color: #ffffff;
  background-color: #db3311;
  transition: all ease 0.5s;
  font-weight: 600;
}
.verticalNavigation .menu li.active, .verticalNavigation .menu li:hover {
  margin-right: 0.625rem;
  cursor: pointer;
}
.verticalNavigation .menu li.active a, .verticalNavigation .menu li:hover a {
  background-color: #ffffff;
  color: #ef5030;
}
.verticalNavigation .trigger {
  height: 3.75rem;
  width: 3.75rem;
  margin-left: auto;
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: rotate(-45deg);
  padding: 0;
  outline: 0;
  position: absolute;
  right: 0;
  z-index: 1000;
}
.verticalNavigation .trigger:hover {
  cursor: pointer;
}
.verticalNavigation .trigger .iconBar {
  height: 0.125rem;
  width: 2.5rem;
  background-color: #ffffff;
  display: inline-flex;
  margin: 0.25rem auto;
  position: relative;
  transition: all ease 0.5s;
}
.verticalNavigation.show {
  transform: translateX(0) rotate(0deg);
}
.verticalNavigation.show .trigger .iconBar {
  opacity: 0;
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.verticalNavigation.show .trigger .iconBar:nth-child(2) {
  display: none;
}
.verticalNavigation.show .trigger .iconBar:first-child {
  opacity: 1;
  transform: rotate(90deg);
}
.verticalNavigation.show .trigger .iconBar:last-child {
  opacity: 1;
}
.verticalNavigation.show ~ .overlay {
  display: block;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  z-index: 998;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  cursor: pointer;
}

JAVASCRIPT

$(document).ready(function() {
  $(".verticalNavigation .trigger, .overlay").on("click", function() {
    $(".verticalNavigation").toggleClass("show");
  });
  var calculateMenuHeight = function() {
    $(".menuWrapper").slimscroll({
      height: document.documentElement.clientHeight - 140
    });
  };
  calculateMenuHeight();
  $(window).resize(function() {
    calculateMenuHeight();
  });
});

 

Add a Comment

Your email address will not be published. Required fields are marked *