Contenidos
Este es el encabezado principal de nuestro sitio y tiene algunas partes que vamos a desglosar. En primer lugar, tenemos un enlace de salto. Un enlace de salto permite a un usuario saltarse la cabecera y la navegación y saltar directamente al elemento <main>, que en nuestro caso contiene un simple <artículo>. Será visualmente invisible por defecto y se mostrará al enfocar, cuando nos pongamos a escribir algo de CSS.A continuación, tenemos el elemento de marca, que contiene nuestro logotipo de marcador de posición. Estamos utilizando el atributo aria-label para proporcionar el texto para ayudar principalmente a los lectores de pantalla. Muy importante, el alt de la imagen describe la imagen como “logotipo de ACME”, siendo “ACME” el nombre de la empresa.Por último, tenemos nuestra navegación principal-una clásica lista desordenada de enlaces en un elemento <nav>. En
Está envuelto en un elemento <burger-menu> que es un elemento personalizado. Este es un gran ejemplo de que HTML es un lenguaje de programación increíblemente inteligente, porque aunque no hemos definido lo que este elemento es o hace todavía, pero al navegador no le importa -simplemente continúa haciendo lo que está haciendo, sin ningún problema. Esta capacidad nos ayuda a construir este proyecto de forma progresiva, en la que entraremos más, en breve.Tenemos un aria-label en nuestro elemento <nav>. No es necesario en nuestro caso, pero si tienes más de un <nav> en una página, debes etiquetarlos para ayudar a la tecnología de asistencia.Terminemos nuestro HTML añadiendo la última parte. Todavía dentro de index.html, añade lo siguiente después del cierre </header>:
Menú hamburguesa responsivo sólo css
Así que, si eres un principiante que está aprendiendo desarrollo front-end y buscas construir una barra de navegación, has llegado al lugar correcto. Pero, antes de profundizar, vamos a entender primero los principios básicos de diseño de una barra de navegación responsiva.
Es bastante obvio que la mayoría de los propietarios de sitios web quieren conseguir nuevos visitantes. El primer paso para lograrlo es mostrar a los visitantes un camino claro y conciso. Debes construir una barra de navegación que inspire curiosidad y atraiga a los visitantes simultáneamente. Debe tener tres elementos clave al diseñar una navbar ideal:
Debe ser clara y fácil de leer. En lugar de abarrotar la barra de navegación con enlaces a cada página, debería optar por las categorías más amplias de su sitio. Después, puedes añadir submenús en forma de desplegable si es necesario.
Una barra de navegación sencilla no debería ser aburrida en absoluto. Deberías ceñirte a un color de marca previamente decidido para que el diseño sea más coherente. Puedes experimentar con numerosas combinaciones de colores y utilizar tonos más claros o más oscuros para el resaltado y los menús desplegables.
Menú desplegable css
Bug(v6.3.1): Hay un error en el combo de menú drilldown-dropdown. Si configuras un menú responsivo con el drilldown en pequeño, luego el dropdown para mediano, y cambias el tamaño a pequeño y luego vuelves a mediano los dropdowns no funcionarán. El error se puede reproducir aquí
Responsive ToggleEn Foundation 5, la barra superior combinó este concepto de alternancia de menús en un plugin. Ahora tenemos un componente separado y opcional que puedes usar en conjunto con el plugin responsivo. Se llama la barra de título, y le permite configurar rápidamente un menú de conmutación en el móvil. La barra de título se oculta en las pantallas más grandes.
Para configurarla, primero hay que dar a tu menú un ID único. (A continuación, añade una barra de título con la clase .title-bar y el atributo data-responsive-toggle. El valor de data-responsive-toggle debe ser el ID del menú que estás alternando. Por último, añade data-toggle al elemento que activará la conmutación. El valor de data-toggle también debe ser el ID del menú que se está alternando.
Un menú de navegación que sea claro, conciso y fácil de navegar intuitivamente es esencial para una experiencia de usuario optimizada en el sitio web. La capacidad de respuesta del menú también es un factor clave. En el momento de escribir este artículo, más del 54% del tráfico web en todo el mundo se atribuye a los móviles. Con el diseño responsive mobile-first, los desarrolladores empiezan con el tamaño de pantalla más pequeño y luego lo van ampliando gradualmente, añadiendo más características y funcionalidades para tamaños de pantalla mayores. Las páginas web resultantes se ajustan automáticamente al tamaño de la ventana del navegador del usuario.
Este código añade un color de fondo negro y una sombra de caja gris a la cabecera. Para mantener la cabecera en la parte superior de la pantalla durante el desplazamiento, especificamos una posición fija y un desplazamiento cero desde la parte superior. También ajustamos la cabecera para que se extienda por todo el ancho del dispositivo.
En este código, especificamos propiedades de anchura y altura del 100 por ciento para el elemento nav con el fin de ajustar el contenido a la pantalla. A continuación, especificamos una posición fija para superponer el menú de navegación sobre el contenido principal de la aplicación. También seleccionamos un color de fondo negro para el elemento nav y especificamos que cualquier contenido de desbordamiento del elemento nav debe estar oculto.