2016-07-15 137 views
3

我試圖創建一個麪包屑導航一個多層次的菜單,無需使用JavaScript。我遇到過大量純粹的css菜單和麪包屑,但從未組合過並且一起工作。下面是我想要實現(點擊「更多」漢堡包菜單上)設計:純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來識別對方?這種結合兩種無線電導航的方法可能是不正確的。我真的希望有人能分享他們的智慧。 :)

在此先感謝

回答

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之所以如此無處不在 - 我們今天的網絡體驗在沒有它的情況下簡直就不一樣。

(感謝傑斯和其他同事爲了解這個答案的部分討論。我轉述從優。希望這是有益的給別人。)

+0

謝謝你的徹底的和有用的回覆。我說這很有用,因爲它讓我(現在)不再在這個兔子洞裏花費更多的時間。我們懷疑沒有Javascript就無法做到這一點。儘管這是一個有趣的挑戰,我希望結果對其他人有些用處。也感謝提高我的CSS。 :) –