我試圖創建一個麪包屑導航一個多層次的菜單,無需使用JavaScript。我遇到過大量純粹的css菜單和麪包屑,但從未組合過並且一起工作。下面是我想要實現(點擊「更多」漢堡包菜單上)設計:純CSS多層次的菜單與功能痕跡導航
而且這是我迄今爲止在我的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來識別對方?這種結合兩種無線電導航的方法可能是不正確的。我真的希望有人能分享他們的智慧。 :)
在此先感謝
謝謝你的徹底的和有用的回覆。我說這很有用,因爲它讓我(現在)不再在這個兔子洞裏花費更多的時間。我們懷疑沒有Javascript就無法做到這一點。儘管這是一個有趣的挑戰,我希望結果對其他人有些用處。也感謝提高我的CSS。 :) –