{"id":2749,"date":"2024-09-09T10:58:01","date_gmt":"2024-09-09T08:58:01","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?p=2749"},"modified":"2024-09-09T10:58:05","modified_gmt":"2024-09-09T08:58:05","slug":"como-crear-un-menu-y-submenu-de-dos-niveles-con-html-css-y-javascript","status":"publish","type":"post","link":"https:\/\/sutilweb.eu\/index.php\/2024\/09\/09\/como-crear-un-menu-y-submenu-de-dos-niveles-con-html-css-y-javascript\/","title":{"rendered":"C\u00f3mo Crear un Men\u00fa y Submen\u00fa de Dos Niveles con HTML, CSS y JavaScript"},"content":{"rendered":"\n

En el desarrollo web, la navegaci\u00f3n<\/strong> es un elemento clave para la experiencia de usuario (UX)<\/strong>. Un men\u00fa bien dise\u00f1ado ayuda a los visitantes a encontrar f\u00e1cilmente lo que buscan, mientras que un submen\u00fa de dos niveles permite organizar la informaci\u00f3n de manera m\u00e1s eficiente, sobre todo en sitios con mucha informaci\u00f3n<\/strong>. En este art\u00edculo te ense\u00f1ar\u00e9 c\u00f3mo crear un men\u00fa con un submen\u00fa de dos niveles utilizando HTML, CSS<\/strong> y un poco de JavaScript<\/strong> para la interactividad.<\/p>\n\n\n\n

\u00bfPor qu\u00e9 Crear Men\u00fas Desplegables?<\/h2>\n\n\n\n

Los men\u00fas desplegables<\/strong> son \u00fatiles para mejorar la organizaci\u00f3n y estructura de un sitio web. Estos men\u00fas permiten mostrar categor\u00edas generales y, al mismo tiempo, incluir subcategor\u00edas. Por ejemplo, en una tienda en l\u00ednea podr\u00edas tener una categor\u00eda de \u00abRopa\u00bb y subcategor\u00edas como \u00abCamisetas\u00bb, \u00abPantalones\u00bb y \u00abAccesorios\u00bb. Esto reduce el desorden en la p\u00e1gina principal y mejora la navegaci\u00f3n del usuario<\/strong>.<\/p>\n\n\n\n

Estructura del Men\u00fa con HTML<\/h2>\n\n\n\n

El primer paso para crear un men\u00fa de dos niveles es estructurarlo usando HTML<\/strong>. Este lenguaje nos proporciona las etiquetas necesarias para construir la base de nuestro men\u00fa y submen\u00fa.<\/p>\n\n\n\n

Aqu\u00ed te muestro el c\u00f3digo b\u00e1sico:<\/p>\n\n\n\n

<nav>\n    <ul class=\"menu\">\n        <li><a href=\"#\">Inicio<\/a><\/li>\n        <li><a href=\"#\">Productos<\/a>\n            <ul class=\"submenu\">\n                <li><a href=\"#\">Camisetas<\/a><\/li>\n                <li><a href=\"#\">Pantalones<\/a>\n                    <ul class=\"submenu-nivel2\">\n                        <li><a href=\"#\">Jeans<\/a><\/li>\n                        <li><a href=\"#\">Shorts<\/a><\/li>\n                    <\/ul>\n                <\/li>\n                <li><a href=\"#\">Accesorios<\/a><\/li>\n            <\/ul>\n        <\/li>\n        <li><a href=\"#\">Contacto<\/a><\/li>\n    <\/ul>\n<\/nav><\/code><\/pre>\n\n\n\n
En este c\u00f3digo, usamos listas no ordenadas (<ul><\/code>) para estructurar el men\u00fa principal y el submen\u00fa. Los elementos de la lista (<li><\/code>) contienen enlaces (<a><\/code>) que act\u00faan como elementos interactivos. El submen\u00fa de nivel dos est\u00e1 anidado dentro del submen\u00fa de nivel uno.<\/p>\n\n\n\n
Estilos del Men\u00fa con CSS<\/h2>\n\n\n\n
El siguiente paso es estilizar<\/strong> nuestro men\u00fa usando CSS<\/strong>. A continuaci\u00f3n, te mostrar\u00e9 c\u00f3mo ocultar el submen\u00fa por defecto y hacerlo visible cuando el usuario pase el rat\u00f3n sobre el men\u00fa principal.<\/p>\n\n\n\n
\/* Estilos b\u00e1sicos del men\u00fa *\/\n.menu {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n}\n\n.menu li {\n    position: relative;\n}\n\n.menu a {\n    display: block;\n    padding: 10px 20px;\n    text-decoration: none;\n    color: #333;\n    background-color: #f4f4f4;\n}\n\n.menu a:hover {\n    background-color: #ddd;\n}\n\n\/* Ocultar submen\u00fas por defecto *\/\n.submenu, .submenu-nivel2 {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    background-color: #f4f4f4;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.submenu li, .submenu-nivel2 li {\n    width: 200px;\n}\n\n.submenu a, .submenu-nivel2 a {\n    padding: 10px;\n    white-space: nowrap;\n}\n\n\/* Mostrar submen\u00fa al pasar el rat\u00f3n *\/\n.menu li:hover > .submenu {\n    display: block;\n}\n\n.submenu li:hover > .submenu-nivel2 {\n    display: block;\n    top: 0;\n    left: 100%;\n}<\/code><\/pre>\n\n\n\n
Explicaci\u00f3n del C\u00f3digo CSS<\/h3>\n\n\n\n
    \n
  1. Men\u00fa principal<\/strong>: Estilizamos la lista principal .menu<\/code> como un men\u00fa horizontal utilizando display: flex<\/code>. Cada elemento (<li><\/code>) est\u00e1 posicionado de forma relativa para que los submen\u00fas puedan posicionarse correctamente.<\/li>\n\n\n\n
  2. Submen\u00fas<\/strong>: Los submen\u00fas .submenu<\/code> y .submenu-nivel2<\/code> est\u00e1n ocultos por defecto con display: none<\/code>. Usamos position: absolute<\/code> para asegurarnos de que aparezcan justo debajo o al lado del men\u00fa principal.<\/li>\n\n\n\n
  3. Efecto hover<\/strong>: Al pasar el rat\u00f3n sobre un elemento del men\u00fa, el submen\u00fa correspondiente se muestra utilizando display: block<\/code>.<\/li>\n<\/ol>\n\n\n\n
    A\u00f1adir Interactividad con JavaScript<\/h2>\n\n\n\n
    Aunque el CSS puede manejar la mayor\u00eda de las interacciones, agregar JavaScript<\/strong> nos permite mejorar la funcionalidad, especialmente en dispositivos t\u00e1ctiles o para asegurar la compatibilidad con navegadores que no soportan :hover<\/code>.<\/p>\n\n\n\n
    document.addEventListener('DOMContentLoaded', function() {\n    var menuItems = document.querySelectorAll('.menu > li');\n\n    menuItems.forEach(function(item) {\n        item.addEventListener('click', function(event) {\n            var submenu = item.querySelector('.submenu');\n            if (submenu) {\n                event.preventDefault();\n                submenu.classList.toggle('activo');\n            }\n        });\n    });\n});<\/code><\/pre>\n\n\n\n
    Explicaci\u00f3n del C\u00f3digo JavaScript<\/h3>\n\n\n\n
      \n
    1. Escuchar el evento DOMContentLoaded<\/strong>: Nos aseguramos de que todo el DOM est\u00e9 cargado antes de ejecutar el c\u00f3digo.<\/li>\n\n\n\n
    2. Seleccionar los elementos del men\u00fa<\/strong>: Seleccionamos todos los elementos de primer nivel del men\u00fa principal.<\/li>\n\n\n\n
    3. Evento click<\/strong>: Agregamos un evento click<\/code> para cada elemento del men\u00fa que tiene un submen\u00fa. Este c\u00f3digo permite que el submen\u00fa se despliegue al hacer clic.<\/li>\n\n\n\n
    4. Clase activo<\/strong>: Usamos la clase activo<\/code> para mostrar u ocultar el submen\u00fa seg\u00fan sea necesario.<\/li>\n<\/ol>\n\n\n\n
      Conclusi\u00f3n<\/h2>\n\n\n\n
      Crear un men\u00fa desplegable de dos niveles<\/strong> con HTML<\/strong>, CSS<\/strong> y JavaScript<\/strong> es un proceso relativamente sencillo que mejora la usabilidad y organizaci\u00f3n de tu sitio web. Siguiendo los pasos que hemos detallado, podr\u00e1s implementar este tipo de men\u00fas en cualquier proyecto web, proporcionando una mejor experiencia de navegaci\u00f3n a tus usuarios.<\/p>\n\n\n\n
      Recuerda que el uso de CSS<\/strong> para controlar la visibilidad de los submen\u00fas y de JavaScript<\/strong> para a\u00f1adir interactividad adicional es clave para garantizar una experiencia responsiva<\/strong> y accesible. Si bien este es un men\u00fa b\u00e1sico, puedes personalizarlo seg\u00fan las necesidades de tu sitio, como agregar efectos de transici\u00f3n, animaciones o compatibilidad con dispositivos m\u00f3viles.<\/p>\n\n\n\n
      Libros Recomendados para Aprender M\u00e1s<\/h2>\n\n\n\n
      1. HTML and CSS: Design and Build Websites<\/em> – Jon Duckett<\/h3>\n\n\n\n
      Ver en Amazon<\/a><\/p>\n\n\n\n
      2. JavaScript: The Good Parts<\/em> – Douglas Crockford<\/h3>\n\n\n\n
      Ver en Amazon<\/a><\/p>\n\n\n\n
      3. CSS Secrets<\/em> – Lea Verou<\/h3>\n\n\n\n
      Ver en Amazon<\/a><\/p>\n\n\n\n
      Enlaces de Inter\u00e9s<\/h2>\n\n\n\n