Share
Un patrón de diseño de navegación popular para la web receptiva es el colapso de la navegación de su sitio web en un seleccionar menú. Sin embargo, representando jerarquías o distinciones categóricas en seleccionar Los elementos a menudo conducen a HTML masacrado con guiones manuales y un montón de espacios En este tutorial, te presentaremos una etiqueta HTML poco clara llamada grupo opcional que le proporcionará una forma fácil (y semántica) de agrupar contenido relacionado en seleccionar menús.
Descubrir cómo encajar de forma óptima la navegación del sitio web en la pequeña pantalla de los dispositivos móviles es un desafío continuo del diseño web sensible. Hay varios patrones de navegación de diseño web sensibles que funcionan bastante bien. Uno de los métodos más populares es condensar la navegación del sitio web en una forma seleccionar elemento.
Esta técnica ha sido cubierta y explicada en varios tutoriales en la web, incluido en un artículo en Webdesigntuts + por Ian Yates: Creación de un diseño receptivo con Skeleton. Sin embargo, convertir la navegación del sitio en un control de forma nativa no está exento de controversia. Algunos argumentan que es una mala idea, ya que los elementos de formulario simplemente no fueron diseñados para la navegación.
Accentsconagua
seleccionar: Una descripción rápidalos seleccionar element es un gran elemento de la interfaz de usuario porque puede ocultar muchas opciones bajo un solo control, lo que ahorra una gran cantidad de espacio en pantalla (una propuesta atractiva para dispositivos móviles). También permite a los diseñadores mantener la navegación del sitio en la parte superior de la página, donde los usuarios están acostumbrados a encontrarlo..
Además, hay un beneficio de interacción. seleccionar los menús proporcionan que otros elementos HTML simplemente no pueden: controles nativos. Cuando esta activo, seleccionar los menús brindan a los usuarios acceso a controles nativos que brindan la interacción más favorable, independientemente del dispositivo o método de entrada del usuario.
Decidir si convertir o no su navegación en una seleccionar en tamaños móviles depende en última instancia de usted como diseñador. Cada caso es diferente. Si decide seguir este camino, este tutorial le brindará más información sobre cómo agrupar de manera óptima sus enlaces navegables usando el grupo opcional Etiqueta HTML.
Vamos a utilizar Webdesigntuts + como un ejemplo sencillo de cómo usar teóricamente grupo opcional etiqueta.
Nota: Este ejemplo no es de ninguna manera una sugerencia de cómo resolver correctamente un problema de diseño de navegación para Webdesigntuts + o cualquier sitio. Es simplemente una ilustración rápida de cómo se podría usar el grupo opcional elemento.
Digamos que queríamos condensar los tres elementos de navegación separados en la página de inicio de Webdesigntuts + en una seleccionar elemento.
grupo opcional La conversión de enlaces navegables en un elemento seleccionado mientras se mantiene la agrupación categórica puede resultar desordenada si no se realiza correctamente. Algunos diseñadores / desarrolladores pueden crear un gigante seleccionar Menú utilizando espacios manuales () y guiones como separadores:
grupo opcional Sin embargo, utilizando el grupo opcional Element le proporcionará un HTML más limpio y soporte integrado para la categorización en un seleccionar lista. Usamos el etiqueta atributo para determinar lo que se mostrará:
Puede ver que el marcado HTML le permite representar una relación padre / hijo sin tener que insertar espacios especiales y listas con guiones..
Como se mencionó, una ventaja de usar el seleccionar El elemento es el acceso a los controles nativos en dispositivos móviles o de pantalla táctil. Aquí hay algunos ejemplos de cómo se verían estos menús:
¡Eso es todo al respecto! Solo recuerda el grupo opcional Element proporciona una solución más semántica y mantenible para categorizar grupos de enlaces en una seleccionar lista. Si usas o no un seleccionar El menú para condensar la navegación de sitios web en dispositivos móviles es una decisión que debe tomar como diseñador; sin embargo, ahora tiene un nugget adicional de conocimiento en su cinturón de herramientas para dominar el diseño web sensible!
