Comment: This article mainly introduces the method of using jquery to implement HTML5 responsive navigation menu. Friends who need it can refer to it.
Implemented through jquery+html5, when the browser window is narrowed or accessed by the mobile phone, the navigation menu becomes a button drop-down menu. Reproduction image:
HTML code:
<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_wrap>. When you click #menu-icon, the menu will be displayed:
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script">"></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>
Viewing elements through the browser can see the code displayed in the html 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, first set the attribute of #menu-icon to display:none;, then use media query to judge the media query and then change #menu-icon to display:block;. The following is the key CSS style code to determine the style when the browser width is less than 600px:
The final effect is the first rendering in the article.