Mobile Navigation Toggle with jQuery

Taken from web designer wall. Here's the demo. This tutorial shows you how to create a mobile navigation with jQuery as seen on the sites listed above. jQuery will be used to prepend the menu icon and toggle the navigation. This trick doesn't require any extra/un-semantic HTML tags.

HTML

Below is the sample navigation HTML used in this tutorial: [html]<nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav>[/html]

jQuery Code

Include a copy of jQuery and the function below in between thetag. The function will prepend the [js]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ /* prepend menu icon */ $('#nav-wrap').prepend('<div id="menu-icon">Menu</div>'); /* toggle nav */ $("#menu-icon").on("click", function(){ $("#nav").slideToggle(); $(this).toggleClass("active"); }); }); </script>[/js] It will render the HTML code like this (you need to Inspect Element or view generated source code to see this): [html]<nav id="nav-wrap"> <div id="menu-icon">Menu</div> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav>[/html]

CSS

I'm not going to explain every detail of the CSS code because it is pretty straight forward. Instead, I will talk about the key parts. The #menu-icon is set to display:none initially. I used media query to change the #menu-icon to display:block if the viewport width is smaller than 600px. In the media query, I set the navigation to display:none so it is hidden initially on mobile. When the #menu-icon is clicked, it will toggle the navigation as specified in the jQuery function at the above step.

Revisions

January 22, 2013 @ 02:34:49 [Current Revision] by PeterLugg
January 22, 2013 @ 02:30:16 by PeterLugg

Revision Differences

--- January 22, 2013 @ 02:30:16
+++ Current Revision
+Added: Taken from <a href="http:// webdesignerwall.com/tutorials/ mobile-navigation- design-tutorial" target="_blank">web designer wall</a>.
+Added: Here's the <a href="http:// webdesignerwall.com/demo/ mobile-nav/" target="_blank">demo</a>.
+Added: This tutorial shows you how to create a mobile navigation with jQuery as seen on the sites listed above. jQuery will be used to prepend the menu icon and toggle the navigation. This trick doesn't require any extra/un-semantic HTML tags.
+Added: <h4>HTML</h4>
+Added: Below is the sample navigation HTML used in this tutorial:
+Added: [html]&lt;nav id=&quot;nav- wrap&quot;&gt;
+Added:  &lt;ul id=&quot;nav&quot;&gt;
+Added:  &lt;li&gt;&lt;a href=&quot;#&quot; &gt;Button&lt; /a&gt;&lt;/li&gt;
+Added:  &lt;li&gt;&lt;a href=&quot;#&quot; &gt;Button&lt; /a&gt;&lt;/li&gt;
+Added:  &lt;/ul&gt;
+Added: &lt;/nav&gt;[/html]
+Added: <h4>jQuery Code</h4>
+Added: Include a copy of jQuery and the function below in between thetag. The function will prepend the
+Added: <div id="menu-icon">in the
+Added: <nav id="#nav-wrap">tag. When the #menu-icon element is clicked, it will slide down the navigation.</nav></div>
+Added: [js]&lt;script type=&quot;text/ javascript&quot; src=&quot;http: //ajax.googleapis.com/ajax/ libs/jquery/1.7/ jquery.min.js&quot; &gt;&lt;/script&gt;
+Added: &lt;script type=&quot;text/ javascript&quot;&gt;
+Added: jQuery(document) .ready(function($){
+Added:  /* prepend menu icon */
+Added:  $('#nav-wrap') .prepend('&lt;div id=&quot;menu- icon&quot;&gt; Menu&lt;/div&gt;');
+Added:  /* toggle nav */
+Added:  $(&quot;#menu- icon&quot;).on( &quot;click&quot;, function(){
+Added:  $(&quot;#nav&quot; ).slideToggle();
+Added:  $(this).toggleClass( &quot;active&quot;);
-Deleted: Taken from
+Added:  });
+Added: });
+Added: &lt;/script&gt;[/js]
+Added: It will render the HTML code like this (you need to Inspect Element or view generated source code to see this):
+Added: [html]&lt;nav id=&quot;nav- wrap&quot;&gt;
+Added:  &lt;div id=&quot;menu- icon&quot;&gt; Menu&lt;/div&gt;
+Added:  &lt;ul id=&quot;nav&quot;&gt;
+Added:  &lt;li&gt;&lt;a href=&quot;#&quot; &gt;Button&lt; /a&gt;&lt;/li&gt;
+Added:  &lt;li&gt;&lt;a href=&quot;#&quot; &gt;Button&lt; /a&gt;&lt;/li&gt;
+Added:  &lt;/ul&gt;
+Added: &lt;/nav&gt;[/html]
+Added: <h4>CSS</h4>
+Added: I'm not going to explain every detail of the CSS code because it is pretty straight forward. Instead, I will talk about the key parts.
+Added: The #menu-icon is set to display:none initially. I used media query to change the #menu-icon to display:block if the viewport width is smaller than 600px.
+Added: In the media query, I set the navigation to display:none so it is hidden initially on mobile. When the #menu-icon is clicked, it will toggle the navigation as specified in the jQuery function at the above step.

Note: Spaces may be added to comparison text to allow better line wrapping.

Tags: jquery, mobile website, toggle