本文主要包含jquery,HTML5,响应式,导航菜单等相关知识,匿名希望在学习及工作中可以帮助到您
通过jquery+html5实现,当浏览器窗口缩小或者手机访问的时候,导航菜单变成按钮下拉式菜单。效果图:
HTML代码:
jQuery代码:
通过以下jquery代码,会把
通过浏览器查看元素可以看到html显示的代码如下:
CSS代码:
在css代码中要先把#menu-icon的属性设置为display:none;,然后通过媒体查询media query判断再把#menu-icon改为display:block;,下面是关键的CSS样式代码,判断浏览器宽度小于600px时的样式:
最终效果看文章第一张效果图。