通过jquery+html5实现，当浏览器窗口缩小或者手机访问的时候，导航菜单变成按钮下拉式菜单。效果图：
html代码：
复制代码
代码如下:
button
button
jquery代码：
通过以下jquery代码，会把
添加到中，当点击 #menu-icon 时，菜单就会显示出来：
复制代码
代码如下:
>http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js>>
');
/* toggle nav */
$(#menu-icon).on(click, function(){
$(#nav).slidetoggle();
$(this).toggleclass(active);
});
});
通过浏览器查看元素可以看到html显示的代码如下：
复制代码
代码如下:
menu
button
button
css代码：
在css代码中要先把#menu-icon的属性设置为display:none;，然后通过媒体查询media query判断再把#menu-icon改为display:block;，下面是关键的css样式代码，判断浏览器宽度小于600px时的样式：
最终效果看文章第一张效果图。