/ Off-Canvas Menu

Off-canvas menu with CSS and a touch of JavaScript

Off-canvas menu with CSS and a touch of JavaScript

OFF-CANVAS MENU

Off-canvas menu with CSS and a touch of JavaScript.

Made with

Html
Css
Javascript

Html

<section class="top-banner">
  <div class="top-banner-overlay">
    <h1>Big Title Here</h1>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</section>
<nav class="top-nav">
  <div class="menu-wrapper">
    <ul class="menu">
      <li>
        <a href="">home</a>
      </li>
      <li>
        <a href="">about</a>
        <ul class="sub-menu">
          <li>
            <a href="">— company</a>
          </li>
          <li>
            <a href="">— people</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="">projects</a>
      </li>
      <li>
        <a href="">clients</a>
      </li>
      <li>
        <a href="">contact</a>
      </li>
    </ul>
    <button class="menu-close" aria-label="close menu">✕</button>
  </div>
  <div class="fixed-menu">
    <h2 class="logo">LOGO</h2>
    <button class="menu-open" aria-label="open menu">☰</button>
    <ul class="socials">
      <li>
        <a href="">facebook</a>
      </li>
      <li>
        <a href="">twitter</a>
      </li>
      <li>
        <a href="">instagram</a>
      </li>
    </ul>
  </div>
</nav>

Css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

button {
  border: none;
  background: transparent;
  outline: none;
  cursor: pointer;
}

button:active {
  color: black;
}

a {
  text-decoration: none;
  color: black;
}

body {
  font: normal 16px/1.5 Helvetica, sans-serif;
}


/* .top-banner
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.top-banner {
  display: flex;
  width: calc(100% - 150px);
  height: 100vh;
  transform: translateX(150px);
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/unsplash.jpg) no-repeat center / cover;
}

.top-banner-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 350px;
  padding: 20px;
  transition: transform .7s;
  color: white;
  background: rgba(0, 0, 0, .7);
}

.top-banner-overlay.is-moved {
  transform: translateX(350px);
}

.top-banner-overlay.is-moved::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 20px;
  box-shadow: 0 0 10px black;
}

.top-banner-overlay p {
  font-size: 1rem;
  margin-top: 10px;
}

.top-nav li + li {
  margin-top: 7px;
}


/* .menu-wrapper
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.top-nav .menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 350px;
  padding: 20px;
  transform: translateX(-200px);
  transition: transform .7s;
  background: #B1FFE5;
}

.top-nav .menu-wrapper.is-opened {
  transform: translateX(150px);
}

.top-nav .menu-wrapper .menu {
  opacity: 0;
  transition: opacity .4s;
}

.top-nav .menu-wrapper.is-opened .menu {
  opacity: 1;
  transition-delay: .6s;
}

.top-nav .menu-wrapper .menu a {
  font-size: 1.2rem;
}

.top-nav .menu-wrapper .sub-menu {
  padding: 10px 0 0 7px;
}

.top-nav .menu-wrapper .menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 1.6rem;
}


/* .fixed menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.top-nav .fixed-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 150px;
  padding: 20px;
  background: aquamarine;
}

.top-nav .fixed-menu .menu-open {
  font-size: 1.8rem;
  text-align: left;
  margin: 30px 0 auto;
  width: 28px;
}

Javascript

const menuOpen = document.querySelector(".top-nav .menu-open");
const menuClose = document.querySelector(".top-nav .menu-close");
const menuWrapper = document.querySelector(".top-nav .menu-wrapper");
const topBannerOverlay = document.querySelector(".top-banner-overlay");

function toggleMenu() {
  menuOpen.addEventListener("click", () => {
    menuWrapper.classList.add("is-opened");
    topBannerOverlay.classList.add("is-moved");
  });
  
  menuClose.addEventListener("click", () => {
    menuWrapper.classList.remove("is-opened");
    topBannerOverlay.classList.remove("is-moved");
  });
}

toggleMenu();

Author

Envato Tuts+

Demo

See the Pen Off-Canvas Menu With CSS and a Touch of JavaScript by Envato Tuts+ (@tutsplus) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More