Full Screen Navigation Menu

Full Screen Navigation Menu

HTML

<div class="fullScreenMenu">
     <button class="trigger open">
       <span class="iconBar"></span>
       <span class="iconBar"></span>
       <span class="iconBar"></span>
     </button>
     <div class="overlay">
       <div class="block"></div>
       <div class="block"></div>
       <div class="block"></div>
       <div class="block"></div>
       <div class="block"></div>
     </div>
     <div class="menuContainer">
       <div class="menuWrapper">
         <ul class="menu">
           <li><a href="#">Home</a></li>
           <li><a href="#">About Us</a></li>
           <li><a href="#">Contact</a></li>
           <li><a href="#">Gallery</a></li>
           <li><a href="#">Projects</a></li>
           <li><a href="#">Find Us</a></li>
         </ul>
       </div>
     </div>
   </div>

   <div class="mainContent">
     <h1>Welcome To Our Website.</h1>
   </div>

SCSS

@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url("https://fonts.googleapis.com/css?family=Anton");
$links: "Anton", sans-serif;
$linksColor: #ffffff;
$menuColor: #0cca4a;
$blocksCount:5;

p{
  text-align:justify;
}

body{
  font-family: 'Roboto', sans-serif;
}
.mainContent{
  display: flex;
  justify-content: center;
  align-items: center;
}
.fullScreenMenu {
  .trigger {
    height: 40px;
    width: 40px;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: rem(500px);
    border: none;
    background-color: $linksColor;
    transition: all ease 0.25s;
    outline: 0;
    &:hover {
      cursor: pointer;
    }
    .iconBar {
      height: 2px;
      width: 20px;
      margin: 2px auto;
      background-color: $menuColor;
      display: inline-flex;
      transition: all ease 0.25s;
    }
    &.close {
      transform: rotate(45deg);
      .iconBar {
        position: absolute;
        margin: 0;
        &:nth-child(2) {
          display: none;
        }
        &:first-child {
          transform: rotate(90deg);
        }
      }
    }
  }
  .overlay {
    display: flex;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    visibility: hidden;
    .block {
      display: inline-flex;
      width: 0px;
      background-color: $menuColor;
      position: absolute;
      height: 100%;
      @for $i from 0 through $blocksCount - 1 {
        &:nth-child(#{$i + 1}) {
          $width: 100 / ($blocksCount);
          left: ($width * $i) * 1%;
        }
      }
    }
  }
  .menuContainer {
    display: flex;
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: rem(54px);
    padding: rem(10px);
    .menu {
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      li {
        display: flex;
        justify-content: center;
        align-items: center;
        a {
          font-family: $links;
          font-size: rem(40px);
          text-decoration: none;
          color: $linksColor;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          position:relative;
          padding:0 rem(20px);
          &::after{
            content:"";
            position:absolute;
            height:rem(4px);
            background-color: $linksColor;
            width:0%;
            border-radius:rem(10px);
            top: 0;
            bottom: 0;
            left: 0;
            margin:auto;
            transition:all ease 0.25s;
          }
          &.active,
          &:hover{
            &::after{
              width: 100%;
            }  
          }
        }
      }
    }
  }

  &.show {
    .overlay {
      visibility: visible;
    }
  }
}

CSS

@import url("https://fonts.googleapis.com/css?family=Roboto");
@import url("https://fonts.googleapis.com/css?family=Anton");
p {
  text-align: justify;
}

body {
  font-family: 'Roboto', sans-serif;
}

.mainContent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullScreenMenu .trigger {
  height: 40px;
  width: 40px;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 31.25rem;
  border: none;
  background-color: #ffffff;
  transition: all ease 0.25s;
  outline: 0;
}
.fullScreenMenu .trigger:hover {
  cursor: pointer;
}
.fullScreenMenu .trigger .iconBar {
  height: 2px;
  width: 20px;
  margin: 2px auto;
  background-color: #0cca4a;
  display: inline-flex;
  transition: all ease 0.25s;
}
.fullScreenMenu .trigger.close {
  transform: rotate(45deg);
}
.fullScreenMenu .trigger.close .iconBar {
  position: absolute;
  margin: 0;
}
.fullScreenMenu .trigger.close .iconBar:nth-child(2) {
  display: none;
}
.fullScreenMenu .trigger.close .iconBar:first-child {
  transform: rotate(90deg);
}
.fullScreenMenu .overlay {
  display: flex;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  visibility: hidden;
}
.fullScreenMenu .overlay .block {
  display: inline-flex;
  width: 0px;
  background-color: #0cca4a;
  position: absolute;
  height: 100%;
}
.fullScreenMenu .overlay .block:nth-child(1) {
  left: 0%;
}
.fullScreenMenu .overlay .block:nth-child(2) {
  left: 20%;
}
.fullScreenMenu .overlay .block:nth-child(3) {
  left: 40%;
}
.fullScreenMenu .overlay .block:nth-child(4) {
  left: 60%;
}
.fullScreenMenu .overlay .block:nth-child(5) {
  left: 80%;
}
.fullScreenMenu .menuContainer {
  display: flex;
  position: fixed;
  top: 100%;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 3.375rem;
  padding: 0.625rem;
}
.fullScreenMenu .menuContainer .menu {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.fullScreenMenu .menuContainer .menu li {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fullScreenMenu .menuContainer .menu li a {
  font-family: "Anton", sans-serif;
  font-size: 2.5rem;
  text-decoration: none;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 1.25rem;
}
.fullScreenMenu .menuContainer .menu li a::after {
  content: "";
  position: absolute;
  height: 0.25rem;
  background-color: #ffffff;
  width: 0%;
  border-radius: 0.625rem;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: all ease 0.25s;
}
.fullScreenMenu .menuContainer .menu li a.active::after, .fullScreenMenu .menuContainer .menu li a:hover::after {
  width: 100%;
}
.fullScreenMenu.show .overlay {
  visibility: visible;
}

JAVASCRIPT

/*
 * Included Jquery
 */
$(document).ready(function() {
  var animateTime = 250;

  $("body").on("click", ".fullScreenMenu .open", function() {
    $(".overlay").css({ visibility: "visible" });
    $(".overlay .block").animate(
      {
        width: 21 + "%"
      },
      animateTime,
      function() {
        $(".menuContainer").animate({
          top: 0
        },animateTime);
        $(".trigger")
          .removeClass("open")
          .addClass("close");
      }
    );
  });

  /*close state */

  $("body").on("click", ".fullScreenMenu .close", function() {
    $(".menuContainer").animate(
      {
        top: 100 + "%"
      },
      animateTime,
      function() {
        $(".overlay .block").animate({ width: 0 }, animateTime, function() {
          $(".overlay").css({ visibility: "hidden" });
          $(".trigger")
            .removeClass("close")
            .addClass("open");
        });
      }
    );
  });

  var CalculateHeight = function() {
    $(".fullScreenMenu .menuWrapper").slimscroll({
      height: document.documentElement.clientHeight - 70,
      width: 100 + "%"
    });
  };

  CalculateHeight();
  $(window).resize(function() {
    CalculateHeight();
  });
});

 

Add a Comment

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