纯CSS多层次的菜单与功能痕迹导航

Question

我试图创建一个面包屑导航一个多层次的菜单，无需使用JavaScript。我遇到过大量纯粹的css菜单和面包屑，但从未组合过并且一起工作。下面是我想要实现（点击“更多”汉堡包菜单上）设计：

https://invis.io/857RUKE6M

而且这是我迄今为止在我的HTML/CSS（见下codepen链接） 。请原谅粗俗/哈克代码。在这一点上，我只是在测试想法，一旦找到解决方案，我将简化和美化我的代码。

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

这里的代码片段，但请看看codepen以上链接，以获得更好的手感：

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

和我顶嘴：

.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; 
} 

如果您通过点击我的代码样本中的女士服装，你会看到我已经完成了我所需要的一半。顶部水平单选按钮表示灰色块内的面包屑和垂直单选按钮表示层菜单。问题出现在我选择面包屑收音机时。显示正确的幻灯片，但然后，如果我再在菜单中选择一台收音机，它没有显示，因为我的面包屑的CSS正在偏好和隐藏的相关内容。我想这里是不使用JavaScript的问题。如何让我的导航能够使用纯CSS来识别对方？这种结合两种无线电导航的方法可能是不正确的。我真的希望有人能分享他们的智慧。 :)

在此先感谢

Answer 1

你不会回避挑战，你呢？ :)

在我开始任何更多的细节，我会说简单的答案是“建立一个静态网站”。换句话说，假设您的设计约束条件之一是“非JavaScript”，将问题一个地方，你做有使用决策逻辑/代码的豪华，使之更容易解决（如：服务器）。

即使你设法解决这个问题（我不知道这是可能给定的HTML/CSS的约束），你将有一个问题是任何一种行为的连接到这一切。你会想根据菜单选项，以加载特定的内容，而你要做的唯一方法是：

• JavaScript事件，或
• 静态链接（锚元素，因此我的简短答案背后的'为什么'）

可以加载所有的内容，也许找到一种有条件地显示它的方法，但问题是“兔子洞有多深？”。另外，如果你正在构建针对功能手机和/或连接速度慢，加载所有的内容都将有对用户体验产生负面影响。尽管如此，我设法简化了CSS，并修复了子类别显示的bug（请参阅内部注释）。请注意，只有“女性”类别的行为与预期相同，因为“男性”的“男性”类型缺少“童装”。

.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结构都有助于使这成为一个非常难以单独使用CSS来解决的问题。

我知道有没有JS的这种类型的导航的愿望，当然这是一个有趣的问题尝试和解决，但最终我认为这是一个错误的方式去做。 JavaScript之所以如此无处不在 - 我们今天的网络体验在没有它的情况下简直就不一样。

（感谢杰斯和其他同事为了解这个答案的部分讨论。我转述从优。希望这是有益的给别人。）