Crea tu propio menú desplegable con submenús dentro! Todo eso con solo HTML y CSS sin la necesidad de lenguajes como javascript.
En este tutorial aprenderás como hacer un menú desplegable con HTML y CSS de una manera muy sencilla, con pocas lineas de código sin tener que utilizar javascript de por medio.
Como hacer un menú desplegable – Videotutorial
<html>
<head>
<title>Menu Desplegable</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
#header {
margin:auto;
width:500px;
font-family:Arial, Helvetica, sans-serif;
}
ul, ol {
list-style:none;
}
.nav > li {
float:left;
}
.nav li a {
background-color:#000;
color:#fff;
text-decoration:none;
padding:10px 12px;
display:block;
}
.nav li a:hover {
background-color:#434343;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0px;
}
</style>
</head>
<body>
<div id="header">
<ul class="nav">
<li><a href="">Inicio</a></li>
<li><a href="">Servicios</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Acerca de</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a></li>
</ul>
</li>
<li><a href="">Contacto</a></li>
</ul>
</div>
</body>
</html>
Demo: https://www.falconmasters.com/demos/menu-desplegable.html
Código en Github: https://github.com/falconmasters/tutoriales/blob/master/menu-desplegable.html
Preguntas Frecuentes
P: Como puedo centrar el menú horizontalmente?
Respuesta: Se supone que el menú que tienes debería estar centrado, ya que al id header ya le agregamos un ancho y un margen automático, en el extraño caso de que no tuvieras centrado tu menú debes seguir los siguientes pasos.
Es muy sencillo, lo único que tienes que hacer es tomar todo el código que se encuentre dentro de la etiqueta <ul class=»nav»> y encerrarlo en otra etiqueta, en este caso utilizare una etiqueta html5 llamada nav, (etiqueta que debí usar en el menú desde el principio, pero para no confundirlos no la puse) y a esta ultima etiqueta nav agregarle con CSS un ancho y un margen automático para que se centre, el código quedaría algo asi:
<html>
<head>
<title>Menu Desplegable</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
#header {
margin:auto;
width:500px;
font-family:Arial, Helvetica, sans-serif;
}
ul, ol {
list-style:none;
}
.nav {
width:500px; /*Le establecemos un ancho*/
margin:0 auto; /*Centramos automaticamente*/
}
.nav > li {
float:left;
}
.nav li a {
background-color:#000;
color:#fff;
text-decoration:none;
padding:10px 12px;
display:block;
}
.nav li a:hover {
background-color:#434343;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0px;
}
</style>
</head>
<body>
<div id="header">
<nav> <!-- Aqui estamos iniciando la nueva etiqueta nav -->
<ul class="nav">
<li><a href="">Inicio</a></li>
<li><a href="">Servicios</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Acerca de</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a></li>
</ul>
</li>
<li><a href="">Contacto</a></li>
</ul>
</nav><!-- Aqui estamos cerrando la nueva etiqueta nav -->
</div>
</body>
</html>
lol
Hola disculpa a mi no me sale así en horizontal a que se deberá?
Debería salirte en horizontal, me parece extraño, pero revisa bien tu código css, seguramente hay esta el problema, revisa sobre todo los float left
Seguramente el problema esta en los float, revisa bien tu código sobre todo el código css, si aun tienes problemas no dudes en decírmelo.
Tío nunca avía visto esa dedicación has respondido todos los comentarios te has ganado un subscriptor ando estudiando html y css pronto comenzare con javascript no se mucho pero si lo basico y un tin mas. la verdad no pondre mis errores aqui ya que se como analizar el codigo y buscar los errores o modificarlo por mi mismo pero gracias por el aporte.☼
Pues si paso un buen rato respondiendo, pero vale la pena ayudar lo mas que pueda :D
Muchas gracias a ti por ver mi contenido :D
Es genial funciona perfectamente.Mil gracias
El unico problema que tengo es que por mas que lo intento no puedo pegar el menu a la izquierda de la pantalla
Podrias decirme como arreglar esto?? gracias
No le pongas la propiedad de margin auto que le puse en el video.
una pregunta amigo…. tengo un problema no se me muestran lkos menus al pasr el raton encima???? que puede ser
El problema esta en los hovers entonces, revisa de la linea 48 a 50 este código, que no tengas errores:
.nav li:hover > ul { display:block; }Amigo aun no logro encontrar el error
te adjunto mi codigo a ver si me puedes orientar
Portada
body {
background-image: url(imagenes/fondo%20madera.gif);
}
* {padding:0px;
margin:0px;
}
#header{margin:auto;
width:auto;
font-family:»Comic Sans MS»;
}
ul, ol{
list-style:none;
}
.nav li a {
background:#FFBF00;
color:#045FB4;
text-decoration:none;
padding:10px 15px;
display:block;
}
.nav li a:hover{
background:#BDBDBD;
}
.nav > li{
float:left;
}
.nav li ul {
display:none;
position:absolute;
min-width:150px;
}
.nav li a:hover > ul {
display:block;
}
Útiles
Mi Escuela
Inspectoria
Actualiza tus Datos
Docentes
Menú
Apoderados
Correo STLS
Agenda Semanal
Puebas
Guías de Estudio
Talleres Escolares
Extensión Universiraria
Fotografías
Inicio
¿Quiénes Somos?
Proyecto Educativo
Nuestra Filosofía
Misíon
Academia
Visión
Admisión
Mateo-Net
Mineduc
Charlas Postulación 2014
Becas y Creditos 2014
Memorias Ayudadas Estudiantiles
Rebaja Cuota CAE
Contacto
Estimados Apoderados……. se les recuerda que el día viernes 02 de mayo se realizarán clases Normales
Sitio Optimizado para Mozilla Firefox
http://www.mavalnet.cl
Te recomiendo que tu código lo pongas aquí, es mas fácil que me lo muestres de mediante esa plataforma: http://codepen.io/pen/
El error esta en que en el codigo css no especificas donde esta el nav y el ul, el problema que tienes es que estas haciendo un sitio web con tablas, los sitios web no se hacen con tablas, eso no se hace desde hace 10 años, utiliza divs, es mucho mejor y no tendrias problemas como el que tienes ahora.
Excelente :P
Exelente aporte… bueno yo tengo una duda en el código ya que me aparece por debajo de un los submenús es decir se empalma arriba y no me deja ver los submenús.. agradecería una ayuda… XD
Te recomiendo que leas este post para que me muestres tu error y el código, asi me seria mas fácil.
https://www.falconmasters.com/tutoriales/compartir-codigo-codepen/
muchas gracias por el interés… te comparto mi solución el detalle esta en la posición absoluta, solo me hacia falta el z-index, solo para que se sobreponga el menú a los demás elementos… aun así gracias
De nada, gracias por compartir la solución a tu problema, Espero verte mas seguido por aquí en el blog :) Saludos
https://gist.github.com/15256015dced5153aaaf.git
Tengo un problema, el asterisco (*) me aparece inactivo en el editor de texto cuando lo escribo, o sea, no parece hacer una función, no cambia de color ni nada de eso. Los atributos que contiene asterisco (*) no cambian de color.
* {
margin:0px;
padding:0px;
}
No tiene porque cambiar de color necesariamente, depende del editor de código que tengas
sí, pero cuando actualizo el .html no me cambia nada en la vista previa del navegador. No será de .css ese atributo, y por qué a ti te funciona en el .html?
Si que es de CSS, pero en realidad no importa si cambia el color o no lo que importa es que elimine todos los margenes y paddings de todos los elementos, la magia no ocurre con el editor de código, ocurre con el interprete que es el navegador web.
Ahora le aplique los submenu a mi página, ¿Qué hago para hacer desplegable los menú de mi página ya hecha sin alterar el color y la posición?
Tienes que analizar la estructura html del menú de tu pagina y aplicarle estilos CSS, no es algo fácil y se te va a complicar si no entiendes el código css.
Me retracto, tienes razón con lo de no tiene que cambiar de color. Probé
tu código que tienes en GitHub y me funcionó, alguna otra cosa tengo
mal, jeje.
Ahora lo que me gustaría es aplicarle un menú desplegable a mi página web ya hecha, sin alterar el color y la posición de mi menú.
problemas amigo habré la pajina pedida ,dentro de un recuadro este código pero no deriva a ella gracias de todos modo algo funciona se ve en la pejina
como poner un url alos botones
Cambiando el # por la URL
hola que pena por mi poca imaginación pero tengo el mismo problema no se como redireccionar los botones podrias ayudarme porfa…. gracias ….. te felicito por todos los tutoriales son lo mejor que se puede encontrar en la web.
Para poner un link a los botones… es en las «» comillas, entre las dos comillas «»»» pones el URL (link)
a href=»url con el http de la web que quieres»>Nombre del botónNombre del botón</a
(con los final okey??)
la barra no me centra
Probaste lo que escribí en el post?
como puedo poner el menú desplegable en una sola linea por que no quiero que este en dos?? como lo puedo hacer??
No entiendo muy bien tu pregunta, a que te refieres?
como puedo poner el menu en otro lado de la pagina que no sea arriba?
Pones el código que utilizamos en la parte del codigo html que tu quieres que vaya.
Con el:
position:relative;
top:;
bottom:;
right:;
left:;
Y en cada hueco pones los pixeles o % que quieras.
PD: Cuesta de pillarle el tranquillo al relative xd
Hola Amigo hise todoLo que dijiste acerca de el menu del video: http://www.youtube.com/watch?v=oZa2Ut8u2S0 pero Hubo demasiados comandos que no funcionaban…..
Pero en fin ya lo arregle pero Podrias hacer un video de como al darle cilck A un
Nos lleve a otro fondo?
Como agregarías animación a su visibilidad ?
algún ejemplo (código)
Podrias intentarlo asi:
.nav li:hover > ul {
display:block;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
Ante todo, GRACIAS GRACIAS por compartir, enseñar y demostrar esa verdadera vocación solidaria.
Mi problema es con la animación. He adicionado el código anterior al estilo indicado, y no cambia nada. Estoy probando con Firefox 32 y Chrome 31.
¿Qué estaré haciendo mal u omitiendo? ¿Cómo resuelvo el problema?
Hola que tal, el error fue mio, el problema es que no podemos agregar animaciones a elementos con display block, es decir que no podemos animar que aparezca o desaparezca, eso se podria hacer con jquery, pero es completamente diferente, si quieres animaciones puedes intentar con este menu:
https://www.falconmasters.com/tutoriales/menu-desplegable-animaciones-css3/
Gracias nuevamente, lo revisaré …
Hola Carlos Arturo, me a servido mucho el tutorial,:) muchas gracias, pero tengo una duda , es algo que no agregaste en tu video, como agregarle los link al submenu osea, como ago para que cuando yo le di clik a submenu1 me envie a otra pagina, me podrias dar un ejemplo por favor?, Muchas gracias
Eso es con enlaces básicos de HTML, es decir cambiando el # y sustituyéndolo por tu pagina web dentro del href=»#» (incluyendo http://).
Te dejo un curso básico de HTML: https://www.falconmasters.com/cursos/curso-de-html-basico/curso-html-basico/
copiar y pegar el codigo HTML y el codigo CSS: https://www.facebook.com/nquessep/posts/829397587092766
¿Porqué cuando pongo mas de 4 items en el menu, me aparece abajo?
asi mira
El problema es que en header del estilo se encuentra a 500px aumenta el tamaño necesario para que se observe como tu lo quieres
En IE no me funciona =/
la barra no me ocupa todo el largo de la pantalla, pude ajustarlo un poco modificando el tamaño de la fuente, pero me sigue faltando un poco, como podria hacer esto ? o sea tengo un banner con fondo y la barra la quiero colocar debajo pero es como que el fondo negro ocupa segun lo que haya escrito
Hola, si el menú está ubicado dentro de un div con un ancho especifico entonces coloca width: 100%; a tu menú. Saludos!
¿Donde se encuentra eso?
crea otro estilo, asigna el ancho de 100%.
crea un div que encierre a todo el código correspondiente del menu.
en este caso podría ser:
.cabecera{
width:100%;
background:black;
position:fixed;
}
como le cambio el color al menu?
.nav li a {
background-color:#000;
cambia esto con hex
hola muy bueno el menú pero en ie no funciona me podrías ayudar gracias
Hola y gracias por esta información. He añadido este menu fijo flotante en mi web y el único problema es que la siguiente parte al afectar a todo me descoloca el resto de elementos de la web:
* {
margin:0px;
padding:0px;
}
Hay alguna modificación posible en tu código para evitar usar el *, o bien que no afecte al resto de la web si no solo a tu menú? Gracias y saludos!
Puedes omitirlo si quieres, o utilizar normalize.css
Excelente, muchas gracias por dedicar este tiempo a hacer tan buena explicación
Muy buenos y re fáciles de entender tus videos Carlos.. una consulta, si quiero que el menu aparezca en todas las paginas ¿tengo que repetir el codigo en todas o hay alguna alternativa?
Si, tendrias que repetir el código, hay varias alternativas, desde hacer algo mas complejo con PHP, o hacer archivos por cada elemento e importarlos también con PHP, mediante include();
Si quieres saber mas dime y hago un articulo.
Tengo conocimientos medios a básicos en php y me interesaría si tenes tiempo para explicar este método sería re útil.. Muchas gracias
Hola podrías decirme si puedo agregar este menú a una tabla en dreamweaver?
La verdad es que no estoy seguro, no recomiendo usar dreamweaver, y la verdad desconozco como se haga, lo que si se es que no deberías trabajar con tablas en dreamweaver.
https://www.falconmasters.com/general/6-razones-para-dejar-dreamweaver/
Saludos.
quisiera saber como hacer que el menu deplegable quede un poco mas centrado, que la posicion que ocupe en la pagina sea centrado. he hecho unas personalizaciones y al hacerla el menus se ve un poco a la izquierda y necesito que este al centro
Estimado muy buen tutorial me encanto pero me e dado cuenta que en mozilla no se desliza me podrias ayudar por favor, gracias.
Hola! Carlos Arturo, Podrias darme el Enlace o Link de descarga del «Aptana» para 32 bits?
(Gracias de antemano!)
Disculpa, como puedo hacer que el menu me abarque toda la pantalla?
En vez de ponerle 960px ponle un width del 100%
No hay un tutorial de como hacer un menu como el que tienes en tu pagina?
Si, aqui lo tienes:
https://www.falconmasters.com/web-design/tutorial-menu-de-navegacion-fijo/
en que parte esta ese 960 y en donde se pone el width 100%
basico xd
crea otro estilo, asigna el ancho de 100%.
crea un div que encierre a todo el código correspondiente del menu.
en este caso podría ser:
.cabecera{
width:100%;
background:black;
position:fixed;
} https://uploads.disquscdn.com/images/cbe91f1fd6729ca287a609e956ee222b58b9916cdd77c4d21f148eceefa0bdb5.png
Disculpa ,el .nav es el nombre que le asignemos al ul ?
En IE no me funciona
Excelente!
disculpa, para poner en otro doc la parte css? osea en el html mandar a llamar css? como lo hago :O
Menu Desplegable
* {
margin:0px;
padding:0px;
}
#header {
margin:auto;
width:500px;
font-family:Arial, Helvetica, sans-serif;
}
ul, ol {
list-style:none;
}
.nav > li {
float:left;
}
.nav li a {
background-color:#000;
color:#fff;
text-decoration:none;
padding:10px 12px;
display:block;
}
.nav li a:hover {
background-color:#434343;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0px;
}
Inicio
Servicios
Submenu1
Submenu2
Submenu3
Submenu4
Submenu1
Submenu2
Submenu3
Submenu4
Acerca de
Submenu1
Submenu2
Submenu3
Submenu4
Contacto
Como puedo hacer que sea un menu desplegable
Me encanta el menú pero me queda solo en la parte de arriba de mi blog y quiero sabe como moverlo de lugar. Gracias
hola una preguntota yo lo quiero de forma vertical
como le puedo hacer para que se despliegue el submenu de lado y no hacia abajo ?
es que ya le intente y no puedo :( no me sale
Hola, quiero hacer un menú desplegable pero necesito que quede en vertical a la izquierda, que tengo que hacer? por cierto excelentes tutoriales,
Hola Carlos :D Disculpa, la barra no se centra y ya agrege el código que escribiste en el post, me podrias sugerir algo, por favor. Gracias
cual es el programa que utilizan para programar ?
text sublime o bracket entre otros
como hacer para que cuando le des al menu salga la pagina que quieres
Muchísimas gracias, buscaba un tutorial justo como éste. Saludos!
como podría ponerle un sub-sub menú?, si me puedes sacar de la duda por favor!.
hola una pregunta me gustaria que mi sub menu tuviera otro submenu pero cuando lo coloco mira que me pasa
espero y me puedan ayudar
en la zona del estilo en la pestaña de «.nav li ul li ul» deves cambiar el numero de «right» al numero de pixeles que quieres de separacion, entre mas numeros negativos ayan mas lejos quedara, deves ir provando! DND
Hola, disculpe como puedo hacer para que el mismo menu del ejemplo se
vea hacia abajo y que sus enlaces se habran hacia arriba? Espero su
respuesta, gracias. Le adjunto la imagen para explicarme mejor.
Hola, me sirvio el tutorial, lo que no entiendo bien es como ponerlo al lado izquierdo…si me puedes decir como hacerlo te lo agradeceria mucho
como hago para que el submenu que sale de configuracion no se corra tanto a la derecha?
ponle un center y te quedara en el medio
Como un center? ami me pasa lo mismo… :(
¡Hola!
Excelente tutorial y gran aportación
Soy principiante en esto
Solo que tengo dos problemas que son los siguientes:
1.El menu no se centra completamente a pesar de que le agregue el id header que indicaste
2.Cuando quiero poner contenido este se pone a la derecha del menú y no abajo
Para lo del contenido modifique que el menú estuviera dentro de y mi contenido en pero no hubo resultado, también trate un salto de párrafo pero es lo mismo.
Si me pudieras ayudar te lo agradecería mucho.
Hola Carlos Arturo!!
Tu sitio y tus tutoriales estan geniales!!!
Felicidades por tus metas alcanzadas!!
Necesito de tu ayuda con el menu.
Busco la manera de implementarlo para wordpress, de tal manera que siga siendo multivel, y no he podido lograrlo, te agradecere mucho tu pronta ayuda.
hola, el menu desplegable del video yo lo hice en frontpage y segui paso x paso del tutorial anotando el codigo en frontpage y al terminarlo no me salio como en el video y nose que paso, si segui exactamente los pasos
Amigo, disculpa, que funcion tiene «margin: auto»?
una pregunta como puede escribir dentro del menu, osea dentro de contáctenos cuando haga clck me mande a la siguiente pagina donde este la inforacion
en el href ponle la direccion a donde quieres que se vaya
disculpa como puedo hacer mas grande la letra del texto del menu sin que se bajen
en #header, debajo de «font-family» pones:
font-size: 150%; (puedes poner el tamaño que quieras)
entre submenu y submenu me sale una barra sin cubrir como puedo cambiar eso?
hola, como podría hacer esta barra en vertical? … saludos
Hola arturo, sigo tus tutoriales desde youtube!
Queria preguntarte como hago para poner otros menus a los largo, por que agregue mas y me salen centrados y para abajo, yo quiero que se vayan para la derecha..
Saludos!!!
Exelente, solo le cambiare el tamaño :D
no se desplegar donde pudo ocurrir la falla?
Como hago para poner en el menu un buscador
¡¡¡¡?
Puse el menú horizontalmente del lado derecho de la pantalla y ahora quiero que al hacer clic aparezca del lado izquierdo sin salirse de la pagina ¿Me puedes decir como hacerle? Por Favor
Como se hace para que el menú pueda aparecer en varias páginas
Hola. como puedo darle el tamaño y posición de este menú con como el otro que hiciste con imagenes, quiero este estilo pero de ese tamaño porfavor ayudame
Excelente tutorial. Lo seguí y le realice algunas modificaciones visuales y me quedó bárbaro. Pero tengo un problema: trabajo con directorios, entonces el menú no es más que un enlace al directorio que me interesa, pero luego de que me muestra el html del directorio que seleccione, no se me despliega nuevamente el menú, ya no queda desplegable, me muestra el menú pero no los subitems, ¿qué podría estar ocurriendo?.
¡Hola! Llevo siguiendo tus tutoriales sobre html y css desde YouTube, eres en verdad grandioso y estoy enamorada de tu voz <3
Bueno, a lo que voy: diseñé mi propio menú desplegable con las etiquetas correspondientes y todo va perfecto cuando lo introduzco en la parte correspondiente del blog. Pero al momento de añadirle el css, me queda descuadrado y sin forma. Intenté hacerlo paso por paso, tal como lo explicas en tu video, dándole diseño a cada cosa de a poco, y lo logré, solo que hay un pequeño detalle: los submenús quedan empalmados con el menú principal y no se despliegan en vertical sino en horizontal. ¿Qué es lo que estoy haciendo mal?
De antemano, gracias si te diste el tiempo de contestar nwn
wow muchas gracias, eres la primer persona que me dice que le gusta mi voz.
Sobre tu problema, estas realizando el menu en blogspot o en que plataforma?
Si es así es muy probable que el error sea debido a que blogspot tambien agrega código CSS para sus plantillas, ese código css puede estar afectando el menu.
Sobre el empalmado pueden ser varias cosas también, incluyendo que a lo mejor algunos estilos del blog estén perjudicando alguna propiedad como el display inline block
Hay algún link en donde pueda ver el menu? asi seria mas fácil revisar el problema.
¡Pude hacerlo!
Realmente, no tengo mucha idea sobre cuál fue el problema xD, si gustas checar el código fuente de lo que hice aquí dejo el link http://idjhamanteur.blogspot.mx/, es un blog en estado de gestación :)
Muchas gracias por contestarme, en verdad he aprendido bastante con tus tutoriales :D
Excelente!
Me alegra que te guste mi contenido. Saludos
Disculpa deberías De enseñarnos a meterle el contenido a cada factor del menú osea, que tal contenido valla en inicio, el otro en categorías y así y también para los sub menus
¿Cómo hago para que el menú abarque todo lo ancho de la pantalla!? (vi que respondiste en comentarios anteriores, pero no hallo el atributo al que debe cambiarse el valor).
Amigo para que abarque la pantalla donde dice (#header) comenzando el codigo HTML. en width:500px; … Hay cambia el 500px por 100%.
pues yo he hecho eso y no me ocupa todo, que mas puede fallar?
Hola, hace poco vi tus tutoriales y son geniales, estoy practicando la creación de menú para una página que estoy diseñando, he copiado el código practicamente igual pero el submenú aparece encaramado sobre el menú de navegación. ¿Cómo podría arreglarlo? Te adjunto una imagen indicandole el error.
De antemano muchas gracias
ohhhhh gracias amigo me ayudo mucho a hacer el menu de mi pagina….. aqui te dejo unas imagenes =D gracias sigue asi hasta le pude agregar un boton en el primer menu
amigo como hiciste para poner el menu vertical?.
oye disculpa ocupo de tu ayuda, tengo problemas con la barra de menú y el slide show, chocan entre ellos y no se muestra primero la barra de menú
Hola, intenta colocar la propiedad z-index:1000; al selector ul li ul para que la capa quede sobre todo lo demás. Luego me cuentas si eso te funciona, Saludos!
muy buena aportación, yo también tenia ese problema y lo arregle con z-index, saludos.
Hola, cómo insertaste la imagen superior en el menú? hay posibilidad de que se repita en todas las páginas? Antes lo hacía con Frames pero daban muchos problemas con las resoluciones en distintos navegadores.
Gracias
Gran Tutorial Carlos Arturo!
Como seria para poner el menu vertical?
Pudiste resolverlo?
Hola para poner el menu en la izquierda y al desplegarlo se despliegue a la derecha, como seria?
Hola Falcon Master, hay alguna forma de hacer los menus desplegables solo en html
Hola Falcon, me encantaría si me dijeras que tengo que saber para hacer un menú despegable, si, si sigo lo del tutorial pero quiero experimentar un poco mas yo solo, la única razón por la que no lo hago es porque aun no entiendo bien como hacer el menú jaja y pues como sabes jaja uno aprende un poquito mas con experiencia misma, pero pues creo que si necesito saber mas o menos algo para poder hacer este menú y sea de mayor facilidad de dominar para mi.
;) y en serio muchas gracias contigo aprendí demasiado, desde mis 12 años (creo) miro algunos de tus vídeos, gracias a ti y pues ahora tengo 16 apenas entrando a la prepa y pues de nuevo, gracias a ti decidí tomar programación para aprender un poquito de javascript jaja lo bueno es que ya entrare con un dominio en este tema :)
Gracias!
como puedo hacer un menú desplegable y pegajoso o sticky menú desplegable??por favor !!
Yo tengo un problema, bueno el menú aparece bien esta perfecto pero como yo estoy utilizando Macromedia Dreamweaver 8 y estoy utilizando capas para poner la información, el problema es que la capa cubre el menú cuando se despliega y no se como hacer para corregirlo, no se si me podrían ayudar!
como puedo agregar una informacion a cada una de las barritas de menu me explico digamos que tengo una pestaña que dice politica al darle clic sobre ella me sale la informacion sobre la politica pero sin salirme de esa misma pagina
se necesitaria un enlace local
simplemente al elemento html que tiene lo de politica le agregas el identificador politica ejemplo:
contenido de la seccion de politica
y el enlace lo haces de la siguiente forma:
ir a la seccion de politica
el simbolo «#» es el que indica que se debe desplazar la ventana del navegador hasta la posicion del elemento con el identificador (id) politica
muy bueno el tutorial, pero hay un problemilla a ver si me ayudas, todo sistema tiene diversos tipos de usuario y no todos pueden ver todos los item del menu, como se hace para bloquear un item en especifico, segun el usuario. Por ejemplo el usuario administrador entra a todas las opciones, pero el usuario invitado, solo puede tener acceso a menu de consulta.
facil si estas con usuarios que tienen niveles de acceso debes tener una referencia a que nivel de acceso tienen, me imagino que debes estar trabajando en php, guarda en una variable de sesion ($_SESSION) el nivel de acceso, ahora si al menu le vamos a incluir un detalle en php para incluir los submenu que solo a el le interesan ejemplo:
elemento de todos los usuarios
elemento de todos los usuarios
elemento para el administrador
tengo un pregunta como hago con los select para que los lea con mvc
El 9 de julio de 2016, 11:45, Disqus escribió:
Como hago para que cuando el menú se desplegué se vea encima de una caja que esta debajo del menú???
cambiale la propiedad z-index al elemento con identificador header colocale 200, con eso se superpondra a la mayoria de elementos
Yo también tengo ese problema, vamos a ver, pones «z-index:200px;» en cual de los elementos ???
hola! disculpa que te moleste. el tutorial esta muy bueno pero no logro que funcionen los submenus.
hice un slideshow con tu tutorial y anduvo barbaro y ahora le agrego la botonera pero no me funcionan los submenus. quedan todos juntos en 3 lineas. no se que hice mal…. gracias por tu ayuda!!
hola!! ya encontre que pasaba, habia cerrado
pero ahora tengo otro problema no puedo centrar el menu
hice todo (creo obvio) pero sigue en el margen izquierdo grrrrrrrrrrrrr
no se que mas hacer …
tengo un problema la barra no me abarca toda la pagina a pesar de que le puse width=100%
tendria que ver el hecho de que use notepad++?
ayuda porfavor
Nop. Lo que pasa es que el width lo pones en un lugar que no toca. Si lo pruebas en el otro width que hay en el documento css seguro que funciona. Ánimo!!
https://uploads.disquscdn.com/images/cbe91f1fd6729ca287a609e956ee222b58b9916cdd77c4d21f148eceefa0bdb5.png
crea otro estilo, asigna el ancho de 100%.
crea un div que encierre a todo el código correspondiente del menu.
en este caso podría ser:
.cabecera{
width:100%;
background:black;
position:fixed;
}
en que parte del codigo se colocaria segun el tutorial?
hola, tus tutoriales son muy buenos pero me encontré con un detalle. estoy usando una pagina con frame y puse el menú en un frame un poco angosto y al desplegar los submenus se ocultan detrás del frame que se encuentra abajo, no se si existe una forma de que los submenus no respeten el limite del frame y se muestren por encima.
vas a permanecer con ese problema, ya que el iframe es otra pagina, entonces cuando se despliegue el menu se va a desplegar en el espacio que se ha reservado para esa pagina que estas visualizando en el iframe, este menu tienes que hacerlo necesariamente dentro de la pagina principal
No me funciona, ya copi’e el codigo igual y ocupa toda la pantalla, no se oculta, pero el demo si
Yo hice ese menu pero quisiera saber, como le doy accion, por ejemplo en vez de mandarme a un url me mande a una seccion que este en el mismo archivo ya le intente con div pero aun asi no me manda a nada al contrario
primero que nada debes colocarle un identificador (id) a la seccion de la pagina a la que deseas ir ejemplo contenido de la seccion tambien se lo puedes agregar a un parrafo, a un encabezado, a cualquier elemento html, luego haces lo siguiente con el enlace
ir a la seccion de deportes
el simbolo «#» es el que le dice al enlace que se desplace a un elemento con el identificador que sigue despues de él, en este ejemplo seria el elemento con identificador deportes
buenas tengo una consulta, porque al crear la de menú me queda el texto a un lado de la misma barra como lo puedo solucionar.
gracias
coomo se pone CONTENIDO en alguna categoría ?
http://www.hotelcapital.com.co/ como se hace el menu del link, el menu de abajo que se despliega al bajar ?
Como añado otra columna?
Gracias
Como puedo hacer para que el mismo menú este disponible para todas las paginas, asi que si yo modifico el archivo de menú este se vea reflejado en todas las paginas.
Eddy abre un archivo con extension .php y pones todos los codigos del header y luego pon esto dentro del html, acuerdate de poner la pagina web en extension php
esto lo pones donde va el menu y asi lo tienes en todas las paginas
Muchas gracias ya lo realice funciono perfecto.
Hola Carlos Arturo tengo una pagina web en la que hay archivos pdf pero estos no se pueden visualizar en dispositivos moviles, mucho agredecere me puedas ayudar. gracias
(el problema solo es en estos dispositivos)
pregunta si quiero poner para q el menu despegabre al selecsionar una de las opsione me mande a otra pagina como ago por que pongo lo que medeja cambiar de pajina pero me aparese debajo del menu no tiene chiste como lo ago
Saludos falconmasters, desde San juan Argentina. Desde ya muchas gracias por tus aportes , me ha servido muchísimo.
es esta oportunidad queria consultarte como hacer mi propia tools bar. en la parte inferior de mi web en lo posible en boostrap!!!! :) . Salu2
como le hago para agregar contenido a un enlace del menu??
nop no me sale nada de css en crhome.. solo si pego el cod y lo copio xD, lo hice como el video y solo corrio html..
Asegurate de que el archivo css esté bien escrito.
Hola Falcon Gusto en saludarte , y muchas gracias por tus tutos en Youtube , me han ayudado mucho ,, tengo este problema , me podrias ayudar o aconcejar
Hola Falcon, muchísimas gracias por el tutorial, es justo lo que estaba buscando y he conseguido crear el menú sin problemas. Pero no puedo insertarlo en mi web, me falta el código head y no lo encuentro por ningún lado. Disculpa si la pregunta es demasiado obvia, muchas gracias.
Hola que tal :D
Tengo una pagina en desarrollo donde despues de poner el menu desplegable ya no aceptaba un archivo de estilos.css, ayuda :(
Prueba a quitar el link rel=»stylesheet» y todo eso y en el head pon el documento de abajo:
* {
margin:0px;
padding:0px;
}
#header {
margin:auto;
width:500px;
font-family:Arial, Helvetica, sans-serif;
}
ul, ol {
list-style:none;
}
.nav {
width:500px; /*Le establecemos un ancho*/
margin:0 auto; /*Centramos automaticamente*/
}
.nav > li {
float:left;
}
.nav li a {
background-color:#000;
color:#fff;
text-decoration:none;
padding:10px 12px;
display:block;
}
.nav li a:hover {
background-color:#434343;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0px;
}
Hola, buenas noches!! felicidades por las aportaciones que haces, te sigo tambien en Udemy, gracias por los cursos que pones a disposición de nosotros.
Una duda tengo con este menú, y es que en pantallas Touch como tablet´s o dispositivos móviles no funciona muy bien el menú, ¿hay alguna etiqueta que le pueda agregar para que se pueda desplegar en estos dispositivos?
Gracias nuevamente.
Hola que tal, muchas gracias por el apoyo.
Ese menú no es responsive, por lo que no se adapta a dispositivos moviles.
Pero aquí tienes 2 que si lo hacen:
https://www.falconmasters.com/web-design/menu-de-navegacion-responsive/
https://www.falconmasters.com/web-design/menu-desplegable-adaptable-dispositivos-moviles/
Como hacer ese tipo de menú desplegable en adobe reflow???
Hola amigo, como podría hacer un menú que al darle clic a una primera opción se despliegue solo esa acción, pero al darle clic a otra opción, la anterior se esconda y así.
Muy Buen video
Oye como podria hacer para que de la barra al precionarle me apareciera un div que funcione como un formulario?
Como puedo hacer el mismo menú desplegable pero vertical?
no sé por qué, pero los submenús me salen a la derecha
hola, como estas!! te queria preguntar por el tema del icono que aparece en la pestaña que tiene que ser el logo de la pagina y a mi no me aparece nada y eso que ya transforme el archivo a .ico de 16 x 16 px
hola a todos, me pueden decir como le pongo un background-color al submenu?
Hola, es un post genial. Sin embargo, me surge este problema: https://uploads.disquscdn.com/images/14531700c90f2ef63b9ed9c2ca04fad38456f5f72b2882d0dba95019b44c8c31.png
¿Cómo puedo solucionarlo?
Deseo que el menu desplegable haga un llamado a una etiqueta por ejemplo en la misma pagina y no a un url, como le hago?. Gracias
una duda podria hacer mas ancho el menu desplegable a modo de poner mas columnas en uno mismo
si si es posible
Muy bueno, me sirvo, pero me surgio una duda, como hago que para que por ejemplo, tengo un menu solamente de inicio, catalogo y contacto, y que cuando este en la pagina de catalogo, el menu, ese texto que dice «catalogo» se maque con un color distinto al resto, y pase asi con cada uno de los menus??
*el de la imagen esta echo por una plantilla de wordpress, quiero que salga algo asi* https://uploads.disquscdn.com/images/99b1ff04c4e4045c549143d4944588cb0161257d2d2f139094e32b7b6dcf16be.png
como separo los enlaces quiero que me salgan separados y horizontales
Hola soy Josias necesito que me ayudes, es por que no me sale mi barra de navegación para mi aplicación web
una pregunta tengo un slide y no salen los sub menus completamente, se quedan detras de el slide, como puedo hacer para que salgan frente a el? agradezco su respuesta y aporte.
es sencillo es por jerarquia pon el slide antes del menu y ya
como puede poner la tabla centrada, no me deja, gracias :)
hola le puse el menu pero cuando pongo contenido me aparece arriba
con el menu como puedo arreglar esto o como dividir contenido del menu
hola yo agregue 8 campos pero tres me los pone abajo y quiero que queden todos en un renglon