{"id":4230,"date":"2017-04-19T01:40:45","date_gmt":"2017-04-18T23:40:45","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriales\/?p=4230"},"modified":"2026-03-10T16:29:05","modified_gmt":"2026-03-10T15:29:05","slug":"como-crear-un-menu-horizontal-simple-css","status":"publish","type":"post","link":"\/mx\/tutoriales\/como-crear-un-menu-horizontal-simple-css\/","title":{"rendered":"C\u00f3mo crear un men\u00fa horizontal con CSS y HTML"},"content":{"rendered":"

Un menú horizontal contiene una lista de páginas y subpáginas. Los usuarios pueden acceder a su contenido haciendo clic o pasando el ratón por encima del menú.<\/p>

Este elemento de diseño reduce el desorden de los botones, los enlaces y el texto, lo que resulta útil para mejorar la experiencia de usuario de un sitio web o una aplicación en pantallas pequeñas.<\/p>

Sigue leyendo porque vamos a cubrir los pasos para crear un menú horizontal utilizando CSS y HTML. También aprenderás a aplicar estilos al menú desplegable recién creado para que coincida con la marca de tu proyecto.<\/p>

Descarga la hoja de trucos CSS definitiva<\/a><\/p>

Crear un menú horizontal CSS Simple<\/h2>

Este tutorial requiere un editor de texto para crear el archivo HTML y CSS que contiene el código del menú horizontal. También puedes hacerlo a través del Administrador de archivos<\/a> de tu panel de control de alojamiento web<\/a>, la cuál vamos a utilizar para nuestro ejemplo de menú horizontal.<\/p>

Paso 1: crear un archivo HTML en blanco y añadir el código HTML<\/h3>

Lo primero es crear un archivo HTML para tu menú.<\/p>

    \n
  1. En tu hPanel, selecciona el Administrador de Archivos<\/strong> en la sección de Archivos<\/strong>.<\/li>\n<\/ol>
    \"Administrador<\/figure>
      \n
    1. En el Administrador de Archivos<\/strong> haz clic en public_html<\/strong>.<\/li>\n<\/ol>
      \"Carpeta<\/figure>
        \n
      1. Selecciona el botón Nuevo archivo<\/strong> y crea un archivo llamado menu.html<\/strong>.<\/li>\n<\/ol>
        \"Crear<\/figure>

        Ahora que has creado el archivo menu.html<\/strong>, es el momento de generar la sintaxis del menú.<\/p>

        Luego, crearemos un botón de menú que consiste en un menú principal (menú padre) y cinco submenús (menús hijos). Puedes enlazar cada submenú a diferentes páginas de tu sitio web.<\/p>

        Abre el archivo menu.html<\/strong> y añade la siguiente sintaxis:<\/p>

        <div class=\"dropdown\"><li class=\" even\">\n  <button class=\"mainmenubtn\">Main Menu<\/button><li class=\" odd\">\n  <div class=\"dropdown-child\"><li class=\" even\">\n    <a href=\"http:\/\/wwww.tudominio.com\/page1.html\">Sub Menu 1<\/a>\n    <a href=\"http:\/\/wwww.tudominio.com\/page2.html\">Sub Menu 2<\/a>\n    <a href=\"http:\/\/wwww.tudominio.com\/page3.html\">Sub Menu 3<\/a>\n    <a href=\"http:\/\/wwww.tudominio.com\/page4.html\">Sub Menu 4<\/a>\n    <a href=\"http:\/\/wwww.tudominio.com\/page5.html\">Sub Menu 5<\/a>\n  <\/div>\n<\/div><\/pre>
        Las clases dropdown, mainmenubtn<\/strong> y dropdown-child<\/strong> representan diferentes elementos HTML. CSS las utilizará para acceder a un elemento específico y alterar su diseño.<\/p>
        Así es como se ve el menú HTML sin ninguna regla CSS<\/a>:<\/p>
        \"El<\/figure><\/div>
                
        \n            
        \n                \n                    \n                <\/svg>\n                
        \n                    Consejo profesional                <\/p>\n            <\/div>\n            
        No olvides cambiar la URL de los menús dentro del atributo href<\/strong> con la URL de las páginas de tu sitio web y renombrar los menús para reflejar el contenido real de la página.<\/p>\n                    <\/div>\n        <\/p>
        Paso 2: aplicar y crear el efecto de menú desplegable CSS<\/h3>
        Ahora que tienes elementos HTML con los que trabajar, vamos a crear el efecto desplegable y las reglas CSS para cada uno de ellos.<\/p>
        Genera una hoja de estilos interna dentro del archivo menu.html<\/strong> colocando el siguiente código dentro del elemento <style><\/strong>:<\/p>
        .mainmenubtn {\n    background-color: skyblue;\n    color: white;\n    border: none;\n    cursor: pointer;\n    padding:20px;\n    margin-top:20px;\n}\n.mainmenubtn:hover {\n    background-color: blue;\n    }\n.dropdown {\n    position: relative;\n    display: inline-block;\n}\n.dropdown-child {\n    display: none;\n    background-color: skyblue;\n    min-width: 200px;\n}\n.dropdown-child a {\n    color: blue;\n    padding: 20px;\n    text-decoration: none;\n    display: block;\n}\n.dropdown:hover .dropdown-child {\n    display: block;\n}<\/pre>
                
        \n            
        \n                \n                    \n                <\/svg>\n                
        \n                    Consejo profesional                <\/p>\n            <\/div>\n            
        En este ejemplo, los estilos CSS se colocan en el mismo archivo HTML (hoja de estilo interna). Utiliza CSS externo enlazando el documento HTML a un archivo CSS separado para facilitar su modificación.<\/p>\n                    <\/div>\n        <\/p>
        El nombre de la clase .mainmenubtn<\/strong> contiene las propiedades CSS del botón desplegable. Este establece los colores de fondo y de fuente del botón, y omite el borde. <\/p>
        La propiedad cursor<\/strong> dicta que el cursor del ratón cambiará a la mano con el símbolo del dedo índice extendido, cuando se pasa por encima del botón desplegable.<\/p>
        La adición de un selector hover<\/strong> a la clase .mainmenubtn<\/strong> determina el aspecto que tendrá el menú desplegable cuando un usuario pase el ratón por encima.<\/p>
        La clase .dropdown<\/strong> establece la posición del menú desplegable. En el ejemplo anterior, las reglas CSS sitúan los elementos del menú debajo del menú principal. La propiedad inline-block<\/strong> hace que aparezcan sin tener un salto de línea que los separe.<\/p>
        La clase .dropdown-child<\/strong> se refiere al contenido real del menú desplegable. El uso de un valor display<\/strong> de none<\/strong> hace que los submenús sean invisibles. .dropdown:hover .dropdown-child<\/strong> convierte todo el elemento en un menú desplegable que se puede pasar por encima.<\/p>
                
        \n            
        \n                \n                    \n                <\/svg>\n                
        \n                    Consejo profesional                <\/p>\n            <\/div>\n            
        Siéntete libre de experimentar con otras propiedades CSS para obtener el diseño que desees. Incluso puedes añadir JavaScript para crear un menú CSS desplegable responsivo con animaciones dinámicas.<\/p>\n                    <\/div>\n        <\/p>
        Una vez que hayas terminado, guarda y descarga el archivo. Esto es lo que verás cuando lo abras en tu navegador:<\/p>
        \"Ejemplo<\/figure><\/div>
        Ejemplos de menús horizontales desplegables HTML y CSS<\/h2>
        Hay muchas plantillas modernas de menús horizontales desplegables CSS disponibles para que no tengas que codificar uno desde cero. Al menos, son una gran fuente de inspiración.<\/p>
        La siguiente plantilla de menú horizontal desplegable<\/a> de kkrueger<\/a> nos muestra un menú desplegable HTML y CSS. Cada menú principal se expande suavemente al pasar por encima, creando un aspecto dinámico y memorable para la página web.<\/p>
        \"Ejemplo<\/figure><\/div>
        Otro ejemplo es la plantilla hecha por Bhakti Pasaribu. Esta Utiliza JavaScript para crear un menú horizontal desplegable interactivo<\/a>. <\/p>
        Las opciones aparecen con una animación de giro al hacer clic en el menú principal. Otra animación sustituye el menú principal por la opción seleccionada, creando un efecto de transición sin fisuras. Esta plantilla de menú horizontal desplegable es dinámica y simple de una manera única.<\/p>
        \"Ejemplo<\/figure><\/div>
        A los amantes del minimalismo les puede gustar lo que ofrece Chris Ota<\/a>. Su menú plegable<\/a> es sutil y no acapara demasiado espacio. <\/p>
        Aun así, pone la experiencia del usuario en primer plano. Puedes sustituir fácilmente las descripciones de los elementos de la lista por iconos, reforzando aún más la marca de tu sitio.<\/p>
        \"Ejemplo<\/figure>
        Si buscas un menú más llamativo con efectos visuales, te recomendamos que veas el menú horizontal desplegable Molten<\/a> de Zealand<\/a>. Utiliza animaciones de fotogramas clave CSS para crear destellos interesantes alrededor de la barra de navegación.<\/p>
        \"Ejemplo<\/figure><\/div>
        Recursive Hover Nav<\/a> por Sean Codes<\/a> ofrece una solución de mega menú sin obstruir la experiencia del usuario del sitio. El menú desplegable de varios niveles está construido con HTML, CSS y JavaScript.<\/p>
        Cuando pasas el ratón por encima del menú principal, los submenús aparecen con una animación de transición. Aunque no tiene efectos llamativos como los otros ejemplos, esta plantilla es más práctica cuando se trata de gestionar un menú con mucho contenido.<\/p>
        \"Ejemplo<\/figure>
                
        \n            
        \n                \n                    \n                <\/svg>\n                
        \n                    Consejo profesional                <\/p>\n            <\/div>\n            
        Al diseñar un menú horizontal desplegable, asegúrate de tener en cuenta la experiencia del usuario del sitio. Un menú CSS bien hecho no garantiza una gran usabilidad. En la mayoría de los casos, menos es más.<\/p>\n                    <\/div>\n        <\/p>
        \"\"<\/a><\/figure>
        Conclusión<\/h2>
        Tener un menú CSS horizontal desplegable facilita el diseño de una interfaz de usuario eficaz. También Reduce el número de elementos que saturan tu página web y con un diseño adecuado, la estética del sitio web mejora.<\/p>
        Puedes utilizar HTML, JavaScript, y CSS para crear un menú horizontal desplegable desde cero. También puedes elegir una de las muchas plantillas de menú horizontal desplegable codificadas por diseñadores profesionales y ajustarla a tus preferencias.<\/p>
        Esperamos que este artículo te haya proporcionado una mejor comprensión de cómo diseñar con CSS un menú horizontal desplegable. ¡Buena suerte!<\/p>\n","protected":false},"excerpt":{"rendered":"
        Un menú horizontal contiene una lista de páginas y subpáginas. Los usuarios pueden acceder a su contenido haciendo clic o pasando el ratón por encima del menú. Este elemento de diseño reduce el desorden de los botones, los enlaces y el texto, lo que resulta útil para mejorar la experiencia de usuario de un sitio […]<\/p>\n
        Read More…<\/a><\/p>\n","protected":false},"author":353,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Crear menu\u0301 horizontal desplegable con CSS y HTML: ejemplos","rank_math_description":"Aprende a usar CSS y HTML para crear un menu horizontal de una manera f\u00e1cil y sencilla, con nuestra gu\u00eda que incluye ejemplos pr\u00e1cticos.","rank_math_focus_keyword":"css menu horizontal","footnotes":""},"categories":[5701],"tags":[14179],"class_list":["post-4230","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web","tag-css-menu-horizontal"],"hreflangs":[{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-crear-un-menu-horizontal-simple-css\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-crear-un-menu-horizontal-simple-css\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-crear-un-menu-horizontal-simple-css\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-crear-un-menu-horizontal-simple-css\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/4230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/comments?post=4230"}],"version-history":[{"count":38,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/4230\/revisions"}],"predecessor-version":[{"id":47305,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/4230\/revisions\/47305"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/media?parent=4230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/categories?post=4230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/tags?post=4230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}