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!
Great work…
Thank You 🙂
Thank you