3.3K
Animated floating action menus using HTML, CSS and jQuery
Hello, guys welcome to you another tutorial of techmidpoit. In this tutorial, I am going to make an Animated floating action menu using HTML, CSS, and jQuery. When you click the button the hidden menus display with animate. I am using here jQuery to make float menus. I have added jQuery with an HTML file.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Floating action menu</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="navigation">
<div class="toggle"> </div>
<ul>
<li>
<a href="#"><span class="icon">
<i class="fa fa-dashboard" aria-hidden="true"></i></span>
<span class="title">Dashboard</span></a>
</li>
<li>
<a href="#"><span class="icon">
<i class="fa fa-id-card" aria-hidden="true"></i></span>
<span class="title">Profile</span></a>
</li>
<li>
<a href="#"><span class="icon">
<i class="fa fa-comment" aria-hidden="true"></i></span>
<span class="title">Messages</span></a>
</li>
<li>
<a href="#"><span class="icon">
<i class="fa fa-cog" aria-hidden="true"></i></span>
<span class="title">Settings</span></a>
</li>
<li>
<a href="#"><span class="icon">
<i class="fa fa-user" aria-hidden="true"></i></span>
<span class="title">User</span></a>
</li>
<li>
<a href="#"><span class="icon">
<i class="fa fa-phone" aria-hidden="true"></i></span>
<span class="title">Contact</span></a>
</li>
<li>
<a href="#"><span class="icon">
<i class="fa fa-sign-out" aria-hidden="true"></i></span>
<span class="title">Sign Out</span></a>
</li>
</ul>
</div>
<script>
const navigation =
document.querySelector('.navigation');
document.querySelector('.toggle').onclick = function(){
this.classList.toggle('active');
navigation.classList.toggle('active');
}
$( function(){
$( ".navigation" ).draggable();
} );
</script>
</body>
</html>
CSS
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Arial;
font-weight: bold;
}
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background: #424246;
overflow:hidden;
}
.navigation{
position:relative;
width:50px;
height:50px;
background: #fff;
transition: width 0.5s, height 0.5s;
transition-delay:0s,0.75s;
transition:0.5s;
z-index:100000;
border-radius:4px;
overflow:hidden;
}
.navigation.active{
width:250px;
height:400px;
transition: height 0.5s, width 0.5s ;
transition-delay:0s,0.75s;
}
.navigation .toggle{
position:relative;
top:0;
left:0;
width:100%;
height:50px;
display:flex;
justify-content:flex-end;
background: #e01212;
transition:0.5s;
cursor:pointer;
}
.navigation .toggle.active{
background: #2196f3;
}
.navigation .toggle::before{
content:'+';
position:absolute;
font-size:2em;
display:flex;
justify-content:center;
align-items:center;
width:50px;
height:50px;
color: #fff;
font-weight:400;
transition:0.5s;
}
.navigation .toggle.active::before{
transform:rotate(315deg);
}
.navigation ul{
position:absolute;
left:0;
width:100%;
}
.navigation ul li{
position:relative;
list-style:none;
width:100%;
}
.navigation ul li a:hover{
background: #03a9f4;
}
.navigation ul li a{
position:relative;
display:block;
width:100%;
display:flex;
text-decoration :none;
color: #154367;
}
.navigation ul li a .icon{
position:relative;
display:block;
min-width:50px;
height:50px;
text-align:center;
line-height:50px;
}
.navigation ul li a .icon .fa{
font-size:24px;
color: #154367;
}
.navigation ul li a .title{
position:relative;
display:block;
line-height:50px;
text-align:start;
white-space:nowrap;
}
.navigation ul li:hover a .icon .fa,
.navigation ul li:hover .title{
color: #fff;
}
