欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

使用jquery实现HTML5响应式导航菜单教程_html5教程技巧

程序员文章站 2022-04-09 23:30:31
...
通过jquery+html5实现,当浏览器窗口缩小或者手机访问的时候,导航菜单变成按钮下拉式菜单。效果图:

使用jquery实现HTML5响应式导航菜单教程_html5教程技巧

HTML代码:


复制代码
代码如下:

jQuery代码:

通过以下jquery代码,会把

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


复制代码
代码如下:

CSS代码:

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

使用jquery实现HTML5响应式导航菜单教程_html5教程技巧

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