如何构建这个菜单

我工作在菜单上（图片与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

如何构建这个菜单

回答

相关问题