- Get link
- X
- Other Apps
Source Code:
Note: Download jQuery v3.1.1 File
Note: Download jQuery v3.1.1 File
<head>
<title>Hamburger Navigation Icon</title>
<script src="jQuery v3.1.1.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$('.icon').click(function(){
$('.icon').toggleClass('active');
})
})
</script>
<style>
body
{
margin:0;
padding:0;
background:#5cff40;
}
.icon
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:80px;
height:80px;
cursor:pointer;
/*background:#2e2e2e;*/
}
.hamburger
{
width:50px;
height:6px;
background:#fff;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
box-shadow:0 2px 5px rgba(0,0,0,.2);
transition:.5s;
}
.hamburger:before,.hamburger:after
{
content:'';
position:absolute;
width:50px;
height:6px;
background:#fff;
box-shadow:0 2px 5px rgba(0,0,0,.2);
transition:.5s;
}
.hamburger:before
{
top:-16px;
}
.hamburger:after
{
top:16px;
}
.icon.active .hamburger
{
background:rgba(0,0,0,0);
box-shadow:0 2px 5px rgba(0,0,0,0);
}
.icon.active .hamburger:before
{
top:0;
transform:rotate(45deg);
}
.icon.active .hamburger:after
{
top:0;
transform:rotate(135deg);
}
</style>
</head>
<div class="icon">
<div class="hamburger"></div>
</div>
Output:
Comments
Post a Comment
If you any Query and get more information please comment it. Thanks for visit our blog.