笔记本电脑或是台式机
互联网
切换式菜单
步骤1 HTML结构首先，在HTML文件中华增加一个链接，该链接用来作为折叠按钮。你可以把这个链接放在导航列表的上面。
步骤2 用于切换的CSS代码我们在CSS里创建一些样式规则来格式化折叠按钮，并隐藏它。#nav-collapse{ display:none; color:#fff; text-align:right; width:100%; padding:.625em 0 .625em 0; }#nav-collapse.active{ display:block;}第1至7行代码为切换按钮设置了一些基本样式，并且会在一开始时隐藏菜单。记住，如果浏览器不支持Javascript，那么将会显示导航栏，在这种情况下按钮也就没有存在的必要了。当”active”类被触发时，第8至10行代码将通过Javascript来显示按钮。在不支持的Javascript的浏览器中使用这些样式时将不会有任何改变，这正是我们想要的。即使浏览器不支持Javascript，导航将仍然是完全可用的，虽然效果不是很理想，但至少它是可用的。
当页面载入时（第1行代码），浏览器会自动运行上面的Javascript。第2至3行代码会分别获取导航栏和切换代码，方便在后面脚本中使用它们。第5至12行代码创建了一个名为toggleClass的简单函数，该函数会获取一个元素，并检查该元素是否有某个特定的类名。如果有就删除，如果没有就添加。第13至14行为导航栏添加了一个hide类，并且为按钮添加了一个active类。最后，第15至18行代码定义了一个函数，并会在单击切换按钮时触发。该函数能添加或删除导航栏的hide类，这样按钮就可以控制导航菜单的隐藏与显示了。现在这段代码会在所有设备上运行，这显然不是我们想要的，我们希望在导航菜单折叠的时候才运行这段代码。虽然检测屏幕宽度比较容易，但是这意味着断点会被硬编码到两个位置：CSS文件中和Javascript文件中。如果使用Javascript来检查导航条目有没有浮动，并基于此来运行代码，那我们就只需要在一个地方保持断点了，这会使得之后维护断点的工作更加方便。
当我们做这一修改时，可以随便把classToggle函数也放到另外一个单独的工具对象中去，外我们会在稍后再来创建这个完整的工具对象。
第8至11行代码会获得导航条目，并检查它有没有浮动。第11行代码看起来也许会有点吓人，但其实它只负责决定该获得哪种样式。IE浏览器有点特殊，如果用户使用的是IE浏览器，我们就需要检测不同的属性。 在得到导航条目是否浮动了的消息之后，你就可以命令剩下的Javascript只在导航条目浮动时才运行了。
有了这些样式和脚本，虽然当你在大屏幕设备上刷新页面时不会看到任何改变，但是在小屏幕设备上显示时，页面加载后你就会看到切换按钮了，而且可以通过点击它来隐藏或显示导航菜单。 随着切换功能的实现，现在的导航栏只有在访问者需要它的时候才出现。