optgroup点击_快速提示：不要忘记“ optgroup”元素

optgroup点击

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

---

介绍

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

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

select ：快速概述

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

此外， select菜单还提供了一个交互好处，即其他HTML元素根本无法实现：本机控件。 激活后， select菜单使用户可以访问本机控件，这些控件可能提供最有利的交互，而与用户的设备或输入方法无关。

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

---

示例：Webdesigntuts +

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

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

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

---

没有optgroup

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

<select>
	<option value="Without Optgroup">Nav Without &lt;optgroup></option>

	<option value="Browse Webdesign Tuts+">Browse Webdesign Tuts+</option>
	<option value="Home">&nbsp;&nbsp; - Home</option>
	<option value="Home">&nbsp;&nbsp; - Tutorials</option>
	<option value="Articles">&nbsp;&nbsp; - Articles</option>
	<option value="Tips">&nbsp;&nbsp; - Tips</option>
	<option value="Sessions">&nbsp;&nbsp; - Sessions</option>
	<option value="Videos">&nbsp;&nbsp; - Videos</option>
	<option value="Premium">&nbsp;&nbsp; - Premium</option>

	<option value="About Webdesign Tuts+">About Webdesign Tuts+</option>
	<option value="Advertise">&nbsp;&nbsp; - Advertise</option>
	<option value="Write For Us">&nbsp;&nbsp; - Write For Us</option>
	<option value="About">&nbsp;&nbsp; - About</option>
	<option value="Usage">&nbsp;&nbsp; - Usage</option>

    <option value="Tuts+ Network">Tuts+ Network</option>
    <option value="Tuts+ Hub">&nbsp;&nbsp; - Tuts+ Hub</option>
    <option value="Psdtuts+">&nbsp;&nbsp; - Psdtuts+</option>
    <option value="Nettuts+">&nbsp;&nbsp; - Nettuts+</option>
    <option value="VectorTuts+">&nbsp;&nbsp; - VectorTuts+</option>
    <option value="Audiotuts+">&nbsp;&nbsp; - Audiotuts+</option>
    <option value="Aetuts+">&nbsp;&nbsp; - Aetuts+</option>
    <option value="Cgtuts+">&nbsp;&nbsp; - Cgtuts+</option>
    <option value="Phototuts+">&nbsp;&nbsp; - Phototuts+</option>
    <option value="Mobiletuts+">&nbsp;&nbsp; - Mobiletuts+</option>
    <option value="Webdesigntuts+">&nbsp;&nbsp; - Webdesigntuts+</option>
    <option value="Wptuts+">&nbsp;&nbsp; - Wptuts+</option>
    <option value="Mactuts+">&nbsp;&nbsp; - Mactuts+</option>
    <option value="Gamedevtuts+">&nbsp;&nbsp; - Gamedevtuts+</option>
    <option value="Crafttuts+">&nbsp;&nbsp; - Crafttuts+</option>
</select>

---

与optgroup

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

<select>
	<option value="With Optgroup">Nav With &amp;lt;optgroup></option>
	
	<optgroup label="Browse Webdesign Tuts+">
		<option value="Home">Home</option>
		<option value="Home">Tutorials</option>
		<option value="Articles">Articles</option>
		<option value="Tips">Tips</option>
		<option value="Sessions">Sessions</option>
		<option value="Videos">Videos</option>
		<option value="Premium">Premium</option>
	</optgroup>

    <optgroup label="About Webdesign Tuts+">
    	<option value="Advertise">Advertise</option>
    	<option value="Write For Us">Write For Us</option>
    	<option value="About">About</option>
    	<option value="Usage">Usage</option>
    </optgroup>

    <optgroup label="Tuts+ Network">
        <option value="Tuts+ Hub">Tuts+ Hub</option>
        <option value="Psdtuts+">Psdtuts+</option>
        <option value="Nettuts+">Nettuts+</option>
        <option value="VectorTuts+">VectorTuts+</option>
        <option value="Audiotuts+">Audiotuts+</option>
        <option value="Aetuts+">Aetuts+</option>
        <option value="Cgtuts+">Cgtuts+</option>
        <option value="Phototuts+">Phototuts+</option>
        <option value="Mobiletuts+">Mobiletuts+</option>
        <option value="Webdesigntuts+">Webdesigntuts+</option>
        <option value="Wptuts+">Wptuts+</option>
        <option value="Mactuts+">Mactuts+</option>
        <option value="Gamedevtuts+">Gamedevtuts+</option>
        <option value="Crafttuts+">Crafttuts+</option>
    </optgroup>
</select>

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

---

移动

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

---

结论

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

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

optgroup点击