HTML5 responsive navigation menu tutorial using jquery

Time:2022-6-8

Through jquery+html5, when the browser window is narrowed or accessed by the mobile phone, the navigation menu becomes a button pull-down menu. design sketch:

jquery_html5_nav.jpg

HTML code:

The copy code code is as follows: <nav> <ul> <li><a href= "\" >button</a></li> <li><a href= "\" >button</a></li> </ul></nav>

JQuery Code:

Through the following jQuery code, <div id= “menu icon” > will be added to <nav id= “nav\u wrap” > and the menu will be displayed when \menu-icon is clicked:

Copy the code 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>Menu</div>');  /* toggle nav */ $("#menu-icon").on("click", function(){  $("#nav").slideToggle();  $(this).toggleClass("active"); });});</ script>

You can see the HTML code displayed by viewing the element through the browser as follows:

Copy the code as follows: <nav> <div>menu</div> <ul> <li><a href= "\" >button</a></li> <li><a href= "\\button</a></li> </ul></nav>

CSS code:

In the CSS code, set the \menu-icon attribute to display:none;, Then the \menu-icon is changed to display:block; through the media query;, The following is the key CSS style code to judge the style when the browser width is less than 600px:

mediaquery_1.jpg

See the first rendering of the article for the final effect.