如何構建這個菜單

我工作在菜單上（圖片與InDesign中，尚未取得HTML））。不過，對於「內容」選項，我希望有一個新的選項列表如下：如何構建這個菜單

enter image description here

應該崩潰「內容」的事情。

大氣壓的一切都與jQuery/JavaScript的所以它是動態的（裝載另一本書爲例）來完成。我想知道的內容菜單，我應該放在內容的DIV持有的2行的表？羅馬數字一個表格，章節名稱一個。或者很難與無序列表結合？

http://jsfiddle.net/cmTpR/

來源

2012-03-31 clankill3r

你確定jsfiddle有你在問什麼嗎？ – Coffee 2012-03-31 19:37:57

它的一部分是的。 – clankill3r 2012-03-31 19:49:59

我應該在內容中放置一個包含2行表格的div嗎？一個羅馬數字表格，一個表格名稱。

我猜你的意思是2列？
你如何確定1章將佔據1行？它們非常冗長，如果其中一行佔用2行，會發生什麼情況，如果用戶沒有在font-family中指定的字體並且回退較大，會發生什麼情況？根據W3C/WAI WCAG 2.0關於可訪問性的建議，如果他放大1，2，最多6級（文本）縮放，該怎麼辦？

這樣的2列也意味着your content would make no sense when linearized（想象一個屏幕閱讀器用戶聽到1,2,3,4等，然後只有1,2,3,4等章的名字）祝您好運！:)）

或者很難與無序列表結合？

不，它不是。請參閱http://jsfiddle.net/PhilippeVay/EsYZr/，其中只使用重疊列表並（等待它）CSS表格佈局。語義仍然是子列表中的一種，但在視覺上（僅在視覺上），它就像由行和單元格組成的表格。

好的部分是你不必強制寬度。羅馬數字如XVIII非常大，但瀏覽器中的表格算法將與HTML表格一樣適應內容（只要您不將表格算法與table-layout: fixed切換）。

來源

2012-03-31 20:08:15 FelipeAls

感謝您的偉大答案。我不關心縮放或用戶沒有字體atm。這是一個學校作業，所以不需要100％完美，因爲它只會顯示在我的手機上。 jsfiddle真的很有幫助，不知道它可以做得很好。 – clankill3r 2012-04-01 13:04:45

o是的，將隱藏/取消隱藏內容的簡單方法是什麼？ – clankill3r 2012-04-01 21:24:29

我只使用jQuery（'.on（）'和「click」+ focus使用.hide（）/。show（）添加/刪除一個類型相同的jQuery 1.7，所以我的回答非常有限 – FelipeAls 2012-04-02 12:55:21

我知道你想有羅馬數字和人名章在一個單獨的列表元素，並正在尋找表作爲解決方案。

你當然可以使用表。或者，您可以使用固定寬度的跨度元素。

我使用span舉行的羅馬數字

<ul> 
    <li> <span class="num">I</span> Hello World </li> 
    <li> <span class="num">II</span> The Second string </li> 
    <li> <span class="num">III</span> 3 times, is a charm! </li> 

</ul>

我那麼固定寬度分配給跨度

li span.num { 
    display: inline-block; 
    width: 30px; 
}

的jsfiddle：http://jsfiddle.net/FJgqs/

希望這回答你的問題

來源

2012-03-31 20:00:34

如何構建這個菜單

回答

相關問題