Question

我想获得手机的水平导航栏菜单（比如屏幕宽度小于600px），我得到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

你不能仅仅在CSS3中做那个fontawesome网站示例，因为你需要一个onclick事件监听器来调出不同风格的菜单项，以获得更小的屏幕尺寸。

这里有一个简单的响应菜单，只有最小的javascript：

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

希望这有帮助。

保罗。

Answer 2

@Andrei：自从我最近加入社区以来，我无法添加评论。我的意思是，要让它在点击工作，你将不得不使用JavaScript来添加点击事件。（我认为原来的问题提到了点击）

我已编辑了我的回答以使其更清晰：

正如Paul所说，你不能用CSS完全复制click事件。但是，我查看了您提供的链接，似乎导航显示在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就可以实现类似的东西。（这不是最漂亮的方法）。

祝你好运！

Answer 3

您提供的网站上的菜单确实符合您的要求。它没有使用任何JavaScript。因此，只需简单地复制/粘贴其代码即可：

＆＃13;

body { font: 400 16px/1.5 "PT Sans", sans-serif; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; }
.site-nav { float: right; line-height: 56px; }
.site-nav .menu-icon { display: none; }
.site-nav .page-link { color: #939598; line-height: 1.5; }
.site-nav .page-link:not(:last-child) { margin-right: 20px; }
@media screen and (max-width: 600px) { .site-nav { position: absolute; top: 9px; right: 15px; background-color: #fdfdfd; border: 1px solid #fbfbfc; border-radius: 5px; text-align: right; }
  .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
  .site-nav .menu-icon > svg { width: 18px; height: 15px; }
  .site-nav .menu-icon > svg path { fill: #545558; }
  .site-nav .trigger { clear: both; display: none; }
  .site-nav:hover .trigger { display: block; padding-bottom: 5px; }
  .site-nav .page-link { display: block; padding: 5px 10px; margin-left: 20px; }
  .site-nav .page-link:not(:last-child) { margin-right: 0; } }
  
.site-nav a {
    text-decoration: none;
}
.site-nav a:hover {
  text-decoration: underline;
}

＆＃13;

<nav class="site-nav">
  <a href="#" class="menu-icon">
    <svg viewBox="0 0 18 15">
      <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"></path>
      <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"></path>
      <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"></path>
    </svg>
  </a>

  <div class="trigger">
    <a class="page-link" href="/">Home</a>
    <a class="page-link" href="/about/">About</a>
    <a class="page-link" href="/work/">Work</a>
    <a class="page-link" href="/cv/">CV</a>
    <a class="page-link" href="/blog/">Blog</a>
  </div>
</nav>

＆＃13;

注意：我还没有创作上面的任何代码，它完全取自你的例子。如果我要编写类似的菜单，我会以不同的方式对其进行编码。但是，在你的问题显示正确的研究和至少一次编码尝试的迹象之前，我不打算付出努力。

除了在向StackOverflow提问之前无法或不愿意正确研究任务之外，我真正感到头疼的是，现在你有两个答案说明如果没有JavaScript就无法完成，但是你提供的示例不做任何事情！

仅具有CSS3的水平和可折叠导航栏

3 个答案: