3D Side Navigation using CSS and Javascript

Making something new and exciting is something everyone longs for. On the off chance that you can make some astonishing slide menus for your website, then why not make it. However, sometimes you might be out of time and should do your work at the earliest opportunity. For that you can basically utilize the free code to create awesome sliding menu. In the following menu auther just use CSS to create 3d looking sliding menu. However there is some stunning menu right here. As should be obvious that there is each animation that a menu need like hover impact and menu indicator.

3D Side Navigation using CSS and Javascript

HTML

<body>
  <header>
    <button aria-label='Toggle menu' class='nav-button button-lines button-lines-x close' role='button' type='button'>
      <span class='lines'></span>
    </button>
  </header>
  <main>
    <div class='container'>
      <h1>3D Side Navigation</h1>
    </div>
  </main>
  <nav class='nav-wrapper'>
    <ul class='nav'>
      <li class='active'>
        <a href='#'>Page 1</a>
      </li>
      <li>
        <a href='#'>Page 2</a>
      </li>
      <li>
        <a href='#'>Page 3</a>
      </li>
      <li>
        <a href='#'>Page 4</a>
      </li>
    </ul>
    <span class='nav-marker color-1'></span>
  </nav>
</body>


CSS

*, *:before, *:after {
  box-sizing: border-box;
}
 
html {
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
}
 
body {
  background-color: #333;
}
 
h1, h2, h3, h4, h5, h6 {
  color: #f2f2f2;
}
 
h1 {
  font-size: 2.441rem;
}
 
a {
  color: #f2f2f2;
  text-decoration: none;
}
a:focus, a:hover {
  text-decoration: underline;
}
 
header {
  height: 80px;
  left: 0;
  padding: 0.5rem;
  position: fixed;
  text-align: right;
  top: 0;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
  width: 100%;
  z-index: 500;
}
 
main {
  background-color: #485274;
  height: 100vh;
  padding-top: 80px;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition: -webkit-transform 0.6s 50ms;
  transition: -webkit-transform 0.6s 50ms;
  transition: transform 0.6s 50ms;
  transition: transform 0.6s 50ms, -webkit-transform 0.6s 50ms;
}
 
.container {
  margin: 0 auto;
  width: 80%;
}
 
.nav-button {
  text-transform: uppercase;
}
 
.nav-wrapper {
  background-color: #343c55;
  box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.75);
  height: 100%;
  padding-top: 80px;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: visibility 0.6s, -webkit-transform 0.6s;
  transition: visibility 0.6s, -webkit-transform 0.6s;
  transition: transform 0.6s, visibility 0.6s;
  transition: transform 0.6s, visibility 0.6s, -webkit-transform 0.6s;
  visibility: hidden;
  width: 25vw;
}
.nav-visible .nav-wrapper {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  visibility: visible;
}
 
.nav {
  position: relative;
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
}
.nav-visible .nav {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
.nav li.active a {
  background-color: #212635;
}
.nav a {
  display: block;
  line-height: 1.4;
  padding: 0.7em 0.5em 0.7em 1.4em;
  text-transform: uppercase;
}
.nav a:focus, .nav a:hover {
  background-color: #2b3145;
  text-decoration: none;
}
 
.nav-marker {
  background-color: currentColor;
  height: 2.8rem;
  position: absolute;
  right: 0;
  top: 80px;
  width: 3px;
}
.nav-marker:before {
  border: 5px solid transparent;
  border-right-color: inherit;
  content: "";
  height: 0;
  position: absolute;
  right: 3px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0;
}
 
.color-1 {
  color: deeppink;
}
 
.button-lines {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-block;
  padding: 1rem 0.5rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
 
.lines {
  background: #fff;
  border-radius: 0.2rem;
  display: inline-block;
  height: 0.2rem;
  width: 2rem;
  position: relative;
}
.lines:hover {
  background: #000;
}
.lines:after, .lines:before {
  background: #fff;
  border-radius: 0.2rem;
  display: inline-block;
  height: 0.2rem;
  width: 2rem;
  content: "";
  left: 0;
  position: absolute;
}
.lines:after:hover, .lines:before:hover {
  background: #000;
}
.lines:after {
  top: 0.5rem;
}
.lines:before {
  top: -0.5rem;
}
 
.button-lines-x .lines {
  -webkit-transition: background .3s ease;
  transition: background .3s ease;
}
.button-lines-x .lines:after, .button-lines-x .lines:before {
  -webkit-transform-origin: 50% 50% 0;
          transform-origin: 50% 50% 0;
  -webkit-transition: top .3s .4s ease, -webkit-transform .3s ease;
  transition: top .3s .4s ease, -webkit-transform .3s ease;
  transition: top .3s .4s ease, transform .3s ease;
  transition: top .3s .4s ease, transform .3s ease, -webkit-transform .3s ease;
}
.nav-visible .button-lines-x .lines {
  background: transparent;
}
.nav-visible .button-lines-x .lines:after, .nav-visible .button-lines-x .lines:before {
  top: 0;
  -webkit-transition: top .3s ease, -webkit-transform .3s .3s ease;
  transition: top .3s ease, -webkit-transform .3s .3s ease;
  transition: top .3s ease, transform .3s .3s ease;
  transition: top .3s ease, transform .3s .3s ease, -webkit-transform .3s .3s ease;
}
.nav-visible .button-lines-x .lines:after {
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
          transform: rotate3d(0, 0, 1, 45deg);
}
.nav-visible .button-lines-x .lines:before {
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
          transform: rotate3d(0, 0, 1, -45deg);
}


JS

let navButton = document.querySelector(".nav-button");
 
navButton.addEventListener("click", e => {
  e.preventDefault();
 
  // toggle nav state
  document.body.classList.toggle("nav-visible");
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by iamarend. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.