响应式设计的导航菜单有很多种形式，最常见的就是切换式的类似下拉菜单一样的响应式导航 … 比如星巴克的网站就使用了这种形式 … 调整浏览窗口的大小 …

注意导航菜单的变化 … 到一定宽度的以后 … 导航菜单就会自动隐藏起来，然后在页面右上角显示一个 三条横线 的小标志 …

点击这个小图标 … 会打开导航菜单 … 点一下这个关闭小图标 .. 可以再把导航菜单隐藏起来 …

我们可以再看一个例子 .. bootstrap …

http://getbootstrap.com/getting-started/

Bootstrap 架构也使用了类似的方法去处理导航菜单 ….

开始

下面我们可以去创建一个类似的响应式的导航菜单 … 这里我们使用纯 CSS 去设计这个响应式的导航菜单，不需要 JavaScript ….

技巧

先大体了解一下我们要做的事，在以前，使用纯 CSS 的下拉菜单 ，会依赖 :hover 这个伪类，也就是先把下拉菜单隐藏起来，然后当鼠标 hover ，悬停在某个元素上面的时候，会弹出下拉菜单 …

不过在移动设备上，这个 hover 悬停就不管用了 …

我们可以换成 target 这个伪类，target 是目标的意思 … 在网页内部，可以使用 ID 作为链接的目标 … 当元素被链接，并且在当前页面点击了这个链接 … 那么就会触发应用元素的 target 伪类的样式 …

这样，我们可以先去添加一个按钮 … 使用 ID 链向导航菜单 …. 先把导航菜单隐藏起来 … 当点击按钮以后 … 会触发应用导航菜单的 target 伪类的样式 …

我们可以为导航菜单的 target 伪类添加样式 … 比如可以让导航菜单显示出来…

然后使用类似的方法，去添加一个关闭导航菜单的按钮 …