如何使用jquery实现HTML5响应式导航菜单

这篇文章将为大家详细讲解有关如何使用jquery实现HTML5响应式导航菜单，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

滨州网站建设公司创新互联建站,滨州网站设计制作，有大型网站制作公司丰富经验。已为滨州千余家提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的滨州做网站的公司定做！

通过jquery+html5实现，当浏览器窗口缩小或者手机访问的时候，导航菜单变成按钮下拉式菜单。效果图：

HTML代码：

代码如下:

jQuery代码：

通过以下jquery代码，会把

添加到

中，当点击 #menu-icon 时，菜单就会显示出来：

代码如下:

通过浏览器查看元素可以看到html显示的代码如下：

代码如下:

CSS代码：

在css代码中要先把#menu-icon的属性设置为display:none;，然后通过媒体查询media query判断再把#menu-icon改为display:block;，下面是关键的CSS样式代码，判断浏览器宽度小于600px时的样式：

最终效果看文章第一张效果图。

关于“如何使用jquery实现HTML5响应式导航菜单”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

网站题目：如何使用jquery实现HTML5响应式导航菜单
网站网址：http://dzwzjz.com/article/gpeshe.html