Overlay Navigation

By Rafi

How do I use This?

A simple but effective navigation pattern. Works on any screen size. Swap in a hamburger menu icon instead if you'd like. We created variable for you Sass users to quickly customize the styles.

HTML

<nav role="navigation">
  <ul id="overlay-nav-menu" class="overlay-nav-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <a data-toggle-menu class="overlay-nav-menu-toggle" href="#overlay-nav-menu"><i class="fa fa-plus"></i></a>
</nav>

$overlay-nav-menu-toggle-size: 4rem;
$overlay-nav-menu-toggle-color: $black;
$overlay-nav-menu-link-height: 6.25rem;
$overlay-nav-menu-link-color: $white;
$overlay-nav-menu-link-border: 1px solid rgba($overlay-nav-menu-link-color, 0.5);
$overlay-nav-menu-bg: $primary-color;

.overlay-nav-menu-toggle {
  position:relative;
  font-size: $overlay-nav-menu-toggle-size;
  z-index: 5000;
  color: $overlay-nav-menu-toggle-color;
  top: -0.5rem;
  left: 1.5rem;
  transition: all 0.4s ease-in-out;

  &:hover {
    transition: all 0.4s ease-in-out;
    color: lighten($overlay-nav-menu-toggle-color, 30%);
  }
}

.overlay-nav-menu {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  margin:0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  list-style: none;
  background: $overlay-nav-menu-bg;
  background-size: cover;
  text-align: center;
  transform: translateX(-100%) rotateX(40deg);
  transition: all 400ms cubic-bezier(1.000, -0.400, 0.440, 0.985);

  li {
    font-size: 1.5rem;
  }

  a {
    display: block;
    color: $overlay-nav-menu-link-color;
    font-weight: bold;
    height: $overlay-nav-menu-link-height;
    line-height: $overlay-nav-menu-link-height;
    border-bottom: $overlay-nav-menu-link-border;
    text-decoration: none;

    &:hover {
      background-color: rgba($white, 0.6);
      color: $black;
    }
  }

  &.is-open {
    top: 0;
    opacity: 1;
    transform: perspective(200px) translateX(0) rotateX(0);
  }

  &.is-open ~ .overlay-nav-menu-toggle {
    display: inline-block;
    transition: all 0.4s ease-in-out;
    transform: rotate(135deg);
    color: lighten($overlay-nav-menu-toggle-color, 100%);
  }
}

.overlay-nav-menu-toggle {
  position: relative;
  font-size: 4rem;
  z-index: 5000;
  color: #0a0a0a;
  top: -0.5rem;
  left: 1.5rem;
  transition: all 0.4s ease-in-out;
}

.overlay-nav-menu-toggle:hover {
  transition: all 0.4s ease-in-out;
  color: #575757;
}

.overlay-nav-menu {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  margin: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  list-style: none;
  background: #1779ba;
  background-size: cover;
  text-align: center;
  -webkit-transform: translateX(-100%) rotateX(40deg);
          transform: translateX(-100%) rotateX(40deg);
  transition: all 400ms cubic-bezier(1, -0.4, 0.44, 0.985);
}

.overlay-nav-menu li {
  font-size: 1.5rem;
}

.overlay-nav-menu a {
  display: block;
  color: #fefefe;
  font-weight: bold;
  height: 6.25rem;
  line-height: 6.25rem;
  border-bottom: 1px solid rgba(254, 254, 254, 0.5);
  text-decoration: none;
}

.overlay-nav-menu a:hover {
  background-color: rgba(254, 254, 254, 0.6);
  color: #0a0a0a;
}

.overlay-nav-menu.is-open {
  top: 0;
  opacity: 1;
  -webkit-transform: perspective(200px) translateX(0) rotateX(0);
          transform: perspective(200px) translateX(0) rotateX(0);
}

.overlay-nav-menu.is-open ~ .overlay-nav-menu-toggle {
  display: inline-block;
  transition: all 0.4s ease-in-out;
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
  color: white;
}

$('[data-toggle-menu]').on("click", function(){
  $("#overlay-nav-menu").toggleClass("is-open");
});

Overlay Navigation

By Rafi

Topbar Mega-menu Dropdown

Ecommerce Footer

Breadcrumb Nav with Counter

Overlay Navigation

By Rafi

Similar Building Blocks

Topbar Mega-menu Dropdown

Ecommerce Footer

Breadcrumb Nav with Counter