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