带有标题的语义“谈话”CSS导航答案

【问题标题】：Semantic 'talking' CSS navigation with captions带有标题的语义“谈话”CSS导航
【发布时间】：2011-10-03 05:58:23
【问题描述】：

用每个元素的标题标记导航菜单的最佳方式是什么？（我认为“speaking”一词应归于 Smashing Magazine，参见http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/）

定义列表似乎最合适，例如：

<dl id="menu">
    <dt>About</dt>
    <dd>Our work, mission, history and people</dd>
    <dt>Events</dt>
    <dd>We put on workshops, talks and debates</dd>
    <dt>Media</dt>
    <dd>See videos from our archive of past events</dd>
    <dt>Contact</dt>
    <dd>Get in touch with us for further information</dd>
</dl>

但我想不出如何将其设置为如下所示：http://i.stack.imgur.com/Etd4K.png 每个菜单项周围没有额外的 DIV，我认为这不是有效的 HTML。

提前致谢。

【问题讨论】：

你还有代码吗？如果是的话，你能和我们分享一下吗？如果我们不知道发生了什么，我们将无能为力。
那么代码只是一个基本的定义列表；见上文。

标签： html css navigation semantics

【解决方案1】：

演示：http://jsfiddle.net/Afh9N/

CSS 不漂亮...

dt, dd {
    width:120px;
    padding:0 10px;
    border-left:2px solid #333;
    float:left;
}

dt {
    margin-left:-120px;
    font-weight:bold;
}

dt:first-child {
    margin:0;
}

dd {
    position:relative;
    top:20px;
    font-family:verdana;
    font-size:9px;
    left:-142px;    
}

【讨论】：

【解决方案2】：

我不认为definition list 是解决此问题的最佳方式。

我会设计一个ul 并使用spans 作为“演讲部分”。像这样的：

<ul id="menu">
    <li>About <span>Our work, mission, history and people</span></li>
    <li>Events <span>We put on workshops, talks and debates</span></li>
</ul>

CSS

li{display:block; float:left; background:blue; border:1px; color:white; 
   font-family:arial; font-size:1.25em; width:150px; padding:1em;}
span{display:block; font-size:.7em;}

http://jsfiddle.net/Yzx8K/1/

【讨论】：

对我来说似乎是语义化的。该页面的标题是“联系方式”，描述是“与我们联系以获取更多信息”。我想不出更语义化的编码方式（没有 HTML5）。
同意，@MrMisterMan。它绝对是语义的。（这就是我限定并说“最语义化”的原因。）但是，为了消除歧义，我编辑了上面的内容，说不是最好的方法。谢谢你的评论。

【解决方案3】：

试试这样的：

<ul>
<li><h2>Menu Item 1</h2> Menu Item 1 "Speaking Text"</li>
<li><h2>Menu Item 2</h2> Menu Item 2 "Speaking Text"</li>
<li><h2>Menu Item 3</h2> Menu Item 3 "Speaking Text"</li>
<li><h2>Menu Item 4</h2> Menu Item 4 "Speaking Text"</li>
</ul>

然后，您可以根据自己的喜好将列表元素样式化到菜单中。每个列表元素的标题都提供样式目标和语义方式来显示主要“菜单项”文本的重要性。

【讨论】：

这就是我目前所拥有的，并且似乎是最不糟糕的解决方案。我只是想知道这是否是公认的做法，因为定义列表似乎很理想！