responsive menu should close when clicked

responsive menu should close when clicked

Dear Sir


the menu works perfectly fine 

on PC, Lap Top sand even Mobile 
 
 However in case of Mobile (when I view it on Mobile) and click on internal link  for navigation e.g. About us
the navigation / scroll happens  but menu remsains open

I want the menu close rather collapse and then navigate to the internal link
or
vice a versa

Please help
  
My Jquery code


  1. ( function( $ ) {
  2. $( document ).ready(function() {
  3. $('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
  4.     var activeElement = $('#cssmenu>ul>li:first');

  6.     $('#cssmenu>ul>li').each(function() {
  7.         if ($(this).hasClass('active')) {
  8.             activeElement = $(this);
  9.         }
  10.     });


  13. var posLeft = activeElement.position().left;
  14. var elementWidth = activeElement.width();
  15. posLeft = posLeft + elementWidth/2 -6;
  16. if (activeElement.hasClass('has-sub')) {
  17. posLeft -= 6;
  18. }

  20. $('#cssmenu #pIndicator').css('left', posLeft);
  21. var element, leftPos, indicator = $('#cssmenu pIndicator');

  23. $("#cssmenu>ul>li").hover(function() {
  24.         element = $(this);
  25.         var w = element.width();
  26.         if ($(this).hasClass('has-sub'))
  27.         {
  28.          leftPos = element.position().left + w/2 - 12;
  29.         }
  30.         else {
  31.          leftPos = element.position().left + w/2 - 6;
  32.         }

  34.         $('#cssmenu #pIndicator').css('left', leftPos);
  35.     }
  36.     , function() {
  37.      $('#cssmenu #pIndicator').css('left', posLeft);
  38.     });

  40. $('#cssmenu>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
  41. $( "#menu-button" ).click(function(){

  43.      if ($(this).parent().hasClass('open')) {
  44.      $(this).parent().removeClass('open');
  45.      }
  46.      else {
  47.      $(this).parent().addClass('open');
  48.      }
  49.      });
  50. });
  51. } )( jQuery );
  52.  /*-------- Code to close menu-----*/
  53. $('#cssmenu li').on('click', function(){
  54.         $("#cssmenu").hide();
  55.         $("#menu-icon").removeClass("active");
  56.     });


I tried

  1. $('#cssmenu li').on('click', function(){
  2.         $("#cssmenu").hide();
  3.         $("#menu-icon").removeClass("active");
  4.     });

My html

  1. <style>
  2. .smallheading
  3. {
  4. font-size:9px;
  5. }
  6. </style> 
  7. <header id="header"  style="z-index:999" >
  8.   <!--Navigation--> 
  9. <div class="s-1 l-1">     
  10. <a  href="index.php" > <img src=images/logonew.png alt="logo" width="185" height="50" role="banner" border="0"></a>  
  11. </div>  
  12.                    
  13.  <div id='cssmenu'   class="s-10 l-10" style="margin-left:0px; padding:0px;  " > 
  14. <ul id="popup-menu">
  15.                      
  16.                       <li><a href="index.php">Home</a></li>
  17.                         <li><a   href="index21.php#about">About</a></li>
  18.                             <li><a href="photographyimages.php?id=140"><span class="smallheading">Wedding </span><br />Photography </a></li>
  19.                             <li><a class="scroll"  href="index21.php#wedding-film"><span>Wedding </span>Films</a></li>
  20.                             <li><a href="photographyimages.php?id=139">Pre-Weddings </a></li>
  21.                             <li><a href="corporateevents.php"><span class="smallheading">Corporate</span>Events </a></li>
  22.                             <li><a href="#">Services</a>
  23.                              <ul>
  24.                               <?php  $query="select * from photogallery where status=1 order by srno  ";
  25.  
  26.                                mysql_select_db($database_DBconnect, $DBconnect);
  27.                                 $Result = mysql_query($query, $DBconnect) or die(mysql_error());
  28.                                 $rows = mysql_fetch_assoc($Result);
  29.                                 $totalrows=mysql_num_rows($Result);
  30.                              do {
  31.  ?>
  32.                               <li><a href="photographyimages.php?id=<?php echo $rows['id'];?>">
  33.        <?php echo $rows['name'];?> </a>
  34.                               </li>
  35.                             <?php } while($rows = mysql_fetch_assoc($Result));
  36.    
  37.                                 ?>
  38.                             </ul>
  39.                             </li> 
  40.                       <!--  <li><a href="testimonial.php">Testimonials</a></li> -->
  41.                             <li><a class="scroll"  href="index21.php#contact">Contact</a></li>
  42.                             <li><a href="freelancer.php" target="_self"><span>For</span> Freelancer</a></li>
  43.                            
  44.                       </ul>
  45.                     </div>  
  46.                 
  47.         <!--/ Navigation-->
  48. </header>