css中打开关闭导航

CSS中，一个常见的需求就是在网站中添加一个导航栏，并加上打开和关闭功能。这可以通过使用CSS的“伪类”来实现。
首先，我们需要添加一个HTML结构来表示导航条：

<div class="navbar">
  <div class="navbar-btn">Menu</div>
  <ul class="navbar-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div> 

这段代码为我们的导航条创建了一个容器，并在其中添加了一个“Menu”按钮以及一个链接列表。接下来，我们可以使用CSS为它添加样式，并创建一个动态效果。

/* 默认状态下的导航栏 */
.navbar-links {
  display: none;
}

/* 当按钮被点击时显示链接列表 */
.navbar-btn:focus + .navbar-links {
  display: block;
}

/* 链接列表样式 */
.navbar-links {
  position: absolute;
  top: 60px;
  right: 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

/* 按钮样式 */
.navbar-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ddd;
  color: #555;
  cursor: pointer;
}

/* 当按钮被聚焦时改变其样式 */
.navbar-btn:focus {
  outline: none;
  background-color: #555;
  color: #fff;
} 

以上代码描述了按钮和链接列表的样式，并使用“伪类”添加了一个打开和关闭效果。当按钮被聚焦时，它的“后代元素”（即链接列表）将被激活并显示出来。
通过使用CSS的伪类，我们可以轻松地创建一个动态效果来打开和关闭导航栏，让网站更加美观和易用。