Cómo crear una barra de menú desplegable con navegación responsive en HTML 5 CSS 3 GRATIS para WordPress y algunos ejemplos

En un escritorio, los sitios web tienen el espacio para mostrar el menú completo, pero en un dispositivo móvil ese espacio no está ahí, y usted quiere ocultar el menú detrás de una palanca (como un icono de hamburguesa) y mostrarlo cuando la gente hace clic en esa palanca.

¿Cómo ofrecer ambos de una manera accesible que mantenga su HTML simple, sin duplicar su menú?

Eso es lo que hace el menú de respuesta perfecta.

Aunque el icono de la hamburguesa ya es bien conocido, para ayudar mejor a las personas que no están familiarizadas con él, puedes mostrar el icono junto a la palabra»Menú».

En este artículo, le mostraremos cómo crear un menú sensible que utilice el mismo HTML en todas las ventanas de visualización, que sea sensible y que tenga un aspecto estupendo. El menú de respuesta perfecto:

Ir a CodePen para ver el código completo

HTML 5 del menú desplegable

Empezamos con el HTML.

<nav id="navigation">
    <button aria-expanded="false" aria-controls="menu">Menu</button>
    <ul id="menu" hidden>
        <li><a href="/">Home</a></li>
        <li><a href="/benefits">Benefits</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="/blog">Blog</a></li>
    </ul>
</nav>

El menú básico es como probablemente has escrito antes. Es una lista de enlaces (un ul) envueltos en un elemento de navegación. Pero dos cosas son diferentes.

Primero, hay un botón extra. El botón tiene algunos atributos con los que puede que no esté familiarizado: Atributos de Aria.

Con estos atributos podemos ayudar a las herramientas de asistencia, como los lectores de pantalla, a conocer el propósito del botón. En este caso, el botón controla el elemento con id»menú», y actualmente no está expandido.

En segundo lugar, el menú se oculta inicialmente, utilizando el atributo oculto.

Lo ocultamos inicialmente porque desarrollamos primero el móvil, y en el móvil sólo mostramos el botón.

JavaScript para crear el menú

El botón por sí solo no hará nada. Para ello, utilizamos JavaScript.

const toggleMenu = document.querySelector("#navigation button");
const menu = document.querySelector("#navigation ul");

toggleMenu.addEventListener("click", function () {
  const open = JSON.parse(toggleMenu.getAttribute("aria-expanded"));
  toggleMenu.setAttribute("aria-expanded", !open);
  menu.hidden = !menu.hidden;
});

Al hacer clic en el botón, llamamos a una función que obtendrá el valor actual del atributo»aria-expandido» e invertido.

Hará lo mismo con el atributo»hidden» del menú. La función JSON.parse nos ayuda a convertir el atributo de una cadena a una booleana real.

CSS 3 del menú móvil

La compatibilidad con el atributo oculto se remonta a IE11, pero si necesita compatibilidad con navegadores más antiguos, añadir el CSS a continuación le permitirá compatibilizarlos. (tenga en cuenta que es posible que tenga que cambiar el javascript de arriba también)

@media ( min-width: 40rem ) {
  #navigation button { display: none }
  #menu { display: block }
}

A un cierto ancho, la ventana será lo suficientemente ancha como para ocultar el botón y mostrar el menú.

El ancho al que esto sucede depende de tu diseño y de la longitud de tu menú, así que aunque 40rem funcione para mí, puede que no funcione para ti.

Para mostrar esto en acción, cambie el panel»CSS» en el lápiz de abajo, cambiará entre mostrar sólo el botón y sólo el menú.

Cómo crear un menú personalizado en WordPress

// Registro del menú de WordPress (Theme support)
add_theme_support( 'nav-menus' );
if ( function_exists( 'register_nav_menus' ) ) {
    register_nav_menus(
        array(
          'nav-menu' => 'nav-menu'
        )
    );
}

// Remove the <div> surrounding the dynamic navigation to cleanup markup
function my_wp_nav_menu_args($args = '') {
$args['container'] = false;
return $args;
}
// Remove Injected classes, ID's and Page ID's from Navigation <li> items
function my_css_attributes_filter($var) {
return is_array($var) ? array() : '';
}
add_filter('wp_nav_menu_args', 'my_wp_nav_menu_args'); // Remove surrounding <div> from WP Navigation
//add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1); // Remove Navigation <li> injected classes
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1); // Remove Navigation <li> injected ID
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1); // Remove Navigation <li> Page ID's

El toque final: el estilo

En este punto, depende de ti cómo quieras estilizar el botón y el menú. Puedes hacerlo tan simple o complicado como quieras.

Por ejemplo, algunas barra de menú en móvil utilizan un icono svg para el menú con un fondo de crecimiento animado y una animación escalonada de los elementos del menú.

Cambié a PostCSS (que permite anidar) para hacer las cosas un poco más legibles, pero es bastante código a pesar de todo.

Pero no tiene por qué ser así. Con sólo este esqueleto HTML y JavaScript, puedes usar CSS para darle estilo de muchas maneras diferentes.

Puede elegir abrir el menú como un menú desplegable, empujando el resto del contenido hacia abajo, o puede hacer que se deslice desde la izquierda como un panel lateral.

Y usando transformaciones css puedes animar la transición de la manera que quieras.

Siempre que mantenga intactos el HTML y la funcionalidad principal del JavaScript, dispondrá de un menú accesible y con capacidad de respuesta que utiliza el mismo HTML tanto en las vistas móviles como en las más amplias. El menú de respuesta perfecto.