How close/hide a sideBar menu after clicking when a mobile screen

16 views Asked by At

In case of mobile screen

  • The vertical menu must displayed only when click on the toogle
  • After clicking on item the vertical menu will disapears

HTML

                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                    <!-- Sidebar toggle button-->
                    <span class="sr-only">Toggle navigation</span>
                </a>

Vertical Menu

<div class="container-fluid"><div class="row"><div class="moduleContainer_1"></div></div></div>

<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar" id="sidebar_menu_id_master">

  <!-- Sidebar Menu -->
  <ul class="sidebar-menu" id="sidebar_menu_id">
    <li><a href="{{'APP_MODULE_70_01.URL'| translate }}"><i class="fa fa-stethoscope" aria-hidden="true"></i><span>{{'APP_MODULE_70_01.LABEL'| translate }}</span></a></li>
    <li class="active"><a href="#"><i class="fa fa-plus-square"></i> <span>{{'APP_MODULE_70_02.LABEL'| translate }}</span></a></li>
    <li><a href="{{'APP_MODULE_70_03.URL'| translate }}"><i class="fa fa-user-md"></i> <span>{{'APP_MODULE_70_03.LABEL'| translate }}</span></a></li>
    <li><a href="{{'APP_MODULE_70_04.URL'| translate }}"><i class="fa fa-hospital-o"></i> <span>{{'APP_MODULE_70_04.LABEL'| translate }}</span></a></li>
  </ul>
  <!-- /.sidebar-menu -->   
</section>
<!-- /.sidebar -->

JavaScript

`<script>

  $(document).ready(function() {

        $(".sidebar-menu>li").click(function() {
            windowsize = $(window).width();
            if (windowsize >= 1025)         {   
                                                $(".sidebar-menu").css("display", "block");
                                                
                                            } 
                                      else  {   
                                                if (   parseInt( $('.sidebar-menu').css('width')) > 0 ) {

                                                    $('.row-offcanvas').toggleClass('toggled');
                                                
                                                }
                                            }

        });
    });
      
</script>`
0

There are 0 answers