Creating sidenavbar toggle menu by using jquery.

Step1:

Welcome to designers dairy blog,We are going to discuss about, how to create a sidenavbar window by using jquery.

Step2:

To collapse till icons, we have to set the width:56px  in Css class (.close-navbox).

 



Step3:

We have to write the click function .fa-angle-left to expand and collapse the SideNav bar.

 <script>
 $(document).ready(function()
         {
            $('.fa-angle-left').click(function(event)
             {
             event.preventDefault();
              $('.menu-text').removeClass('do').removeClass('bluebg');
                      if($('.main-sidebar').width() === 230)
                    {                         
                            $('.fa-angle-left').removeClass('fa-angle-left').addClass('fa-angle-right');
                            $('.main-sidebar').addClass('close-navbox');
                            $('.content-wrapper').addClass('wide-screen');
                    }
                        else
                       {
                        $('.fa-angle-right').removeClass('fa-angle-right').addClass('fa-angle-left');
                         $('.main-sidebar').removeClass('close-navbox');
                         $('.content-wrapper').removeClass('wide-screen'); 
                       }
     });



</script>


Step4:

When the Menu icons are collapse, While hovering the icons the menu item text should display. So, We  have to write a hover function

<script>
 $(document).ready(function()  {
   $(".treeview").hover(function() {
      
               if($('.main-sidebar').width() === 56)
               {
                 $('.menu-text').addClass('do');                  
                 $(this).children().find('span').removeClass('do').addClass('bluebg');
               }
              }); 
         });

</script>

    















<style>
    .bluebg
    {
      background-color:#1d2531;   padding:12px 80px 12px 20px;
      text-align:left !important;
    }     
    .do
    {
     visibility:hidden
     }
     .close-navbox
        {
            width: 56px;
        }
        .wide-screen
        {
            margin-left:50px
        }
       
    </style>


Step6:

Enjoy Folks