4.2K
3D sidebar navigation menus on hover effect
Hello guys, in this tutorial I am going to show you 3D sidebar navigation menus. When you see it the first time on the screen you only see the menus icons. If you move the mouse over the menu icons then the 3D effect shows every menu.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>3D Sidebar navigation menus on hover effect</title>
</head>
<body>
<ul class="menu">
<li class="menu_list">
<span class="front fas fa-home"></span>
<a href="#" class="side">home</a>
</li>
<li class="menu_list">
<span class="front fas fa-newspaper"></span>
<a href="#" class="side">news</a>
</li>
<li class="menu_list">
<span class="front fas fa-blog"></span>
<a href="#" class="side">blog</a>
</li>
<li class="menu_list">
<span class="front fas fa-info"></span>
<a href="#" class="side">about</a>
</li>
<li class="menu_list">
<span class="front fas fa-briefcase"></span>
<a href="#" class="side">projects</a>
</li>
<li class="menu_list">
<span class="front fas fa-address-book"></span>
<a href="#" class="side">contact</a>
</li>
<li class="menu_list">
<span class="front fas fa-user"></span>
<a href="#" class="side">Login</a>
</li>
</ul>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: arial;
font-size: 14px;
}
ul.menu{
display: inline-block;
list-style: none;
}
li.menu_list{
height: 85px;
width: 85px;
position: relative;
}
li.menu_list .front,a.side{
display: flex;
align-items: center;
justify-content: center;
height: 86px;
width: 100%;
padding: 30px;
position: absolute;
top:0;
left: 0;
text-decoration: none;
text-transform: uppercase;
transition: all .5s ease-out;
cursor: pointer;
font-weight: bold;
}
li.menu_list .front{
background: #34465d;
color: #fffc00;
transform-origin: 0 0;
font-size: 30px;
}
a.side{
background: #fffc00;
color: #34465d;
transform-origin: 0 0 85px;
transform: rotateY(-90deg);
}
li.menu_list:hover a.side{
transform: rotateY(0deg);
}
li.menu_list:hover .front{
transform: rotateY(90deg);
}
For More Tutorials Please Click Here
