Full Screen Responsive Navigation Tutorial

Full Screen Responsive Navigation Tutorial

HTML

<div class="container-fluid">
     <div class="row topRow">
       <div class="col-md-12">
         <div class="d-flex py-3 px-0 navbar navbar-dark">
           <button class="navbar-toggler trigger">
             <span class="navbar-toggler-icon"></span>
           </button>
           <div class="flex-fill text-center">
             <a href="#" class="navbar-brand mx-auto raleway text-white">
               Full Screen Navigation Menu
             </a>
           </div>
         </div>
       </div>
     </div>
     <div class="row menuRow">
       <nav class="overlayMenu">
         <div class="menuWrapper">
           <div class="linkWrap">
             <div class="link">
               <a href="#">
                 <span class="linkText-center">
                   Home
                 </span>
                 <span class="linkText">Home</span>
               </a>
             </div>
           </div>
           <div class="linkWrap">
             <div class="link">
               <a href="#">
                 <span class="linkText-center">
                   About Us
                 </span>
                 <span class="linkText">About Us</span>
               </a>
             </div>
           </div>
           <div class="linkWrap">
             <div class="link">
               <a href="#">
                 <span class="linkText-center">
                   Projects
                 </span>
                 <span class="linkText">Projects</span>
               </a>
             </div>
           </div>
           <div class="linkWrap">
             <div class="link">
               <a href="#">
                 <span class="linkText-center">
                   Clients
                 </span>
                 <span class="linkText">Clients</span>
               </a>
             </div>
           </div>
           <div class="linkWrap">
             <div class="link">
               <a href="#">
                 <span class="linkText-center">
                   Our Team
                 </span>
                 <span class="linkText">Our Team</span>
               </a>
             </div>
           </div>
           <div class="linkWrap">
             <div class="link">
               <a href="#">
                 <span class="linkText-center">
                   Gallery
                 </span>
                 <span class="linkText">Gallery</span>
               </a>
             </div>
           </div>
           <div class="linkWrap">
             <div class="link">
               <a href="#">
                 <span class="linkText-center">
                   Contact us
                 </span>
                 <span class="linkText">Contact Us</span>
               </a>
             </div>
           </div>
         </div>
       </nav>
     </div>

     <div class="row">
       <div class="col-md-12">
         <div class="row">
           <div class="container">
             <div class="row">
               <div class="col-md-12">
                 <div class="jumbotron bg-transparent">
                   <h1 class="text-center">
                     Responsive Navigation Menu.
                     <br>
                     Resize the window to see the mobile nav
                   </h1>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>

SCSS

@import url("https://fonts.googleapis.com/css?family=Anton");
@import url("https://fonts.googleapis.com/css?family=Raleway");
@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}

$color1: #0b132b;
$color2: #36f1cd;
$color3: #333745;
$white: #ffffff;

$gradient1: (
  color1: #ce0fa1,
  color2: #fab46f
);

$gradient2: (
  color1: #46edff,
  color2: #5f17d4
);

.bgGradient1 {
  background-image: linear-gradient(
    map-get($gradient1, "color1"),
    map-get($gradient1, "color2")
  );
}

.bgGradient2 {
  background-image: linear-gradient(
    map-get($gradient2, "color1"),
    map-get($gradient2, "color2")
  );
}

.ease {
  transition: all ease 0.5s;
}
.anton {
  font-family: "Anton", sans-serif;
}
.raleway {
  font-family: "Raleway", sans-serif;
}

.topRow {
  background-color: $color1;
  .navbar {
    background-color: transparent;
  }
  .trigger {
    background-color: $color1;
  }
}

.menuRow {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: rem(72px);
  transform: translateX(-100%);
  z-index: 3;
  @extend .ease;
}
.overlayMenu {
  background-color: lighten($color1, 1%);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  @extend .bgGradient1;
  .menuWrapper {
    display: flex;
    flex-direction: column;
  }
  .linkWrap {
    overflow: hidden;
    flex-shrink: 0;
    .link {
      display: flex;
      transform: translateX(-100%);
      @extend .ease;
    }
    a {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      padding: rem(24px);
      color: $white;
      background-color: rgba($color1, 0.2);
      &:hover {
        text-decoration: none;
        @extend .bgGradient2;
      }
    }
    .linkText {
      width: 100%;
      opacity: 1;
      @extend .anton;
    }
    .linkText-center {
      display: none;
      @extend .raleway;
      font-size: rem(12px);
    }
  }
}

/*anchors trantiton*/
.menuRow.active {
  transform: translateX(0);
  .menuWrapper {
    .link {
      transform: translateX(0);
    }
    @for $i from 1 through 15 {
      .linkWrap:nth-child(#{$i}) {
        .link {
          transition-delay: #{$i * 0.1s};
        }
      }
    }
  }
}

@media (min-width: 992px) {
  .menuRow {
    .menuWrapper {
      flex-direction: row;
      display: flex;
    }
    .linkWrap {
      flex-grow: 1;
      flex-shrink: 1;
      .link {
        height: 100%;
      }
      a {
        height: 100%;
        justify-content: center;
        align-items: flex-end;
        &:hover {
          .linkText {
            opacity: 1;
          }
        }
      }
      .linkText {
        transform-origin: left;
        transform: rotate(-90deg);
        white-space: nowrap;
        position: relative;
        left: 50%;
        font-size: rem(30px);
        opacity: 0.25;
      }
      .linkText-center {
        display: inline-block;
        align-self: center;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
      }
    }
  }
}

