Cómo Crear con CSS un Menú Horizontal Desplegable

Cómo Crear con CSS un Menú Horizontal Desplegable

Un menú horizontal es muy útil cuando se trata de organizar páginas y subpáginas dentro de tu sitio web. El efecto se puede crear fácilmente usando CSS. En este tutorial, te mostraremos cómo usar CSS para crear un menú horizontal. ¡Empecemos!

Crear un Menú Horizontal CSS Simple

Para crear con CSS un menú horizontal desplegable, sólo tendrás que utilizar el Administrador de Archivos de tu panel de control de alojamiento y seguir estos pasos:

Paso 1. Crear un archivo HTML en blanco

Lo primero es crear un archivo HTML para tu menú.

  1. En tu hPanel, selecciona el Administrador de Archivos en la sección de Archivos.
  2. En el Administrador de Archivos haz clic en public_html.
  3. Selecciona el botón New File y crea un archivo llamado menu.html.
    Haz clic en crear el botón Add New para crear un nuevo archivo

Ahora que has creado el archivo menu.html, es el momento de generar la sintaxis del menú.

Paso 2. Añadir el código HTML del menú

Aquí 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.

Abre el archivo menu.html y añade la siguiente sintaxis:

<div class="dropdown"><li class=" even">
  <button class="mainmenubtn">Main Menu</button><li class=" odd">
  <div class="dropdown-child"><li class=" even">
    <a href="http://wwww.tudominio.com/page1.html">Sub Menu 1</a>
    <a href="http://wwww.tudominio.com/page2.html">Sub Menu 2</a>
    <a href="http://wwww.tudominio.com/page3.html">Sub Menu 3</a>
    <a href="http://wwww.tudominio.com/page4.html">Sub Menu 4</a>
    <a href="http://wwww.tudominio.com/page5.html">Sub Menu 5</a>
  </div>
</div>

Quizás notes que cada elemento tiene una clase diferente: dropdown, mainmenubtn y dropdown-child. Estas clases son necesarias para aplicar diferentes reglas CSS en el siguiente paso.

Así es como se ve el menú HTML sin ninguna regla CSS:

El menú desplegable se ve simple y se muestra horizontalmente sin ninguna regla CSS

No olvides cambiar la URL de los menús dentro del atributo href con la URL de las páginas de tu sitio web y renombrar los menús.

Paso 3. Aplicar CSS y crear el efecto desplegable

Como puedes ver, el menú HTML simple no es atractivo. Así que ahora, colorearemos el botón del menú y crearemos un efecto desplegable. Puedes estilizar el código HTML colocando las siguientes reglas CSS sobre el código anterior:

.mainmenubtn {
    background-color: skyblue;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.mainmenubtn:hover {
    background-color: blue;
    }
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: skyblue;
    min-width: 200px;
}
.dropdown-child a {
    color: blue;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Experimenta con el CSS cambiando los colores y los tamaños para adaptarlos a tus necesidades.

El archivo menu.html final debería tener este aspecto:

<html>
<head>
<style>
.mainmenubtn {
    background-color: skyblue;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.mainmenubtn:hover {
    background-color: blue;
    }
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: skyblue;
    min-width: 200px;
}
.dropdown-child a {
    color: blue;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}
</style>
</head>
<body>
<div class="dropdown">
  <button class="mainmenubtn">Main Menu</button>
  <div class="dropdown-child">
    <a href="http://wwww.tudominio.com/page1.html">Sub Menu 1</a>
    <a href="http://wwww.tudominio.com/page2.html">Sub Menu 2</a>
    <a href="http://wwww.tudominio.com/page3.html">Sub Menu 3</a>
    <a href="http://wwww.tudominio.com/page4.html">Sub Menu 4</a>
    <a href="http://wwww.tudominio.com/page5.html">Sub Menu 5</a>
  </div>
</div>
</body>
</html>

En este ejemplo, los estilos CSS se colocan en el mismo archivo HTML (hoja de estilos interna). Sin embargo, puedes crear un archivo CSS separado y vincularlo a cualquier documento HTML.

Una vez que hayas terminado, guarda y descarga el archivo. Esto es lo que verás cuando lo abras en tu navegador:

Abriendo el archivo menu.html en los navegadores. Se desplegará al hacer clic en el botón del Menú Principal.

Insertar el Menú Desplegable en Tu Tema

Para mostrar tu menú desplegable, tendrás que adjuntar el documento HTML a los archivos de la plantilla de tu tema utilizando la función readfile(). Realiza estos pasos en tu Administrador de Archivos para hacerlo:

  1. En la carpeta public_html, dirígete a wp_content -> themes. Luego, accede a la carpeta de tu tema actual.
  2. Aquí, colocaremos el menú en el header. Abre el archivo header.php y pega la siguiente sintaxis en la parte inferior del contenido del archivo.
    php
    // do php stuff
    
    readfile('menu.html');
    ?>
    Añadir la función readfile en la parte inferior del archivo header.php para mostrar el menú desplegable css en tu sitio web.

  3. Haz clic en Save & Close para guardar los cambios.

Vuelve a cargar tu sitio y verás que el menú desplegable aparece en tu sitio web.

El menú desplegable ya aparece en tu sitio web.

Puedes crear el archivo menu.html en tu ordenador local y subirlo a tu cuenta de hosting utilizando un cliente FTP o Notepad++. Después, inserta el archivo en tu tema actual con la sintaxis anterior.

Conclusión

Un menú desplegable es esencial para un sitio web ordenado. La forma más sencilla es utilizando reglas CSS en un archivo HTML para crear el menú horizontal. Créalo desde el Administrador de Archivos en tu hPanel e insértalo en el tema que usas actualmente usando la función PHP readfile().

Author
El autor

Betania V.

Betania es una redactora apasionada por el marketing digital y la creación de sitios web. Escribe tutoriales y realiza análisis SEO en el equipo de Contenido de Hostinger. En sus ratos libres, disfruta de bailar, cantar o mirar una buena película de cine clásico.