title: jquery responsive Menu
body: <p>i have create a Navigation  (my first bigger script - Im learning ). I have nothing found on google who helps me.</p>
  
  <p>I would use on Desktop , and mobile devices.</p>
  
  <p>On Desktop it works and if i resize the desktop width it change to the mobile version. If i show on a mobile device i have only the desktop version.</p>
  
  <p><a href="http://www.kcserver.info/testarea/video2brain/nav/kreativ-nav/nav.html" rel="nofollow">http://www.kcserver.info/testarea/video2brain/nav/kreativ-nav/nav.html</a></p>
  
  <p>The Javascript </p>
  
  <hr>
  
  <pre><code>// Navigation Script
  
  $(function () {
  
      // Reload the Script after Resize of the Window 
      $(window).bind('resize', function (e) {
          if (window.RT) clearTimeout(window.RT);
          window.RT = setTimeout(function () {
              this.location.reload(false); /* false to get page from cache */
          }, 200);
  
      });
  
      // end Reload of the script
  
      $(window).load(function () {
          // Cache the elements we'll need
          var menu = $('#nav-bar');
          var menuList = menu.find('ul:first');
          var listItems = menu.find('li').not('#responsive-menu');
  
          // Create responsive Menu Version 4Version 4
          menuList.prepend('&lt;li id="responsive-menu"&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;&lt;/li&gt;'); // here you can change the text of the repsonsive Menu
  
          // show the responsiv menu links
          menu.on('click', '#responsive-menu', function () {
              listItems.slideToggle();
              listItems.addClass('collapsed');
          });
      });
  });
  
  
  // Now the schript change  from Desktop to responsive by 681 px. You can change this value. Dont forget to change the mediaqueries in the nav.css File
  $(function () {
      //
      if ($(window).width() &gt; 681) {
          $("ul#menu li ul li:has(ul)").find("a:first").addClass("active");
          $("ul#menu li").hover(function () {
  
              $(this).addClass("hover");
              $('ul:first', this).css('visibility', 'visible');
              $(this).children('ul').delay(20).slideDown(300); // speed of the slide
  
          }, function () {
              $(this).removeClass("hover");
              $('ul:first', this).css('visibility', 'hidden');
              $(this).children('ul').delay(20).slideUp(200); // speed of the slide
          });
      } else {
          $("ul#menu li ul li:has(ul)").find("a:first").addClass("subnav");
          var $mobil = $("ul#menu li ");
          $mobil.children("ul").css("display", "none");
          $mobil.filter(":has(ul)").children(":first-child").click(function () {
              $(this).next().slideToggle(); // animation to sho teh menu
              //$(this).parent().siblings().children("ul:visible").slideUp();  // activate this if you will sho only 1 activ Menupoint
              $(this).parent().removeClass('closed');
  
          });
      }
  });
  
  //
  
  $(window).resize(function () {
      if ($('body').width() &lt; 960) {
          console.log("Less than 960");
  
      } else {
          console.log("More than 960");
      }
  });
  </code></pre>