下面我们再处理一下在小尺寸屏幕上的导航菜单的样式 … 先把导航菜单的初始状态设置为隐藏 …

d:n

/* 隐藏导航 */
#nav{
display:none;
}

然后再设置一下当导航菜单为目标状态的时候的样式 … 先回到浏览器 … 点击一下开启按钮 …

这样会链向导航菜单上的 #nav 这个 ID，现在导航菜单的 <nav> 标签就会处于目标状态 … 这个时候，我们就可以使用 target 这个伪类为它添加样式了 …

/* 导航为目标状态时的样式 */
#nav:target{}

先把导航显示出来 … db …

把它的位置设置为绝对 … posa …

顶部的位置设置为 0 t0 ….

最上面添加点内边距 … pt70 ….

宽度设置成 100% … w100p …

ul 的样式

下面再去给导航下面的<ul> 标签添加点样式… 同样把样式添加到目标状态下的导航菜单 …

/* 目标状态下的导航的 ul 标签 */

#nav:target ul{}

添加一个黑色的背景 … bg#000

li 与 a

下面我们再去为目标状态下的导航菜单的 <li> 标签 ，还有 <a> 标签去定义一些样式 …

/* 目标状态下导航的列表与 a 标签 */
#nav:target li, #nav:target li a{}

把它们都设置成块级元素 … db …

改一下文字的颜色 … color: #eee; 再设置一下文字的方向 ta:l

悬停样式

修改下悬停的样式 ….

/* 目标状态下导航的列表下的 a 标签的悬停样式 */
#nav:target li a:hover{
background: #3b3b3b;
}

还有激活的样式 …

/* 目标状态下导航的激活状态样式 */
#nav:target .active{
background: #272727;
}
….

回到浏览器 …

点击 关闭 … 导航菜单的 <nav> 标签就不会再处于目标状态了 … 所以它会隐藏起来 …

按钮会从关闭按钮，变成 开启 的按钮 … 因为关闭按钮只有在导航菜单处于目标状态的时候才会显示出来 …

现在我们的响应式导航菜单就做好了 …

调整一下可视窗口的宽度 …

大于 767px 以后 … 导航菜单会恢复成最开始的样式 …

缩小窗口的宽度 … 小于 767px 以后 .. 导航菜单会隐藏起来 .. 同时在右上角会显示一个开启导航菜单的按钮 …

点击这个按钮，可以打开导航菜单 …. 点击 关闭按钮 … 可以关掉导航菜单 ...

/* 导航为目标状态时的样式 */
#nav:target{
position: absolute;
width: 100%;
padding-top:70px;
top: 0;
display: block;
height:auto;
}
/* 目标状态下的导航的 ul 标签 */
#nav:target ul{
background: #000;
width: 100%;
}
/* 目标状态下导航的列表与 a 标签 */
#nav:target li, #nav:target li a{
display: block;
color: #eee;
}
/* 目标状态下导航的列表下的 a 标签的悬停样式 */
#nav:target li a:hover{
background: #3b3b3b;
}
/* 目标状态下导航的激活状态样式 */
#nav:target .active{
background: #272727;
}