Toolbar menu with elastic animation effect using jquery and CSS3

Brief Tutorial

This is a toolbar menu special effect with elastic animation effect made using jquery and CSS3. The toolbar menu only displays a circular button by default. When the button is clicked, the submenu items will expand with elastic animation, and the effect is very cool.

Usage method

Introduce jquery and the font icon file font-awesome.css into the page.

<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="path/to/jquery.min.js"></script>

HTML structure

The HTML structure of the toolbar menu is as follows:

<div id="wrapper">
  <div id="toolbar">
        <div class="button"></div>
        <ul class="icons">
              <li><i class="fa fa-home fa-2x" aria-hidden="true"></i></li>
              <li><i class="fa fa-user fa-2x" aria-hidden="true"></i></li>
              <li><i class="fa fa-star fa-2x" aria-hidden="true"></i></li>
              <li><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i></li>
              <li><i class="fa fa-paper-plane-o fa-2x" aria-hidden="true"></i></li>
        </ul>
      </div>
</div>

CSS style

Add the following CSS style to the toolbar menu:

#wrapper {
  text-align:center;
  font-family: 'Lato', sans-serif;
  text-transform:uppercase;
}
#toolbar {  
  width:100%;
  max-width:670px;
  min-width:550px;
  margin: 70px auto;
}
.button {
  width:70px;
  height:70px;
  border-radius:50%;
  background-color:#3AB09E;
  color:#ffffff;
  text-align:center;
  font-size:3.5em;
  position:relative;
  left:50%;
  margin-left:-35px;
  z-index:1;
}
.button,.icons{
  -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);
          transition:  all 1s cubic-bezier(.87,-.41,.19,1.44);
}
.button:after {
  content:"+";
}
.button.active {
-webkit-transform: rotate(45deg);
 transform: rotate(45deg);
  left:60px;
}
.icons {
  width:0%;
  overflow:hidden;
  height:36px;
  list-style:none;
  padding:16px 10px 10px 50px;
  background-color:#ffffff;
  box-shadow: 1px 1px 1px 1px #DCDCDC;
  margin:-68px 0 0 45%;
  border-radius: 2em;
}
 
.icons.open {
  width:80%;
  margin:-68px 0 0 5%;
  overflow:hidden;
}
 
.icons li {
  display: none;
  width:10%;
  color:#3AB09E;
}
 
.icons.open li {
  width:16%;
  display: inline-block;
}

Initialization plug-in

After the page DOM element is loaded, use the following jquery code to open and close the toolbar menu.

$( ".button" ).click(function() {
  $(this).toggleClass( "active" );
  $(".icons").toggleClass( "open" );
});

The above is the content of the toolbar menu with elastic animation effect of jquery and CSS3. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!