Html 仅带CSS3的水平和可折叠导航栏

我想得到移动电话的水平导航栏菜单（比如说屏幕宽度小于600px）。换句话说，与site相同的结果，但仅与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>

在CSS3中，您不能这样做，因为您需要一个onclick事件监听器以不同的样式调出较小屏幕大小的菜单项

下面是一个使用最少javascript的响应菜单的简单示例：

希望这有帮助

---

Paul.

在CSS3中，你不能这样做，因为你需要一个onclick事件监听器来以不同的风格为更小的屏幕显示菜单项

下面是一个使用最少javascript的响应菜单的简单示例：

希望这有帮助

---

Paul.

@Andrei:我最近加入了社区，因此无法添加评论。我的意思是，要让它在单击时工作，您必须使用javascript添加一个单击事件。（我想原来的问题提到了点击）

我编辑了我的答案以使其更清楚：

正如Paul提到的，你不能用CSS完全复制一个点击事件。不过，我查看了您提供的链接，似乎导航显示在

悬停

上，而不是单击。我试着写些东西来复制他在那里做的事情：

<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>

我个人会使用一些javascript并在图标中添加一个onClick事件，但是如果您只想使用CSS，那么您就可以实现类似的功能。（这不是最漂亮的方法）

---

祝你好运

@Andrei：我最近加入了这个社区，所以无法添加评论。我的意思是，要让它在单击时工作，您必须使用javascript添加一个单击事件。（我想原来的问题提到了点击）

我编辑了我的答案以使其更清楚：

正如Paul提到的，你不能用CSS完全复制一个点击事件。不过，我查看了您提供的链接，似乎导航显示在

悬停

上，而不是单击。我试着写些东西来复制他在那里做的事情：

<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>

我个人会使用一些javascript并在图标中添加一个onClick事件，但是如果您只想使用CSS，那么您就可以实现类似的功能。（这不是最漂亮的方法）

---

祝你好运

您作为示例提供的网站菜单完全符合您的要求。它不使用任何

JavaScript

。因此，只需简单地复制/粘贴他们的代码即可：

body{font:400 16px/1.5“PT Sans”，无衬线；颜色：#111；背景色：#fdfdfd；-webkit文本大小调整：100%；-webkit字体功能设置：“kern”1；-moz字体功能设置：“kern”1；-o-font-feature-settings:“kern”1；字体功能设置：“kern”1；字体紧排：正常；}
.site导航{浮动：右；线高：56px；}
.site导航菜单图标{显示：无；}
网站导航页面链接{颜色：939598；行高：1.5；}
.site nav.page链接：not（：last child）{右边距：20px；}
@媒体屏幕和（最大宽度：600px）{.站点导航{位置：绝对；顶部：9px；右侧：15px；背景颜色：#fdfdfd；边框：1px实心#fbffc；边框半径：5px；文本对齐：右侧；}
.site导航菜单图标{显示：块；浮动：右；宽度：36px；高度：26px；线条高度：0；填充顶部：10px；文本对齐：中心；}
.site导航菜单图标>svg{宽度：18px；高度：15px；}
.site导航菜单图标>svg路径{fill:#545558；}
.site nav.trigger{清除：两者；显示：无；}
.site nav:hover.trigger{display:block；padding-bottom:5px；}
.site nav.page链接{显示：块；填充：5px 10px；左边距：20px；}
.site nav.page链接：非（：最后一个子项）{右边距：0；}
.场地导航a{
文字装饰：无；
}
.站点导航a：悬停{
文字装饰：下划线；
}

---

您作为示例提供的网站菜单完全符合您的要求。它不使用任何

JavaScript

。因此，只需简单地复制/粘贴他们的代码即可：

body{font:400 16px/1.5“PT Sans”，无衬线；颜色：#111；背景色：#fdfdfd；-webkit文本大小调整：100%；-webkit字体功能设置：“kern”1；-moz字体功能设置：“kern”1；-o-font-feature-settings:“kern”1；字体功能设置：“kern”1；字体紧排：正常；}
.site导航{浮动：右；线高：56px；}
.site导航菜单图标{显示：无；}
网站导航页面链接{颜色：939598；行高：1.5；}
.site nav.page链接：not（：last child）{右边距：20px；}
@媒体屏幕和（最大宽度：600px）{.站点导航{位置：绝对；顶部：9px；右侧：15px；背景颜色：#fdfdfd；边框：1px实心#fbffc；边框半径：5px；文本对齐：右侧；}
.site导航菜单图标{显示：块；浮动：右；宽度：36px；高度：26px；线条高度：0；填充顶部：10px；文本对齐：中心；}
.site导航菜单图标>svg{宽度：18px；高度：15px；}
.site导航菜单图标>svg路径{fill:#545558；}
.site nav.trigger{清除：两者；显示：无；}
.site nav:hover.trigger{display:block；padding-bottom:5px；}
.site nav.page链接{显示：块；填充：5px 10px；左边距：20px；}
.site nav.page链接：非（：最后一个子项）{右边距：0；}
.场地导航a{
文字装饰：无；
}
.站点导航a：悬停{
文字装饰：下划线；
}

这不起作用的唯一原因是没有尝试添加所需的

CSS

。以目前的形式，这是一个“我需要免费完成这项工作，谢谢”类型的问题。它不包括任何研究工作或编码尝试。这不起作用的唯一原因是因为n