Using jquery to implement HTML5 responsive navigation menu tutorials

Comments: This article describes how to use jquery to implement HTML5 responsive navigation menus. For more information, see

Implemented Using jquery + html5. When the browser window is reduced or the mobile phone is accessed, the navigation menu is changed to a button drop-down menu. :

HTML code:

The Code is as follows: <nav id = "nav-wrap">
<Ul id = "nav">
<Li> <a href = "#"> Button </a> </li>
<Li> <a href = "#"> Button </a> </li>
</Ul>
</Nav>

JQuery code:

The following jquery Code adds <div id = "menu-icon"> to <nav id = "nav_wrap">. When you click # menu-icon, the menu is displayed:

The Code is as follows:
<Script type = "text/javascript" src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js "> </script"> http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js "> </script </a>
<Script type = "text/javascript">
$ (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>

You can view the html display code in the browser as follows:

The Code is as follows:
<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>

CSS code:

In css code, you must set the attribute of # menu-icon to display: none;, and then use media query to determine whether # menu-icon is set to display: block ;, the following is the key CSS style code to determine the style when the browser width is smaller than 600px:

For the final effect, see the first article.