html - 具有功能面包屑导航的纯 css 多层菜单

Question

我试图在不使用 javascript 的情况下创建一个带有面包屑导航的多层菜单。我遇到过大量纯 css 菜单和面包屑，但从未组合在一起工作。这是我想要实现的设计(点击“更多”汉堡菜单):

https://invis.io/857RUKE6M

这就是我目前在我的 html/css 中的内容(请参阅下面的 codepen 链接)。请原谅粗糙/hacky 代码。在这一点上，我只是在测试想法，一旦找到解决方案，我将简化和美化我的代码。

http://codepen.io/jessbenz/pen/LZWjjz

这是一个代码片段，但请查看上面的代码笔链接以获得更好的感受:

<div class="smart-nav">
    <input type="radio" id="bread-home" class="breadcrumb" name="bread" />
    <input type="radio" id="bread-women" class="breadcrumb" name="bread" />
    <input type="radio" id="bread-womens-clothing" class="breadcrumb" name="bread" />
    <div class="smart-nav-panels">
      <ul id="home">

        <li>
          <input type="radio" name="first">
          <label>1 Women</label>
          <ul id="women">
            <li>
              <input type="radio" name="second">
              <label>1.1 Women's Clothing</label>
              <ul id="womens-clothing">
                <li>
                  <label>1.1.1 Women's Shirts</label>
                </li>
              </ul>
            </li>
          </ul>
        </li>

        <li>
          <input type="radio" name="first">
          <label>2 Men</label>  
          <ul id="men">
            <li>2.1 Men's Shirts</li>
          </ul>         
        </li>

      </ul>
    </div>
</div>

还有我的sass:

.breadcrumb:checked ~ .smart-nav-panels ul {
  display: none;
}
#bread-home:checked ~ .smart-nav-panels > ul {
  display: block;
}
#bread-women:checked ~ .smart-nav-panels {
  #home, #women {
    display: block;
  }
}
#bread-womens-clothing:checked ~ .smart-nav-panels {
  #home, #women, #womens-clothing {
    display: block;
  }
}
#bread-home:checked ~ .smart-nav-panels li input:checked > ul:first-child {
  display: block;
}
.smart-nav-panels {
  margin: 0;
  padding: 0;
  ul {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: lightgrey;
  }
  ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  > ul:first-child {
    ul {
      left: 100%;
    }
  }
  li {
    input + label + ul {
      display: none;
    }
    input:checked + label + ul {
      display: block;
      // left:0;
    }
  }
}
input:checked ul {
  display: block;
}

如果您点击我的 codepen 样本中的女装，您会发现我已经完成了一半，已经达到了我的需要。顶部的水平单选按钮代表面包屑，灰色 block 内的垂直单选按钮代表层级菜单。当我选择面包屑 radio 时，问题就来了。显示了正确的幻灯片，但如果我再次在菜单中选择一个 radio ，它就不会显示，因为我的面包屑 CSS 正在优先考虑并隐藏相关内容。我想这就是不使用 javascript 的问题所在。如何使用纯 css 让我的两个导航相互了解？可能这种结合两个 radio 导航的方法是不正确的。我真的希望有人能分享他们的智慧。 :)

提前致谢

Answer 1

您不会回避挑战，对吗？ :)

在开始详细介绍之前，我会说简短的回答是“构建静态站点”。换句话说，假设您的设计约束之一是“无 javascript”，请将问题移到您确实可以使用决策逻辑/代码以使其更容易解决的地方(即:服务器)。

即使您设法解决了这个问题(考虑到 HTML/CSS 的限制，我不确定这是否可能)，您将遇到的下一个问题是将任何类型的行为附加到它。您将要根据菜单选择加载特定内容，而您要执行此操作的唯一方法是:

• 一个javascript事件，或者
• 静态链接( anchor 元素，因此是我简短回答背后的“为什么”)

可以加载所有内容，也许可以找到一种有条件地显示它的方法，但问题是“兔子洞有多深？”。此外，如果您正在为功能手机和/或慢速连接构建，加载所有内容将对用户体验产生负面影响。

综上所述，我设法稍微简化了 CSS 并修复了子类别显示的错误(请参阅内联评论)。请注意，只有“女性”类别的行为符合预期，因为“男性”和“ child ”缺少样式。

.container {
  position: relative;
  width: 360px;
  height: 480px;
  border: 1px solid black;
  margin: 20px auto 0 auto;
}

.breadcrumb {
  margin-top: -20px;
  display: inline-block;
  vertical-align: top;
}

/*
.breadcrumb:checked ~ .smart-nav-panels ul {
  display: none;
}

#bread-home:checked ~ .smart-nav-panels > ul {
  display: block;
}
*/

/* hide all uls except the 'home' ul by default, replaces both of the above */
.smart-nav-panels ul ul {      
  display: none;
}

/*
#bread-women:checked ~ .smart-nav-panels {
  #home, #women {
    display: block;
  }
}

#bread-womens-clothing:checked ~ .smart-nav-panels {
  #home, #women, #womens-clothing {
    display: block;
  }
}
*/

/* these next 3 style definitions are very similar to what you had before (commented 
above), except that there is no longer a need to unhide the 'home' ul, and we're
being more explicit about which uls to hide in correspondence with the state of the
breadcrumb nav */
#bread-home:checked ~ .smart-nav-panels {
  #women {
    display: none;
  }
}    

#bread-women:checked ~ .smart-nav-panels {
  #women {
    display: block;
  }
  #womens-clothing, #womens-shoes {
    display: none;
  }
}

#bread-womens-clothing:checked ~ .smart-nav-panels {
  #women, #womens-clothing {
    display: block;
  }
}

/*
#bread-home:checked ~ .smart-nav-panels li input:checked > ul:first-child {
  display: block;
}
*/

/* (i) the above didn't work because the ul isn't a direct descendant of the input,
rather it is a sibling, and in addition it doesn't matter which breadcrumb item is
checked now */
.smart-nav-panels li input:checked ~ ul {
  display: block;
}

.smart-nav-panels {
  margin: 0;
  padding: 0;
  ul {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: lightgrey;
  }
  ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  > ul:first-child {
    ul {
      left: 100%;
    }
  }
  /* removed unnecessary styles here */
}
/* removed unnecessary style here */

这已经解决了一些问题，但还有更多问题。我怀疑，解决其中一些问题会产生新的问题。我能立即想到的一个方法是，您希望将分层​​菜单的状态与面包屑联系起来，这样您就只能看到您应该看到的面包屑(现在您总是看到所有的面包屑)的)。

在某些时候，您需要事件(用于行为)并且组件需要了解彼此的状态。虽然 CSS 具有一些状态功能，但它在事件前端不提供任何东西。这些限制、级联性质(在其他问题中进行了深入讨论，例如:缺少祖先选择器)以及与 HTML 结构的耦合都使这成为一个很难单独使用 HTML 和 CSS 解决的问题。

我理解在没有 JS 的情况下拥有这种类型的导航的愿望，当然这是一个值得尝试和解决的有趣问题，但最终我认为这是错误的解决方法。 javascript 如此普遍是有原因的 - 如果没有它，我们今天的网络体验将大不相同。

(感谢 Jess 和其他同事的讨论，为这个答案的部分内容提供了信息。我自由地解释了。希望这对其他人有好处。)