CSS

@import url("https://fonts.googleapis.com/css?family=Anton");
@import url("https://fonts.googleapis.com/css?family=Raleway");
.bgGradient1, .overlayMenu {
  background-image: linear-gradient(#ce0fa1, #fab46f);
}

.bgGradient2, .overlayMenu .linkWrap a:hover {
  background-image: linear-gradient(#46edff, #5f17d4);
}

.ease, .overlayMenu .linkWrap .link, .menuRow {
  transition: all ease 0.5s;
}

.anton, .overlayMenu .linkWrap .linkText {
  font-family: "Anton", sans-serif;
}

.raleway, .overlayMenu .linkWrap .linkText-center {
  font-family: "Raleway", sans-serif;
}

.topRow {
  background-color: #0b132b;
}
.topRow .navbar {
  background-color: transparent;
}
.topRow .trigger {
  background-color: #0b132b;
}

.menuRow {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 4.5rem;
  transform: translateX(-100%);
  z-index: 3;
}

.overlayMenu {
  background-color: #0c152f;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.overlayMenu .menuWrapper {
  display: flex;
  flex-direction: column;
}
.overlayMenu .linkWrap {
  overflow: hidden;
  flex-shrink: 0;
}
.overlayMenu .linkWrap .link {
  display: flex;
  transform: translateX(-100%);
}
.overlayMenu .linkWrap a {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  padding: 1.5rem;
  color: #ffffff;
  background-color: rgba(11, 19, 43, 0.2);
}
.overlayMenu .linkWrap a:hover {
  text-decoration: none;
}
.overlayMenu .linkWrap .linkText {
  width: 100%;
  opacity: 1;
}
.overlayMenu .linkWrap .linkText-center {
  display: none;
  font-size: 0.75rem;
}

/*anchors trantiton*/
.menuRow.active {
  transform: translateX(0);
}
.menuRow.active .menuWrapper .link {
  transform: translateX(0);
}
.menuRow.active .menuWrapper .linkWrap:nth-child(1) .link {
  transition-delay: 0.1s;
}
.menuRow.active .menuWrapper .linkWrap:nth-child(2) .link {
  transition-delay: 0.2s;
}
.menuRow.active .menuWrapper .linkWrap:nth-child(3) .link {
  transition-delay: 0.3s;
}
.menuRow.active .menuWrapper .linkWrap:nth-child(4) .link {
  transition-delay: 0.4s;
}
.menuRow.active .menuWrapper .linkWrap:nth-child(5) .link {
  transition-delay: 0.5s;
}
.menuRow.active .menuWrapper .linkWrap:nth-child(6) .link {
  transition-delay: 0.6s;
}
.menuRow.active .menuWrapper .linkWrap:nth-child(7) .link {
  transition-delay: 0.7s;
}
.menuRow.active .menuWrapper .linkWrap:nth-child(8) .link {
  transition-delay: 0.8s;
}
.menuRow.active .menuWrapper .linkWrap:nth-child(9) .link {
  transition-delay: 0.9s;
}
.menuRow.active .menuWrapper .linkWrap:nth-child(10) .link {
  transition-delay: 1s;
}
.menuRow.active .menuWrapper .linkWrap:nth-child(11) .link {
  transition-delay: 1.1s;
}
.menuRow.active .menuWrapper .linkWrap:nth-child(12) .link {
  transition-delay: 1.2s;
}
.menuRow.active .menuWrapper .linkWrap:nth-child(13) .link {
  transition-delay: 1.3s;
}
.menuRow.active .menuWrapper .linkWrap:nth-child(14) .link {
  transition-delay: 1.4s;
}
.menuRow.active .menuWrapper .linkWrap:nth-child(15) .link {
  transition-delay: 1.5s;
}

@media (min-width: 992px) {
  .menuRow .menuWrapper {
    flex-direction: row;
    display: flex;
  }
  .menuRow .linkWrap {
    flex-grow: 1;
    flex-shrink: 1;
  }
  .menuRow .linkWrap .link {
    height: 100%;
  }
  .menuRow .linkWrap a {
    height: 100%;
    justify-content: center;
    align-items: flex-end;
  }
  .menuRow .linkWrap a:hover .linkText {
    opacity: 1;
  }
  .menuRow .linkWrap .linkText {
    transform-origin: left;
    transform: rotate(-90deg);
    white-space: nowrap;
    position: relative;
    left: 50%;
    font-size: 1.875rem;
    opacity: 0.25;
  }
  .menuRow .linkWrap .linkText-center {
    display: inline-block;
    align-self: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
  }
}

JAVASCRIPT

$(document).ready(function() {
  $(".trigger").on("click", function() {
    $(".menuRow").toggleClass("active");
  });
  /*set MenuRow Height*/
  var setMenuHeight = function() {
    var topRowheight = $(".topRow").height();
    $(".menuWrapper").slimscroll({
      height: document.documentElement.clientHeight - topRowheight
    });
  };
  setMenuHeight();
  $(window).resize(function() {
    setMenuHeight();
  });
});

 

Add a Comment

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