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

Categorias: Diseño Web, General

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.

  • Hosting especializado en WordPress con discos SSDWordPress 1desde4´43€ / mes
  • Hosting especializado en WordPress con discos SSDWordPress 2desde5´60€ / mes
  • Hosting especializado en WordPress con discos SSDWordPress 3desde8´52€ / mes
  • Hosting especializado en WordPress con discos SSDWordPress 1desde4´43€/mes
  • Hosting especializado en WordPress con discos SSDWordPress 2desde5´60€/mes
  • Hosting especializado en WordPress con discos SSDWordPress 3desde8´52€/mes
    • Almacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Ideado para sacar el máximo partido a tu WordPress
    • Aumenta la velocidad de tu web + Info
    • Tras evaluación de nuestro equipo de migraciones
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM, .INFO, .NET, .ORG ó .EU.
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Ideado para sacar el máximo partido a tu WordPress
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Hosting específicamente preparado para sacar el máximo rendimiento a tu Wordpress
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM, .INFO, .NET, .ORG ó .EU.
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Aparcando un dominio secundario en el alojamiento de nuestro dominio principal conseguimos que ambos dominios resuelvan indistintamente con la misma página que tenemos colgada.
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Centro de datos en Madrid (España)
    • Opción de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Opción de contratación de certificados SSL. Se requiere Ip dedicada.Puedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUI
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el cPanel de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control cPanel.
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web. Soporte en español por personal de Hostinet.
    • Completa recopilación de tutoriales sobre Hosting, Dominios y Wordpress
    • 30 dias para probar tu servicio de Hosting y si no te convence el servicio... te devolvemos el dinero!!