根据响应状态在菜单项和列表之间交替答案

【问题标题】：Alternate between menu item and list depending on responsive state根据响应状态在菜单项和列表之间交替
【发布时间】：2018-04-05 03:23:01
【问题描述】：

我有一个使用响应式 CSS 的网站。根据响应状态，我想改变菜单：

该站点显示在宽屏上，因此我有一个两栏设计。在这种模式下，我可以利用屏幕的完整高度，所以我可以在标题下有一个类别和标签的列表，这会占用相当多的空间。
该站点显示在一个不太宽的屏幕上，它将所有内容堆叠成一列。在这种模式下，我想在菜单中添加指向类别和标签概览的链接，而不是保留冗长的标签和类别列表。

我最近的方法是使用两个 CSS 类，水平和垂直：

@media (min-width: 801px) {
  .vertical { display: none; }
}
@media (max-width: 800px) {
  .horizontal { display: none; }
}

这些类用于装饰类别和标签概览的两个菜单项以及菜单下方的类别和标签列表。

[EDIT]：为了简化代码，我只放了类别，标签是等价的。我担心我错过了一些读者（对不起！），所以我添加了更多代码以清楚地显示两个选项之间的区别。

<head>
  ...
  <meta name="viewport" content="width=device-width, initial-scale=1">
  ...
</head>
...
<aside>
  <nav class="nav">
    <ul class="list-bare">
      {% for title, link in MENUITEMS %}
        <li><a class="nav__link" href="{{ link }}">{{ title }}</a></li>
      {% endfor %}
      <li class="vertical"><a class="nav__link" href="/categories.html">Categories</a></li>
    </ul>
  </nav>
  <h2 class="horizontal">Categories</h2>
  <ul class="navbar horizontal">
    {% for cat, null in categories %}
      <li{% if cat == category %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
    {% endfor %}
  </ul>
</aside>

这确实有效。但我想知道这是否是 CSS 艺术的状态。还是有另一种机制来做这些交替的事情？

【问题讨论】：

我认为这个解决方案很棒，除了我会将这两个@media 文件放在一个文件中并称之为 responsive.css。所有的响应式样式都在这个 CSS 中。如果是我，我不会使用 800px 作为媒体尺寸，而是使用符合引导网格系统的尺寸：getbootstrap.com/docs/4.0/layout/grid 你可以看到：stackoverflow.com/questions/49419074/…

标签： html css responsive-design

【解决方案1】：

如果我正确理解您的帖子，您正在考虑复制菜单并根据视口或屏幕宽度隐藏一个或另一个版本。

虽然这可行，但有一个更清洁的解决方案，更易于维护。

请查看此建议：https://codepen.io/panchroma/pen/eMKGKw

如您所见，只有一个菜单，我正在使用简单的媒体查询来控制菜单列表项的宽度。

HTML

<ul>  
  <li><a class="nav__link" href="/categories.html">Categories</a></li>
  <li><a class="nav__link" href="/tags.html">Tags</a></li>
</ul>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
    width:100%;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}

@media (min-width: 801px) {

  li {
    width:50%;
  }
}

在文档的头部加上一个viewport meta tag

<head>  
...  
<meta name="viewport" content="width=device-width, initial-scale=1">  
...  
</head>

更新

这是一个我认为可以完成您需要做的事情的变体： https://codepen.io/panchroma/pen/VXGPEM

代码非常相似，带有用于标签云和类别列表的嵌套列表以及一些媒体查询来管理它们的显示：

祝你好运！

【讨论】：

感谢您的建议。但是，如果我理解正确，那么您正在“仅”操作菜单。我的“问题”是从宽模式切换到小模式时需要隐藏标签云和类别列表。这不能用你的建议来完成，对吧。不过，谢谢你的回答。
谢谢@PVitt。我不清楚您的标签云和类别列表的详细信息，您能否将其中一些添加到您发布的代码中，以便我更清楚地了解您的 HTML？
我改成了上面的代码。再次抱歉，没有提供清楚了解手头问题所需的所有细节。
感谢大卫的更新。但是和我的建议很相似吧？不同之处在于概述链接和列表是同级的。还是我错过了什么？
...也许我看错了你的代码！我以为你有两个菜单，我试图通过将所有内容合并到一个菜单中来清理它。