Expanding Menu With Javascript

<div class="menu" >
  <div class="toggle" id="toggle" onclick="expand()">
    <i class="material-icons" id="toggle1">
      add
    </i>
  </div>
  <div class="items" id="items">
    <a href="#" id="item1">
      <i class="material-icons">
        person
      </i>
    </a>
    <a href="#" id="item2">
      <i class="material-icons">
        message
      </i>
    </a>
    <a href="#" id="item3">
      <i class="material-icons">
        camera_alt
      </i>
    </a>
    <a href="#" id="item4">
      <i class="material-icons">
        notifications
      </i>
    </a>
  </div>
</div>

Centering the Toolbar Menu:

We start coding the CSS by setting up a shade of off-white with hex code #eeeeee. Then we clean up the default margins and padding by setting them both to 0. Now we center the toolbar menu using flex.

body{
   background-color: #eeeeee;
   padding: 0;
   margin: 0;
   height: 100vh;
   width: 100vw;
   display: flex;
   align-items: center;
   justify-content: center;
}

Styling the Toolbar Menu:

We need the toggle button and toolbar to be arranged horizontally within the toolbar menu; therefore, we use ‘row’ as the flex-direction.

.menu{
   display: flex;
   flex-direction: row;
   position: relative;
}

Styling the Toggle Button:

We style the toggle <div> by setting the background color to #30BDF2. The dimensions for this <div> are 80*80pixels. We again use the flex method to center the icon inside this <div>. See how easy and useful flex can be for centering stuff?

.toggle{
   background-color:#30BDF2;
   height: 80px;
   width: 80px;
   color:white ;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: 1s;
}

Styling the Menu Items:

Initially, we need to hide these items; hence, we set the scaling of these to 0. We set the transition duration of these items to 0.5s so we can have smooth transitions during the expanding and collapsing of the toolbar menu. The toolbar menu expands and collapses from the left side; we, therefore, set the transform-origin to the left.

.items{
   display: flex;
   flex-direction: row;
   transform: scaleX(0);
   transform-origin: left;
   transition: 0.5s;
}

Styling the Anchor Tags:

Next, we select all anchor tags who are children of div with class name items. They have the same dimensions as that of the toggle <div>. We eliminate the underlines by setting ‘text-decoration’ to ‘none’.

.items>a{
   display: flex;
   background-color: white;
   height: 80px;
   width:80px;
   color:#b2b2b2 ;
   text-decoration: none;>
   align-items: center;
   justify-content: center;
}

Styling the Icons:

We style the material icons similar to how we style text. Let us scale up the size of the ‘+’ icon a bit by setting ‘font-size’ to ’60px’.
We set a ‘font-size’ of ’30px’ to the tool icons.

.toggle>.material-icons{
   font-size: 60px;
}
a>.material-icons{

   font-size: 30px;

}

Adding the Hover Effect:

We indicate the hover state of icons by scaling up the icons by a bit every time the mouse hovers over them.

a:hover>.material-icons{
   font-size: 40px;
   color:#30BDF2;
}	

var state=false;
  function expand(){
    if(state==false){
      document.getElementById('items').style.transform='scaleX(1)';
      document.getElementById('toggle1').style.transform='rotate(45deg)';
        state=true;
  }
    else{
      document.getElementById('items').style.transform='scaleX(0)';
      document.getElementById('toggle1').style.transform='rotate(0deg)';
	state=false;
  }
}