Aprende a crear un menú de navegación desplegable increíble!. Un menú de navegación avanzado con solo HTML y CSS
Muchas veces se nos presenta el problema de querer almacenar una gran lista de links que queremos mostrar en un menú de navegación, ya sea porque todos los links son importantes, o porque queremos guiar mas fácil a los usuarios dentro del sitio, etc. Sea cual sea la razón en ocasiones no podemos darnos el lujo de crear un simple menú de navegación desplegable, necesitamos algo mas avanzado, un menú horizontal que nos permita almacenar todos esos enlaces y distribuirlos de la mejor manera tanto para nosotros como para los usuarios.
Yo he hecho un menú de navegación que resuelve estos problemas, lo único que necesitamos es de HTML y CSS, no vamos a utilizar para nada ni Javascript, Jquery ni mucho menos PHP, todo con una estructura de HTML muy simple y efectiva.
Tutorial Como hacer un menú desplegable avanzado con HTML y CSS
Código HTML
<nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Servicios</a> <div> <ul> <li class="titulo"><a href="">Categoria #1</a></li> <li><a href="">Categoria #2</a></li> <li><a href="">Categoria #3</a></li> <li><a href="">Categoria #4</a></li> <li><a href="">Categoria #5</a></li> </ul> <ul> <li class="titulo azul"><a href="">Categoria #1</a></li> <li><a href="">Categoria #2</a></li> <li><a href="">Categoria #3</a></li> <li><a href="">Categoria #4</a></li> <li><a href="">Categoria #5</a></li> </ul> <ul> <li class="titulo verde"><a href="">Categoria #1</a></li> <li><a href="">Categoria #2</a></li> <li><a href="">Categoria #3</a></li> <li><a href="">Categoria #4</a></li> <li><a href="">Categoria #5</a></li> </ul> <ul> <li class="titulo rojo"><a href="">Categoria #1</a></li> <li><a href="">Categoria #2</a></li> <li><a href="">Categoria #3</a></li> <li><a href="">Categoria #4</a></li> <li><a href="">Categoria #5</a></li> </ul> <ul> <li class="titulo naranja"><a href="">Categoria #1</a></li> <li><a href="">Categoria #2</a></li> <li><a href="">Categoria #3</a></li> <li><a href="">Categoria #4</a></li> <li><a href="">Categoria #5</a></li> </ul> </div> </li> <li><a href="#">Productos</a></li> <li><a href="#">Acerca de</a></li> <li><a href="#">Contacto</a></li> </ul> </nav>
Código CSS
body {
background:#e6e6e6;
}
header {
width:90%;
max-width:1000px;
margin:auto;
}
nav {
background:#528fd5;
margin-top:20px;
position: relative;
}
nav ul {
list-style:none;
padding:0;
margin:0;
overflow:hidden;
}
nav > ul > li {
float:left;
}
nav ul li a {
text-decoration:none;
color:#fff;
display:block;
padding:10px 20px;
}
nav ul li a:hover {
background:#3669a3;
}
nav > ul > li:hover div {
display:table;
}
/*Submenu*/
nav ul li div {
width:1000px;
position: absolute;
left:0;
background:#ccc;
box-sizing:border-box;
display:none;
}
nav ul li div ul{
width:20%;
display:table-cell;
border-right:1px solid rgba(255,255,255,.5);
box-sizing:border-box;
}
nav ul li div ul:last-child {
border:none;
}
nav ul li div ul .titulo {
background:#000;
color:#fff;
}
nav ul li div ul .titulo a {
color:#fff;
padding:10px 20px;
}
.titulo.azul {background:#3498db;}
.titulo.verde{background:#27ae60;}
.titulo.naranja {background:#e67e22;}
.titulo.rojo {background:#c0392b; color:#000;}
nav ul li div ul .titulo a:hover {
background:none;
}
nav ul li div ul li a {
color:#000;
}
nav ul li div ul li a:hover {
color:#fff;
}
Live Demo: https://www.falconmasters.com/demos/menu_avanzado
¡Chevere!, gracias por el aporte.
Muchas gracias a ti por ver leer el articulo, espero verte por aquí luego :D Saludos
Muy buenos tus vídeos . Buena explicación .
Sigue asi Y()
Muchas gracias a ti por ver mi contenido, espero que te agrade y te pueda ver mas delante por aquí en otros articulos :)
Por favor Carlos donde pongo el codigo html y el ccs. Gracias
A que te refieres a donde poner el codigo ?
Hola de nuevo y perdona el fastidio, mira solo quiero agregar unas subpestañas a las paginas que ya tengo editadas – desde donde hasta donde las coloco? Gracias
No entiendo muy bien que quieres hacer, si pudieras explicarme mejor
Hola, quiero decir en plantilla, html o en diseño gadget y en antes de skin o donde? Estoy hablando de un blog Gracias
Supongo que dices un blog en blogger, el proceso para hacer este menu en blogger es diferente, aunque puedas insertar tu código css la estructura html es diferente. La verdad nunca he usado blogger para editar css.
Bueno Carlos gracias de todas formas por contestar
hola, agregue pestañas mas pero tengo el problema que se ven mas corto, me pueden ayudar a solucionarlo. :(
Recuerda esta parte y el % que le pusimos, en tu caso tienes 7 elementos, por lo cual deberias cambiar el 20% por 14.28% intentale asi.
nav ul li div ul{
width:14.28%;
display:table-cell;
border-right:1px solid rgba(255,255,255,.5);
box-sizing:border-box;
}
Gracias por el post Carlos Arturo, sigue asi :) me soluciono muchas dudas
Genial! me alegra que te haya servido y sobre todo que hayas aprendido, nos vemos pronto por otros artículos. Saludos
[…] Como hacer un menú de navegación desplegable (avanzado): https://www.falconmasters.com/tutoriales/menu-desplegable-avanzado/ […]
Muy buen post! Enhorabuena Carlos Arturo! Realmente útil :)
Muchas gracias, me alegro que te haya servido :D
Hola Carlos Arturo, tengo una pregunta para que el submenu se desplase con transición que tendría que hacer?
Tendrias que agregar un transition
Seria en el Div o en el Li ?, por que agregue la transición en en el div y en el Li pero no me funciona
Muy bueno el tutorial! me sirvio mucho! Gracias por compartirlo Carlos. Saludos.
Muchas gracias a ti, me alegra que te haya servido
Hola, tengo otra lista ya en la pagina, ¿como le puedo hacer para que los efectos no le afecten a la que ya tenia? Gracias.
Tienes que ponerles «id» y «class» distintos a los dos y poner los respectivos efectos en CSS con sus «id» y «class» a cada uno.
Estimado. Es posible integrar estos submenus a la plantilla de wordpress que presentaste en tu curso?
Si es posible, solo que cambia un poco la estructura html y css, porque wordpress te agrega clases diferentes, es algo complicado al principio pero después de un rato de trabajo se puede.
Gracias por tu respuesta.
Saludos
Hola amigo. Tengo un problema, Estoy creando mi pagina web el cual tiene header, menú y slider. el problema es que al pasar el mouse por el menú para que aparezca el submenu, el imagen del slider tapa el submenu. ¿Que podria hacer en este caso? Aqui he colocado el imagen del problema.
Hola que tal, la solución esta con la propiedad z-index, aquí tienes un tutorial.
https://www.falconmasters.com/css/propiedad-z-index/
hola disculpa pero quisiera saber como isiste para que tu menu este pegado al navegador por los costados
*{ margin: 0px; padding: 0px; }
{float:up;
width:100%;}
Buenos días,
Soy totalmente inexperta en programación. Estamos intentando hacer una web a partir de BK7 y cuando copio el código, no reconoce nada. No sé si debo hacer un copiar-pegar directo del código html o del css, o de ambos, uno encima del otro… Por favor, podría decirme si es tan sencillo como copiar-pegar y luego modificar los # y el diseño o si debo hacer algo más? Es compatible este código con BK7?
Muchas gracias y un saludo
como puedo hacer para que el menu y el swf esten pegados a los bordes de la web y no se vea espacios blancos y ajustable cuando se maximise o redusca la ventano.
Carlos, son excelentes tus tutoriales y este no es la excepción… pero tengo 3 inquietudes… ► una es preguntarte como hacer para que el sub menú quede igualmente centrado asi hayan 3, 4, 5 o las columnas que sean… ► dos, a este menú como podríamos colocarle otro tipo de letra… ya sea una para el menú principal y otra para el sub menú y por ultimo ► tres, como podría aplicar este menú a un blog de blogger? ◄ de antemano muchas gracias porque con tus tutoriales cada día aprendo cosas nuevas!
Gracias es lo que estaba buscando para mi clase de html, solucionastes mis dudas eres grande maestro!!!!!1
Hola,Amigo tengo una pregunta podris subir un tutorial de como poner un video o musica de fondo Plz :)
Tengo en mi página dos iframe uno arriba que despliega el menú y el otro iframe debajo de este para que ahí se ejecuten las diferentes opciones. El problema que tengo es que en el iframe del menú las opciones al posicionar el cursor, quedan escondidas en ese iframe y solo bajando con el scroll se pueden visualizar. Algún truco que pudieran darme para que sí sean visibles sobre la parte del segundo iframe. Lo que no quiero es que las personas abandonen la página al ejecutar cada una de las opciones del menú. Gracias por el apoyo que puedan darme.
Hola Falcon.
Deseo realizar este menú pero que sea adaptable a móviles. Como puedo lograr eso?
Disculpa si quiero agregar categorias a producto,acerca de y contacto como lo puedo hacer??
Hola, Gracias por el post Carlos Arturo, espero me puedas ayudar en tu ejemplo relizas el sub menu con una tabla.
quisiera ver si se puede hacer el sub menu de otra forma ya que agrego un submenu con una sola columna y el submenu se va a la izquierda pero quiero ver si en lugar de que se vaya hasta la izquierda se pusiera debajo del menu seleccionado.
saludos
Falcon, podrias ayudarme quisiera tener esa suave transicion que tiene ese menu desplegable y ademas de los espaciados que hay entre sus secciones cuando hay un efecto hover. de esta pagina por favor :http://www.datacont.com/ (me refiero a su menu)
hola muy buen tutorial me a ayudado mucho, tengo una duda al poner un submenu en donde dice acerca de no me sale como el de servicios en mi caso lo llame musica y el de acerca de no me pueden ayudar gracias https://uploads.disquscdn.com/images/5774d0d59b7ffe7decc3d07342728dd1d98346c0736ce0bb9a63dabb0cb2bdac.png
como puedo aser q al seleccionar una de las categorias me redireccione a otra pagina q ya ise
Tengo una pegunta
Como se llama la aplicacion que estas usando para hacer el menu?
Buen tutorial, felicitaciones
oye quiero hacer un menu dinamico con menu desplegable y hize el menu intente hacer el menu desplegable pero no deja me ayudarias?
Buenas tardes, quisiera saber si este código lo puedo poner tal cual en Dreamweaver?