3D Navigation menu
3D Navigation menu

Hy guys, What if I ask you what is an important section of a website? In my opinion, it is Navigation Bar. If a website has good navigation, it will attract users to navigate other pages. So here on that basis today we will create a 3d look navigation with dropdown effect. So let’s Start our work!

First of all, we will create an index.html file like this.

<!DOCTYPE html>
<head>
<title>3D Navigation Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>  
    <div id="nav">
      <ul class="nav-menu">
        <li><a href="#" class="three-d">
          Home
          <span class="three"><span class="front">Home</span><span class="back">Home</span></span>
        </a></li>
        <li><a href="#" class="three-d">
          Contact
          <span class="three"><span class="front">Contact</span><span class="back">Contact</span></span>
        </a></li>
        <li><a href="#" class="three-d">
          Language
          <span class="three"><span class="front">Language</span><span class="back">Language</span></span>
        </a>
          <ul class="clearfix unstyled drop-menu">
            <li><a href="#" class="three-d">
                Html5
                <span class="three"><span class="front">Html5</span><span class="back">Html5</span></span>
              </a></li>
              <li><a href="#" class="three-d">
                Css3
                <span class="three"><span class="front">Css3</span><span class="back">Css3</span></span>
              </a></li>
              <li><a href="#" class="three-d">
                JavaScript
                <span class="three"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
              </a></li>
          </ul>
        </li>
        <li><a href="#" class="three-d">
          About Us
          <span class="three"><span class="front">About Us</span><span class="back">About Us</span></span>
        </a></li>
            
      </ul>
    </div>   
</body>
</html>

Now Create style.css file. and write down the below code.

     
body {
  background-image: url(ok.png);
    height: 100vh;
   background-size: cover;
    font-family: 'Roboto Condensed', sans-serif;
}
ul, li {
  list-style: none outside none;
}

.nav-menu {
  display: block;
  background: #74adaa;
  width:1100px;
  margin: 30px auto 30px;
}
.nav-menu > li {
  display: inline;
  float:left;     
  border-right:1px solid #333;
  position: relative;
}
.nav-menu > li:last-child {
  border-right: none;
}
.nav-menu li a {
  color: #fff;
  display: block;
  text-decoration: none;
  font-family: 'Roboto Condensed', sans-serif;   
  font-smoothing: antialiased;
  text-transform: uppercase;
  overflow: visible;
  line-height: 20px;
    font-weight: 300;
  font-size: 14px;
    letter-spacing: 1px;
  padding: 15px 30px 15px 31px;     
}

.three-d {   
  perspective: 200px;   
  transition: all .07s linear;
  position: relative;
}

.three-d:not(.active):hover {
  cursor: pointer;
}

.three-d:not(.active):hover .three, 
.three-d:not(.active):focus .three {   
  transform: translateZ(-25px) rotateX(90deg);
}

.three {  
  transition: all .3s ease-out;   
  transform: translatez(-25px);   
  transform-style: preserve-3d;   
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.front {  
  transform: rotatex(0deg) translatez(25px);
}

.back {   
  transform: rotatex(-90deg) translatez(25px);
  color: #FFE7C4;
}

.front, .back {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #333;
  padding: 15px 30px 15px 31px; 
  color: white;  
    pointer-events: none;   
    box-sizing: border-box;
}
.nav-menu li .active .front,
.nav-menu li .active .back,
.nav-menu li a:hover .front,
.nav-menu li a:hover .back {
  background-color: yellow;   
  background-size: 5px 5px;
  background-position: 0 0, 30px 30px; 
    color: black;
   
}
.nav-menu ul {
  position: absolute;
  left: -40px;
  text-align: left;
  line-height: 40px;
  font-size: 10px;
  width: 200px; 
  transition: all 0.3s ease-in;   
  transform-origin: 0px 0px;  
  transform: rotateX(-90deg);   
  backface-visibility: hidden;
}
.nav-menu > li:hover ul {
  display: block;  
  transform: rotateX(0deg);
}

Hope you like this blog, Please Comment and share it with your friends!

Thank You!

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

This Post Has 3 Comments

Leave a Reply