6.1K
Animated Sidebar navigation menus with HTML and CSS
Hello, reader welcome to in techmidpoint tutorial. In this tutorial, I am going to create Awesome Animated Sidebar navigation menus with HTML and CSS. It displays on the left side with icons. When we move the mouse over icons the hidden text menus display with an animation effect.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Awesome Animated Sidebar navigation menus with html and css
</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="menu">
<div class="menuitem text"><a href ="#"><i class="fa fa-home"></i><span>Home</span></a></div>
<div class="menuitem text"><a href ="#"><i class="fa fa-list-alt"></i><span>Categories</span></a></div>
<div class="menuitem text"><a href ="#"><i class="fa fa-cog"></i><span>Services</span></a></div>
<div class="menuitem text"><a href ="#"><i class="fa fa-camera"></i><span>Gallery</span></a></div>
<div class="menuitem text"><a href ="#"><i class="fa fa-image"></i><span>Portfolio</span></a></div>
<div class="menuitem text"><a href ="#"><i class="fa fa-envelope"></i><span>Contact</span></a></div>
<div class="menuitem text"><a href ="#"><i class="fa fa-user"></i><span>Login</span></a></div>
</div>
<div class="bg">
<img src="man.jpg">
</div>
</body>
</html>
CSS
* {
color: white;
box-sizing: border-box;
}
body {
background: #34495e;
margin: 0;
padding: 0;
border: 0;
}
.bg {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
text-shadow: 3px 3px 0px #2c3e50;
}
.bg img{
width:200px;
height: 200px;
border-radius: 50%;
border:5px solid #fff;
}
.menu {
position: fixed;
height: 100%;
width: 80px;
background: #262626;
transition:width 1s;
overflow: hidden;
font-family: Arial;
z-index: 99;
font-size: 18px;
text-transform: uppercase;
font-weight: 400;
}
.menu:hover {
width: 220px;
}
.menuitem span {
position: absolute;
left:80px;
top:20px;
transition:color 1s;
color:rgba(255,255,255,0);
}
.menu:hover .menuitem span {
color:rgba(255,255,255,1);
}
.menuitem {
position: relative;
padding: 20px;
transition:border .5s, background .2s;
}
.menuitem:hover {
background: #34495e;
cursor: pointer;
}
.text:hover{
border-left:20px solid #16a085;
}
For More Tutorials Please Click Here
