html - 仅使用 CSS3 的水平和可折叠导航栏

Question

我想获得手机的水平导航栏菜单(比如小于 600 像素的屏幕宽度)我得到 collapsible baricon menu .换句话说，与 Brian Buccola 相同的结果网站，但仅使用 CSS3。

让我们从这里开始:

<header>
<nav id="site-navigation" class="site-navigation">
  <ul>
   <li><a class="page-link" href="/">Home</a></li>
   <li><a class="page-link" href="about.html">About</a></li>
   <li><a class="page-link" href="work.html">Work</a></li>
   <li><a class="page-link" href="cv.html">CV</a></li>
   <li><a class="page-link" href="blog.html">Blog</a></li>
  </ul>
</nav>
</header>

Answer 1

@Andrei:自从我最近加入社区以来，我无法添加评论。我的意思是，要让它在点击时起作用，您必须使用 javascript 添加点击事件。 (我想原来的问题提到了一次点击)

我已经编辑了我的答案以使其更清楚:

正如 Paul 所提到的，您无法使用 CSS 完全复制点击事件。但是，我查看了您提供的链接，导航似乎显示在 hover 而不是单击时。我试图写一些东西来复制他在那里所做的事情:

<header>
  <nav id="site-navigation" class="site-navigation">
    <a href="#" class="menu-icon">Mobile menu</a> <!-- replace with icon -->
    <ul class="site-navigation-items">
     <li><a class="page-link" href="/">Home</a></li>
     <li><a class="page-link" href="about.html">About</a></li>
    </ul>
  </nav>
</header>

CSS 看起来像这样:

.site-navigation {
    text-align: right;
}
.site-navigation-items {
  padding: 0;
  margin: 0;
  list-style: none;
}
.site-navigation-items li {
  display: inline-block;
  margin: 0 10px;
}
.menu-icon {
  display: none;
}
@media(max-width: 600px) {
  .menu-icon {
    display: block;
  }
  .site-navigation-items {
    display: none;
  }
  .site-navigation-items li {
    display: block;
  }
  .site-navigation:hover .site-navigation-items {
    display: block;
  }
}

我个人会使用一些 javascript 并向图标添加一个 onClick 事件，但如果您只想使用 CSS，那么您可以实现类似的效果。 (但这不是最漂亮的方法)。

祝你好运!