Home » Animated floating action menus using HTML, CSS and jQuery

Animated floating action menus using HTML, CSS and jQuery

by techmidpoint
Animated floating action menus using HTML, CSS and jQuery

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;
  } 

You may also like

Leave a Comment