快速提示:不要忘记“ optgroup”元素

响应式网站的一种流行的导航设计模式是将您的网站导航折叠到一个select菜单中。 但是,在select元素中表示层次结构或分类区别通常会导致带有手动连字符和大量  HTML出现  空格。 在本教程中,我们就为您介绍一款somehwat晦涩HTML标记称为optgroup这将为您提供分组相关内容的简单(和语义)的方式select菜单。


介绍

找出如何使网站导航最佳地适合移动设备的小屏幕空间是响应式Web设计的一项持续挑战。 有各种各样的响应式Web设计导航模式都可以很好地工作。 较流行的方法之一是将网站导航浓缩为表单select元素。

网络上的各种教程都对此技术进行了介绍和解释,包括Ian Yates在Webdesigntuts +上的一篇文章: 用Skeleton构建响应式布局中 。 但是,将站点导航转换为本地表单控件并非没有争议。 有人认为这是个坏主意 ,因为表单元素根本不是用于导航的。

select :快速概述

select元素非常适合用作UI元素,因为它可以在单个控件下隐藏许多选项,从而节省了大量屏幕空间(在移动设备上很有吸引力)。 它还允许设计人员将站点导航保持在页面顶部,用户可以在该页面上找到它。

此外, select菜单还具有其他交互作用所不能提供的一个好处:本机控件。 激活后, select菜单使用户可以访问本机控件,这些控件可能提供最有利的交互,而与用户的设备或输入方法无关。

作为设计者,最终决定是否将导航转换为移动尺寸的select 每种情况都是不同的。 如果您决定沿这条路线走,则本教程将提供有关如何使用optgroup HTML标记对导航链接进行最佳分组的更多信息。


示例:Webdesigntuts +

我们将使用Webdesigntuts +作为如何从理论上使用optgroup标记的简单示例。

注意:此示例绝不是建议如何正确解决Webdesigntuts +或任何站点的导航设计问题。 这只是如何使用optgroup元素的快速说明。

假设我们想将Webdesigntuts +主页上的三个单独的导航元素压缩为一个select元素。

快速提示:不要忘记“ optgroup”元素_第1张图片

没有optgroup

如果操作不正确,则在保持分类分组的同时将可导航链接转换为select元素可能会很麻烦。 一些设计师/开发人员可能使用手动空格(&nb)和连字符作为分隔符来创建一个巨大的select菜单:

快速提示:不要忘记“ optgroup”元素_第2张图片

optgroup

但是,使用optgroup元素将为您提供更整洁HTML和对select列表中的分类的内置支持。 我们使用label属性来确定将显示的内容:

快速提示:不要忘记“ optgroup”元素_第3张图片

您可以看到HTML标记允许您表示父/子关系,而不必插入特殊的空格和带连字符的列表。

快速提示:不要忘记“ optgroup”元素_第4张图片

移动

如前所述,使用select元素的一个优点是可以访问移动或触摸屏设备上的本机控件。 以下是这些菜单的样例:

快速提示:不要忘记“ optgroup”元素_第5张图片
快速提示:不要忘记“ optgroup”元素_第6张图片

结论

这里的所有都是它的! 只需记住, optgroup元素为分类select列表中的链接组提供了更为语义和可维护的解决方案。 是否使用select菜单来浓缩移动设备上的网站导航是您作为设计师需要做出的决定; 但是,您现在可以在工具带中获得更多知识,以掌握响应式网页设计!

翻译自: https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-optgroup-element--webdesign-9878

你可能感兴趣的:(java,python,深度学习,html,css)