Question

我正在尝试使用HTML5（类型工具栏）创建菜单。事实证明，目前没有浏览器支持工具栏类型。（感谢Zach指出我这一点）什么是适用于Chrome和Firefox的最佳实现？

目前，我正在考虑继续按照HTML5规范使用菜单元素，并使用CSS根据需要设置样式，并使用JS添加行为。

Answer 1

以下邮件列表发布说明了类型工具栏菜单的当前意图：

工具栏只不过是元素名称。   没有任何魔法，没有特殊的内容模型，它是所有的CSS   样式，您使用常规表单控件来填充工具栏。

来自http://lists.w3.org/Archives/Public/public-whatwg-archive/2012Dec/0264.html

因此，我敢说，我可以为所有浏览器使用菜单，即使浏览器没有明确支持菜单元素的HTML5语义，因为它仍会将其显示为块，因为用户代理，我已经检查了（例如firefox，chrome，safari，ie），带有display：block的样式菜单。

Answer 2

如果你愿意使用一些jquery，如果我理解你的问题，那么一个简单的

<div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="grid">Summary</a></li>
                <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
                <li><a href="#" data-icon="gear">Setup</a></li>
            </ul>
        </div><!-- /navbar -->
</div><!-- /footer -->

会做到这一点。

在此处阅读有关navbar小部件的更多信息：http://demos.jquerymobile.com/1.4.1/navbar/

Answer 3

我会看一下bootstrap menu，它的工作原理（IMO）就像一个工具栏，它得到了很多浏览器的广泛支持。

它还有glyphicons，因此您可以轻松地在标签旁边显示按钮图标

类型工具栏的HTML5菜单元素的替代品？

3 个答案: