0

I have the following jQuery script. It handles the display of a responsive menu (toggle the menu display when in mobile screens), but also restores the display of the menu, in desktop browsers after restoring the size of the browser window. The script works with no issues. I am wondering if there is room for improvement... What would be the efficient approach to this, so the script will not have to run unneeded functions when in screen sizes bigger than 768px.

jQuery(document).ready(function($) {
   $('.menu-toggle').click(function() {
      $('.navmenu').slideToggle('fast');    
   });

   $('.menu-toggle a').click(function(e) {
      e.preventDefault();
   });  

   $(window).resize( function() {
      var w = $(window).width();
      if (w > 768) {
         $('.navmenu').css('display','')
      }
   });
});
Sbpro
  • 948
  • 14
  • 27
  • I'd recommend looking at media queries to support this. You can replace at least some of the JS with media queries checking for screen size and hiding/showing elements. Here's a link: http://css-tricks.com/css-media-queries/ – roobeedeedada Jan 16 '14 at 10:05
  • thanks, but I am not asking about css. I want to know if there is a better way to write this script. – Sbpro Jan 16 '14 at 10:07
  • But the best performance happens when you combine the two. For example, another thing you could do to increase performance on mobile, [instead of using jQuery animations, you use CSS3 transitions](http://stackoverflow.com/questions/10984771/whats-faster-css3-transitions-or-jquery-animations). – roobeedeedada Jan 16 '14 at 11:08

0 Answers0