Portada Diseño Web Cómo Crear un Menú Desplegable Simple con Estilos CSS

Cómo Crear un Menú Desplegable Simple con Estilos CSS

Un menú desplegable simple puede resultar de gran utilidad cuando se desea tener organizadas páginas o secciones dentro de un mismo website. El efecto “desplegable” se puede conseguir facialmente usando estilos CSS dentro del código de un archivo .html

En este tutorial indicaremos todos los pasos que se deben llevar a cabo para crear un menú desplegable simple con estilos CSS. ¡Empecemos!

Creando un Menú Desplegable Simple con Estilos CSS

Para crear un menú desplegable simple con estilos CSS solo necesitaremos usar el Administrador de Archivos del Panel de Control del Alojamiento Web (en este caso cPanel) y seguir estos pasos:

Paso 1. Crear un archivo HTML en blanco en la carpeta public_html

Lo primero es lo primero, creamos un archivo .HTML en blanco para nuestro menú desplegable dentro del Administrador de Archivos, dentro de la carpeta public_html.

Para ello pulsamos el + Archivo (1) de la parte superior izquierda. En la nueva ventana escribimos “menu.html (2)” y le damos a “Create new file (3)”.

Menú HTML Blanco

Ahora que hemos creado el archivo menu.html, es hora de genera la sintaxis del menú.

Paso 2. Añadir Código de Menú HTML

Aquí, crearemos un botón de menú simple que constará de un menú principal y cinco sub menús; pudiendo vincular cada sub menú a diferentes páginas de nuestro sitio web. Pulsamos el botón derecho sobre el archivo menu.html y seleccionamos la tercera opción “Edit” (No confundir con la cuarta HTML Edit).

Menú HTML Blanco Edit

Y añadimos la siguiente sintaxis:

<html>
<head>
</head>
<body>
<div class=»dropdown»>
<button class=»mainmenubtn»>Menu Principal</button>
<div class=»dropdown-child»>
<a href=»http://www.tudominio.info/pagina1.html»>Sub Menu 1</a>
<a href=»http://www.tudominio.info/pagina2.html»>Sub Menu 2</a>
<a href=»http://www.tudominio.info/pagina3.html»>Sub Menu 3</a>
<a href=»http://www.tudominio.info/pagina4.html»>Sub Menu 4</a>
<a href=»http://www.tudominio.info/pagina5.html»>Sub Menu 5</a>
</div>
</div>
</body>
</html>

Menú HTML Código

Como se puede comprobar hay una línea por cada sub menú, por lo que si quisiéramos añadir más tendríamos que añadir tantas líneas como más sub menús quisiéramos.

Lo importante es que las direcciones web pongamos las que correspondan a nuestra web en vez de www.tudominio.info/paginax.html que hemos puesto nosotros. Ya que al pinchar en esos sub menús s e nos redireccionará hacia las URL’s que pongamos.

Y así es como quedaría el menú sin etilos CSS, ni si quiera sería “desplegable”:

Menú HTML Código Resultado

Paso 3. Aplicar Estilos CSS para Crear el Efecto “Desplegable”

Como hemos indicado antes, el menú solo con su correspondiente código en HTML, pero NO ofrece el estilo «Desplegable». Para ello tendremos que rediseñar el código HTML poniendo las siguientes reglas CSS en la parte superior del código anterior, después de la etiqueta <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>

Poniendo así una parte del código puede resultar confuso ya que el código tiene que ir entre las etiquetas <head> y </head>. Como se puede comprobar abrimos unos estilos con <style> y </style> para hacer el efecto “desplegable”.

Mejor ponemos una imagen con todo el código incluido para salir de dudas:

Menú HTML Código CSS

Por cierto, los parámetros que hemos introducir en los estilos son de ejemplo. Si lo deseas tu puedes experimentar con los paramentos cambiando colores y tamaños según las necesidades de tu menú.

Una vez que hayamos terminado de diseñar nuestro menú, guardamos lo cambios en la parte superior derecha y listo. Este sería el resultado (si pinchamos en Menu Principal se desplegarían los Sub Menus):

Menú HTML Código CSS Resultado

Cómo Poner el Menú Desplegable Simple con Estilos CSS en TU Theme

Para mostrar el menú desplegable en tu theme tendrás que hacer un llamamiento al archivo menu.html usando la función readfile(‘menu.html’);

Lleva a cabo estos pasos en el Administrador de Archivos para conseguirlo:

1. En la carpeta public_html, dirígete a wp_content -> Themes. Luego, accede a la carpeta del themes que utilizas actualmente.

2. Ahora, abre el archivo header.php con la opción “Edit”, y pega la siguiente sintaxis en la parte inferior del archivo, justo debajo de la etiqueta </header>.

<?php
// do php stuff readfile(‘menu.html’);
?>

3. Por último, pulsa en Guardar Cambios en la parte superior derecha y listo.

Vuelve a recargar tu sitio web y verás como el menú desplegable se aplica al mismo.

Conclusión

Un menú desplegable simple con estilos CSS es esencial para mantener siempre bien ordenado nuestro sitio web.

La forma más sencilla de crearlo es utilizando reglas CSS en un archivo HTML. Además, desde el Administrador de archivos en su cPanel se puede hacer de forma muy sencilla, así como después ponerlo en el theme que estemos usando actualmente mediante la función PHP readfile(‘menu.html’);

Hosting WordPress SSD con LiteSpeed

Ahora, en Hostinet puedes contratar un Hosting WordPress SSD con LiteSpeed para incrementar el rendimiento de tu web hasta en un 300%. ¡Te garantizamos una IP española, así como el mejor soporte en tu idioma!

En Hostinet trabajamos desde hace más de 15 años con servidores ubicados en España (Madrid y Bilbao) para ofrecer a nuestros clientes las mejores prestaciones posibles.