En este tutorial aprenderemos a hacer un sencillo menú desplegable con soporte para infinitos niveles usando HTML y CSS.
Estructura HTML
Trabajaremos con una lista con clase de «nav», que almacenara los items del menú:
<!DOCTYPE HTML>
<html>
<head>
<title>Menu desplegable usando solo CSS</title>
<link rel="stylesheet" href="estilos.css" />
</head>
<body>
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">Servicios</a></li>
<li><a href="">Acerca</a></li>
<li><a href="">Contacto</a></li>
</ul>
</body>
</html>
Los submenús se desplegaran cuando el usuario pase el cursor, estos iran como listas dentro de listas(ul > li > ul). Este ejemplo funcionara con cualquier cantidad de submenús, eso quiere decir que puedes incluir los niveles de menús que quieras, en este caso tendremos 3 niveles:
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">Servicios</a>
<ul>
<li><a href="">Diseno grafico</a></li>
<li><a href="">Diseno web</a>
<ul>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 3</a></li>
<li><a href="">Submenu 4</a></li>
<li><a href="">Submenu 5</a></li>
</ul>
</li>
<li><a href="">Marketing</a>
<ul>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 3</a>
<ul>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 3</a></li>
<li><a href="">Submenu 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">SEO</a></li>
</ul>
</li>
<li><a href="">Acerca</a>
<ul>
<li><a href="">Historia</a></li>
<li><a href="">Mision</a></li>
<li><a href="">Vision</a></li>
</ul>
</li>
<li><a href="">Contacto</a></li>
</ul>
Código CSS
Empezaremos con un reset basico y algo de decoración para el menu:
* {
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
.nav > li {
float:left;
}
.nav li a {
background:#0c9ba0;
color:#FFF;
display:block;
border:1px solid;
padding:10px 12px;
}
.nav li a:hover {
background:#0fbfc6;
}
En la linea 9, se especifica que solo los li que sean descendientes directos del primer ul tengan float: left, esto es para que solo el menu principal sea horizontal y los submenús se mantengan en vertical:
Por defecto todos los submenús no serán visibles, los ocultaremos usando display: none.
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
Todos los submenús tendrán un ancho minimo de 140px para que no se vean desiguales y llevaran position: absolute para que no afecten el ancho del menu principal.
Proseguimos con la parte que hara que se muestre el submenu oculto:
.nav li:hover > ul {
display:block;
}
En este código le estamos indicando que cuando el cursor pase sobre cualquier li su descendiente ul se muestre(display: block).
El problema ahora es que los submenús de segundo nivel en adelante se están mostrando pero no como deberían:
Lo que tenemos que hacer es que estos se muestren a la derecha de su respectivo ancestro li:
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0;
}
Los submenús de segundo nivel tendran right: -140px, para empujarlos hacia la derecha, es importante notar que este valor es el mismo que el que definimos anteriormente como ancho mínimo, y ademas tendra top: 0 esto es para que se posicione al mismo nivel que su ancestro li que tiene position: relative.
Esto afectara todos los submenús de segundo nivel en adelante:
Añadir un indicador a los elementos con submenu
Investigando por internet encontre la forma de anadir un indicador a los elementos que contengan submenus sin hacer uso de JS y aqui lo comparto:
Lo primero es añadir el elemento que hará de indicador al lado de cada enlace del menu, en este caso estamos usando una flechita (si prefieres usar una imagen tambien funcionara) su código HTML es ▼:
<ul class="nav">
<li>
<a href="#">Home<span class="flecha">▼</span></a>
</li>
<li>
<a href="#">Servicios<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Diseno grafico<span class="flecha">▼</span></a></li>
<li>
<a href="#">Diseno web<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Submenu 1<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 2<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 3<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 4<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 5<span class="flecha">▼</span></a></li>
</ul>
</li>
<li>
<a href="#">Marketing<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Submenu 1<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 2<span class="flecha">▼</span></a></li>
<li>
<a href="#">Submenu 3<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Submenu 1<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 2<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 3<span class="flecha">▼</span></a></li>
<li><a href="#">Submenu 4<span class="flecha">▼</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">SEO<span class="flecha">▼</span></a></li>
</ul>
</li>
<li>
<a href="#">Acerca<span class="flecha">▼</span></a>
<ul>
<li><a href="#">Historia<span class="flecha">▼</span></a></li>
<li><a href="#">Mision<span class="flecha">▼</span></a></li>
<li><a href="#">Vision<span class="flecha">▼</span></a></li>
</ul>
</li>
<li>
<a href="#">Contacto<span class="flecha">▼</span></a>
</li>
</ul>
Ahora lo que haremos sera definir que por defecto esta flecha este oculta en todos los elementos del menu:
.nav li .flecha{
font-size: 9px;
padding-left: 6px;
display: none;
}
Tambien le reduci el tamano de la fuente y lo aleje un poco del texto para que se vea bien.
La parte esencial de esto es la siguiente: vamos a usar la psuedo-clase CSS3 :not en combinación con :last-child para excluir a todos los elementos del menu que no contengan submenus (todos los <a> que no sean :last-child) y solo afectar a los span.flecha de los que si:
.nav li a:not(:last-child) .flecha {
display: inline;
}
El resultado:
Pueden leer mas acerca de este selector en este enlace, lamentablemente solo es soportado por los ultimos navegadores (incluyendo IE9).
Conclusión
Cabe notar que este ejemplo tiene ciertas limitaciones como la relantizar la desaparición del submenu cuando el cursor deja el elemento, sin embargo es una buena alternativa para cuando necesitamos crear un menu desplegable lo mas rapido posible.
Amadeo Govoni dice
Hola Josue
Da error el link de descarga…..! de todas maneras está bueno el tuto!!!!!
Saludos
Josue Ochoa dice
Hola Amadeo, gracias por la observación, ya lo arregle 🙂
Aroa dice
Hola, como puedo ponerlo en la mitad de la página?
javier medrano dice
Excelente, muy claro, gracias
Javier dice
Buen tuto Gracias ! 😀
Feis dice
Llegué para quedarme, por medio de T!, encantado de la usabilidad del sitio, muy productivo, voy a hondar mucho mas sobre los tutoriales, los veo muy completos y dinámicos 😉
Saludos!
Rumpeltzinky dice
Sencillamente genial.
Liana dice
Necesito hacer un menú horizontal con soporte para submenú que funcione correctamente en Internet Explorer 8, Firefox 9.0.1 y Google Chrome. Por favor ayuda
Josue Ochoa dice
Hola Liana, utiliza este plugin de jQuery http://users.tpg.com.au/j_birch/plugins/superfish/, espero te sirva.
m3m0 dice
oye muy bueno solo que le falto un poco mas de comentarios pero es muy funcional
MARCOS dice
Este menu lo estey poniendo en un pagina que tiene dos (marco)freme un de alto de 30 y el otro de alto 70 porciento,
en el de 30 estoy poniendo el menu y en el 70 pociento para que se ejecuten las paginas de las opciones del menu.
Pero el meno que esta en el (marco)frame de 30 de alto esta el menu pero este no se muestran todos los submenu.
Claro que podría aumentar el alto del marco(frame) del menu pero esto quedaría totalmente separado del otro marco(frame) y quedaría feo.
Quiero ayuda para arreglar esta dificultad gracias.
Josue Ochoa dice
No te entiendo muy bien, pasame tu pagina para verla mejor, de todos modos no te recomiendo usar iframes para estructurar una pagina.
carlos A. dice
Muy bueno el tuto,Muchisimas gracias por compartir su conocimiento.
¡ Saludos !
Manolo dice
Hola Buen ejemplo sencillo como puedo hacer para centrarlo.
Josue Ochoa dice
Puedes ponerlo dentro de un
o usarmargin: 0 auto;
.Edwin dice
Lo maximo.
Estare viendo el resto de ejemplos
Patricio dice
Tengo un problema con un menu css, justo abajo de este menu tengo una imagen jquery tipo slider y no me puestra el menu sobre este jquery, como lo puedo solucionar. De igual forma probare con este menu haber si me resulta.
Te agradecere una respuesta, un abrazo desde Chile.
Josue Ochoa dice
Se que problema tienes, eso lo puedes arreglar jugando un poco con el z-index del slider y del menu, echale un ojo a este tutorial https://tursos.com/tutoriales/html-css/css-basico-position-z-index
Joce chavez dice
Josue, por favor Ayuda. Mi problema está relacionado con este mismo. Las opciones del sub-menú se esconden por debajo de unas imágenes mostradas con el nivo-slider. Leí tu tutorial de position-z-index pero no se como aplicarlo al menú para que quede por encima de las imágenes-
Te agradezco de antemano la ayuda
Joce chavez dice
muchas gracias. Lo logre incluyendo el position y el z-index en estas lines
.nav > li {
float:left;
position:absolute;
z-index:1;
}
Saludos
Josue Ochoa dice
Justo eso te iba a responder, gracias por ponerlo, espero a alguien le sirva.
Jose Luis dice
Yo estoy intentando meter el menu en una tabla, pero lo que consigo es que me la mueva entera hacia la izquierda, aqui se puede ver un ejemplo:
http://www.musicagratis.eu/jazz/vocaljazz.html
Estos son los pasos que he realizado, a ver si detectais donde esta el fallo:
1- Subo a la carpeta «jazz» la carpeta _MACOSX y el fichero «estilos.css»
2- Pego el codigo del menu en una tabla
3- Subo la pagina vocaljazz.html a hosting y me encuentro toda la tabla a la izquierda
¿Sabeis como puedo solucionar esto?
Gracias de antemano y felicidades por el blog
Josue Ochoa dice
No se mucho de tablas, tal vez si le pones esto:
Patricio dice
Ok. Josue, vere lo que me recomiendas y te aviso como me va. Gracias por tu respuesta, un abrazo.
Jose dice
Muy bueno el tutorial pero de hace tiempo vengo buscando como hacer para que el menu aparezca en todas las paginas sin tener que copiar y pegar en cada pagina. Alguien me podria ayudar?
Vi por alli que usan include() de php pero quisiera saber si hay alguna forma de hacerlo solo con html o javascript
Josue Ochoa dice
En HTML tienes 2 opciones, usar iframe o usar algo como , es mas seguro que el iframe funcione
Patricio dice
Me resulto con lo que me dijiste Josue, igual tengo el problema que cuando carga se va la imagen y luego vuelve. Esto siempre pasa cuando va cambiando de imagen.
Gracias.
Josue Ochoa dice
No entiendo, pasame tu pagina para verla y poder identificar el problema.
Cristina Grim dice
Excelente tutorial, he leído miles de páginas con tutoriales y tengo que decir que esta para mí es la mejor, al menos lo que he visto en este tutorial. Esto de que se explique todo, todito, es excelente.
Un 10, Josue. Seguiré más a menudo tus post.
Isaac dice
Hola josue, he leido el tutorial y lo he probado y funciona bien, solo hay una cosa que dices y no esta bien. Explicas que este menú funcioan en internet explorer desde la version7 en adelante, lo he probado en internet explorer y no va bien. Cuando haces clic al menú y deseas ver el submenú automáticamente se cierra el submenú, no te deja ni hacer clic ni nada, ¿que puede estas pasando?
Un saludo
Josue Ochoa dice
Lo he probado en IE7+ y me funciono bien.
Isaac dice
Hola josue, he leido el tutorial y lo he probado y funciona bien, solo hay una cosa que dices y no esta bien. Explicas que este menú funcioan en internet explorer desde la version7 en adelante, lo he probado en internet explorer 7 y no va bien. Cuando haces clic al menú y deseas ver el submenú automáticamente se cierra el submenú, no te deja ni hacer clic ni nada, ¿que puede estas pasando?
Un saludo
Juan dice
Hola!
a ver si me podeis ayudar. Necesito hacer que sólo se despliegue el submenu al hacer click. No quiero usar javascript, existe algún comando con css ??
Puede que sea muy difícil, pero si al abrir un submenu se cerrase el anterior que abriste sería perfecto. El menu que estoy intentando hacer es vertical y tiene 4 niveles de submenus.
Gracias.
1 saludo.
Josue Ochoa dice
Intenta hacerlo con jQuery:
$(«.menu li a»).click(function(){
}):
_EpY_ dice
Muy buen tuto, me encanta esta página.
Para el problema de centrado yo sólo e conseguido meterlo en un div, ajustar el div a los px del menu y centrar el div, dejando un espacio por debajo para un marquee que tengo.
HTML:
...
CSS:
#menu {
font-weight: bold;
BACKGROUND-COLOR: #000000;
width: 702px;
height: 30px;
margin: 0px auto 10px auto ;
}
Un saludo.
denis ortiz dice
Hola amigo:
estoy empezando en esto y lo que quiero es que no se utilice * para valores globales.
Lo que quiero poner es el » ul class» dentro de un div para poderlo manipular pero se desconfigura todo. Me podrias ayudar
Josue Ochoa dice
Solo se usa una vez al principio para estilizar las fuentes, si gustas sacalo, no afecta en nada al ejemplo.
Patricio dice
Hola Josue
Tengo N archivos html y un css. El menu esta en el css, pero el contenido del menu obviamente esta en cada uno de los archivos html. Bueno la pregunta es: Si deseo modificar el menú, como puedo hacerlo una sola vez y no como ahora en cada uno de los archivos html.
Gracias por tu ayuda
Josue Ochoa dice
Con PHP, creas un archivo menu.php y luego con include() lo insertas en tus paginas, asi solo modificas 1 archivo.
_EpY_ dice
Tengo un problemilla con el menu, en IE me sale como vertical en vez de horizontal y los submenus no aparecen, a que puede ser debido?
la página es la siguiente: http://www.motoclublavirgendelcamino.info/pruebas
En Chrome y en firefox funciona perfectamente, sólo es en IE
Un saludo
_EpY_ dice
Creo que el fallo puede estar aquí pero no se donde, te pongo el css del div, lo tuve que centrar de forma extraña ya que no tuve mas remedio
#menu {
font-weight: bold;
BACKGROUND-COLOR: #000000;
width: 702px;
height: 30px;
margin: 0px auto 10px auto;
}
Un saludo
_EpY_ dice
he cambiado el #menu para centrarlo de diferente manera de la cual no se si dará problemas en otras resoluciones pero creo que no, pero en IE sigue sin verme bien y lo único que tengo cambiado de tu CSS y codigo son enlaces y colores no se donde puede estar el fallo…
#menu {
BACKGROUND-COLOR: #000000;
height: 25px;
position: relative;
padding: 0px 15% 30px 15%;
font-weight: bold;
}
Josue Ochoa dice
En que version de IE lo estas probando? me gustaria ayudarte pero el problema es que estoy en mac y aqui no hay IE.
_EpY_ dice
Pues uso el IE 8, lo he conseguido hacer que se vea bien, pero no me deja selecionar los submenus, me desaparecen antes, a lo mismo que tengo problemas con el centrado que lo tengo echo en margin y en un portatil se ve mal 😀
Patricio dice
Hola Josue
Te saludo desde Ecuador. He visualizado el trabajo, se ve muy bien. La pregunta del millón es: Hay alguna forma de que los menus en html, no vayan en cada página?. En mi caso, por ejemplo tengo un sitio web (www.patriciobonilla.com), con más de 30 archivos-páginas en html, cuando deseo hacer algún cambio en el menú, debo cambiar en todos estos archivos…
Saludos y felicitaciones por tu aporte
Josue Ochoa dice
Con PHP, utilizando include
Camau dice
Hola Josue, estoy implementando el menú desplegable con y css pero no funciona correctamente en IE, actualicé a la versión 9, pero tampoco. Cada menú se ve de manera horizontal como renglones.
Otra consulta, usé el include pero el menú está en un doc. html y el que lo llama es un arch. Php, está correcto así? Muchas gracias por tu ayuda.
Josue Ochoa dice
Tendrias que modificar el archivo, ya no seria .html sino .php para que la funciona include funcione.
Camau dice
Hola Josue, finalmente pude hacer un menú modificando el que aparece en el sig. link
http://elblogdefiko.blogspot.com.ar/2011/12/crear-menu-horizontal-desplegable.html.
Funciona en IExplorer, en Firefox y Chrome. Muchas gracias!
Pablo dice
Excelente tuto.
He leido mil y ninguno tan claro como este.
Realmente muy bueno
¿consulta si en vez de tener botones horizontales quiere tener todos verticales y que al pasar por uno de ellos se muestren los sub-menu pero desplazando hacia abajo lo elementos del menu como lo hago?
Josue dice
Checa http://tinkerbin.com/dHT5nbw8
Cristian dice
Hola, mi pregunta es la siguiente.
Me gustaría tener un menú más destacado como el tuyo. Logré hacerlo del tamaño de alto de mi header pero desde luego los submenus quedan con el mismo padding por más que les ponga un valor. Esto hace que cuando aparezca la lista sea extremadamente grande y toque hacer scroll a la página. ¿Hay alguna forma con este código hacer algo parecido al submenú de esta página que sale un bloque pequeño con las diferentes opciones y un sencillo background hover al pasar el cursor?
Gracias por la respuesta.
Josue dice
Mmm no te entiendo del todo, sobre el menu del sitio, he usado este plugin para hacerlo, lo podria haber hecho con este ejemplo pero necesitaba que se muestre un indicador.
ariel cardenas dice
hola es la primera vez que los encuentro y esta muy interesante, me gustaria sabes como puedo hacer ese mismo desplegable , pero enves de que las opciones bajen , suben osea que sea acendente …
ojala me pueden ayudar saludos desde Mexico ….
Josue dice
Modificando el CSS del menu hijo, especificamente la propiedad top, pero ten en cuenta que necesitas darle algo de espacio arriba para que se vea bien.
EDUARDO dice
hola, como hago para crear un submenu en dos columnas, porque se ve terrible por que son muchas opciones.
Josue Ochoa dice
Tal vez tendrias que hacer un div que contenga dos o mas uls como submenus y estos colapsarlos para que se vean como columnas.
Manuel dice
Gracias por el tutorial, pero como agregarle el indicador al lado para que muestre el desplegable, es decir la flechita
Josue Ochoa dice
Hola Manuel, mira encontre este tutorial, esta en ingles pero te lo explico aca:
Lo que hace es añadir un indicador en todos los a del menu <span class=»more»> y lo oculta por defecto, pero luego anade otra regla CSS que es:
li a:not(:last-child) .more { display: inline; }
Esta diciendo entonces que lo muestre (el indicador) en todos los li que tengan elementos hijos (submenus).
Lo acabo de implementar en este tinkerbin, funciona perfectamente con el menu de este tutorial.
Manuel dice
Muchisimas gracias por el tutorial y el dato, aunque me costo ubicarlo dentro de la plantilla que tengo, fue exitoso al final ver como quedo. Ahora quiero practicarlo para poderlo hacer desde cero y que quede como yo quiero. Nuevamente gracias y hasta pronto por ahi cuando tenga otra duda. Excelente informacion.
antonio dice
Que tal amigo, me surge un problema, ya tengo el menu, cuando paso el mouse sobre el enlace que abre el sub-menu, funciona perfecto, pero cuando muevo el mouse para seleccionar un enlace en el SUB-MENU este se cierra bien rapido, no se que elemento tengo que modificar para que el submenu permanezca abierto para poder seleccionar enlaces en el.
Josue Ochoa dice
Solo con CSS no creo que se puede añadir un delay, tendrias que usar Javascript.
jano dice
muchas gracias eh utilizado muchos de tus ejemplos son muy buenos. Ojala siempre sigas así.
saludos desde chile.
Josue Ochoa dice
Gracias a ti, un saludo.
juan dice
Que significa (nav), pregunto xq soy nuevo y he visualisado que se encuentra en varios tutoriales.
es una clase pero que papel juega?
Josue dice
nav = navegacion
José dice
perdon, como hacer q el menu q se desplegue No quede por encima de la la informacion.Me equivoque en mi otro mensaje.te dejo el link a la pagina q subi la foto de mi problema. gracias de nuevo.
http://tinypic.com/r/2vv857d/6
Josue Ochoa dice
z-index, https://tursos.com/tutoriales/html-css/css-basico-position-z-index
gustavo dice
hey bro muchisisisisismas gracias me ha servido de mucho ya que no te entendia a mi profe como se creaba un menu pero tu lo explicas muuuy facil gracias 🙂
Josue Ochoa dice
Gracias por comentar, un saludo 🙂
gerardo dice
Hola hace poco hice la última actualización de wordpress y varias cosas dejaron de funcionar, principalmente el menú, el submenú del tercer nivel estan sobre los de segundo nivel y no se puede acceder a ellos existe alguna solución, o que me recomiendas? ayuda 🙁
Josue Ochoa dice
Tu sitio es este? el menu lo veo bien.
Linda dice
Que tal, en primera muchas gracias por el tuto esta genial!, quería saber como puedo hacer que dependiendo de un usuario que ingrese y vea el menú solo pueda ver cieras partes del menú, por ejemplo para este caso que el usuario A solo pueda ver la parte de Servicios — Diseño Web y que el usuario B solo pueda ver de la parte igual de Servicios pero — Diseño Gráfico; estos usuarios ya estan previamente autentificados asi que por eso no hay problema, ojala me puedas dar aunque sea una idea de como hacerlo si es posible con CSS.
Josue Ochoa dice
Si es PHP, seria algo como:
En ese caso Servicios solo se mostraria si la condicion pasa.
Jorge dice
Gracias por el tutorial, simple e instructivo.
rodrigo dice
En internet explorer no funciona correctamente los menú desplegable me sale mal pero en los demás exploradores funciona correctamente cual podría ser mi erro
Josue Ochoa dice
que version de IE?
Juan Nieto dice
Hola Josue
A mi no me funciona en IE tampoco, i version es la 9
El link es:http://www.domesstico.com/index.php
maicdoo dice
Hola Josue, fantastico tutorial, muy bien esplicado.Tengo una duda y es si los submenus podrian ir en posición horizontal. En caso afirmativo podrás indicarme como hacerlo, muchisimas gracias.
Josue Ochoa dice
Quitale el float: left, y ponle display: block a los li.
maicdoo dice
Gracias por tu respuesta, no consigo el resultado deseado. Quito el float:left a «.nav>li» y añado «display:block» en todos los li y no resulta. Creo que algo no hago bien. Ahora estoy aprendiendo css….
SI pudieras indicarme exactamente cuales son los li que tengo que añadir «display:block».
Fantasticos tutoriales!!!
Miguel dice
Josue,
No se si estoy haciendo algo mal pero trate de bajar el codigo fuente y recibi un archivo cifrado, ahi alguna otra forma de bajarlo?
Gracias
Miguel
Josue Ochoa dice
A mi me deja bajarlo correctamente (menu-multinivel.zip)
Luci dice
Hola muchas gracias me sirvio mucho!
jhon dice
oye como ago para que el menu se desplique por encima de una imagen 😀
Rodrigo dice
Hola, una pregunta, estoy modificando el mañano de los botones ya que en algunos el texto es mas grande que en otros pero no logo poder editar el tamaño de los sub sub menus ya que estos heredan el tamaño del submenu y necesito poder modificarlos, sabes como lo podria solucionar???
Saludos
Josue Ochoa dice
Prueba usar el selector de hijo directo de CSS ( > ), para aplicar estilos especificos:
ul > li (submenu)
ul > li > li (sub submenu)
emiliano dice
por fin una pagina que si responde a las preguntas de la gente muchisimas gracias me volvi loco para esto muchas gracias y voy a leer sus otros post que estan mas que interesantes y me registro ya gracias amigo
emiliano dice
a otra cosa que me olvide de preguntarte si quiero cambiar algunos nombres y poner otros hay que modificar el css
Josue Ochoa dice
Asi es.
Antonio dice
Es posible que los items superiores esten centrados y los demas no ? muchas gracias 🙂
Josue dice
.nav > li a { text-align: center; }
.nav > li > ul > li a { text-align: left; }
Andrea dice
Hola a tod@s
Tengo un menú similar al del ejemplo pero vertical. El problema es explorer y la verdad es que no termino de aclararme por más q leo cosas en la web. El menú me aparece desplegable la primera opción y el resto nada.
Agradezco la ayuda que me puedan dar al respecto, una luz sobre que hacer.
Este el código:
#menuvertical {
text-align: left;
width:180px;
position: absolute;
top:190px;
left: 3px;
position: relative\9;
top:175px\9;
/*opacity: .9;*/
z-index: 99;
border: 2px solid #ffc82b;
list-style-type: none\9;
}
#menuvertical ul {
list-style-type: none;
padding:0;
}
#menuvertical ul li.nivel1 {
width: 180px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera { /*Líneas división celdas*/
border-top-width: thin;
border-top-style: solid;
border-top-color: #e0d9aa;
}
#menuvertical ul li {
padding:0;
background-image: url(../images/flecha_categoria.png);
background-repeat: no-repeat;
background-position: right center;
/*display: block;
width: 40%;
float: left;*/
}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #9c503b; /* Color del texto */
background-color: #fff3d6; /* Color de fondo */
border: solid 0px #fee; /* Borde de las pestañas */
border-top: none;
padding: 10px; /*Ancho celda*/
position: relative;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bolder;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #FFF; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
list-style-type: none;
border: 1px solid #d6d6e6;
}
#menuvertical ul li a.nivel1 {
display: block !important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
border: 1px solid #d6d6e6;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 179px;
top: -1px;
position: absolute\9;
left: 179px\9;
top: -1px\9;
/*border: 1px solid #d6d6e6;*/
}
#menuvertical ul li ul li a { /*COLOR AZULLLLLLLLLLLLLLLL*/
background-color: #FFF; /* Color de fondo subpestañas */
color: #103856; /* Color del texto subpestañas */
width: 300px;
border: 0px solid #ffc82b;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#menuvertical ul li ul li a:hover {
position: relative;
/*background-color: #6E6E6E;*/ /* Color de fondo al pasar el mouse subpestañas */
color: #ff7800; /* Color del texto al pasar el mouse subpestañas */
border-top-style: none; /*Para q no halla bordes sobre el submenú al hacer hover sobre el menu de nivel 1*/
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
yalemy dice
hola mu bien tus aporte necesito que ayude con un sistema q estoy realizandon como hago para trabajar con la isma pantalla pero con deferente submenu ayudame
Josue Ochoa dice
No te entendi.
iPixelEstudio dice
Muchas gracias por el fantástico trabajo que estás haciendo con estos tutoriales. A mí me están apoyando mucho en mi trabajo.
Sigue así.
Marga dice
Cómo puedo hacerlo para que el submenu que se despliega me quede por encima del contenedor principal? Es que así me queda por debajo de este div.
Me resultó muy útil este ejemplo!!
Espero respuesta. Gracias
Josue Ochoa dice
z-index, aplica z-index al menu y al div, en el valor le pones uno superior al del menu y uno inferior al del div, para que z-index funcione ademas ambos elementos tienen que tener position: absolute/relative/fixed definida, en tu caso creo que lo mejor seria dejarlo con relative para que no afecte su posicion.
Albañil dice
Muy bueno el ejemplo me ha sido de mucha utilidad
Javier dice
Gran explicación.
Una pregutna, ¿cómo se hace para que el color de los botones del submenú sea distinto del de el menú principal?
Josue Ochoa dice
ul > li, el «>» representa descendencia directa de esta forma solo estas apuntando a los de primer nivel.
Antonio dice
Aqui lo teneis funcionando con algunos cambios: http://www.fivetechsoft.net/cgi-bin/fiveform
Josue Ochoa dice
El problema que tienes es que el menu sale atras del div? aplica las siguientes propiedades al menu:
#omenu{
z-index: 2000;
position: relative;
}
Katy Adelin dice
Hola que tal… disculpa pero…al pasar el mouse sobre el menú muestra el submenú, pero al pasar el mouse a alguna opción desaparece rápidamente ¿qué puedo hacer para que esto se evite? Agradecería tu pronta respuesta.
Josue Ochoa dice
Hasta donde se, no es posible hacerlo con un menu hecho solo con CSS, tendrias que añadir alguna funcionalidad con javascript o usar un plugin especializado.
Carol dice
He copiado el código tal y como explicas, pero cuando intento ir con el ratón a alguna de las opciones del submenú, desaparecen sin darme tiempo a clicar en ellas. Debo añadir algo al código?
Gracias!
Josue Ochoa dice
En que navegador lo estas probando? tienes la URL donde lo estas probando?
Carol dice
Chrome. Aún no tengo la URL disponible. Copié tal cual el código que pusiste.
ilopezsmx dice
Hola como dice Carol cuando pongo el raton por encima del submenu, me desaparece. Tengo que añadirle algo? Gracias
Josue dice
Tienes la URL donde lo estas probando?
Fran dice
Hola Josue:
Tengo un problema con la web que estoy creando. Soy un poco nuevo, así que entenderás que el problema sea tonto 😀 La página es http://crececontuweb.es/palanco3/
El problema está en el menú desplegable. Al tener tantos submenús, los elementos de menú más a la derecha, me despliegan los submenús de tal modo que se salen de mi pantalla (fíjate en el menú ‘Celulosas hostelería’). Tengo varias opciones para solventarlo (que se me ocurren, acepto cualquier otra):
1. Que a partir de un determinado elemento, flote el desplegable hacia el lado opuesto de como lo hacen ahora. Supongo que dándoles IDs diferentes a según que elemento puedo hacerlo, pero no sé cómo hacerlo exactamente.
2. Que independientemente de qué elemento padre provenga, todo el desplegable se ubique en una posición fija justo debajo del menú principal, y no debajo relativamente de cada elemento padre. Así evitaría que se saliesen. Tampoco sé cómo hacerlo.
Espero que me puedas echar una mano, Gracias!!
Fran dice
Ok, creo que lo he conseguido! Gracias de todos modos. En cualquier caso, si quieres echarle un vistazo al menú y sugerirme algún modo sencillo (just CSS) de mejorarlo, estaré eternamente en deuda 😉
Gracias!
Apocaliptico dice
Gracias por el tutorial, pero tengo una duda, como hacer para que quede centrado, intenté ponerlo en una tabla y centrarla pero no funciona, muchas gracias….
Jose Luis Sosa dice
Puedes intentar asignando una medida al menú con ‘width’ y después centrarlo con ‘margin:0 auto;’
Saludos.
Josue Ochoa dice
Lo que dice Jose Luis, o en ultima ponlo dentro de un <center>
Jose Luis Sosa dice
Gracias por el tutorial, me parece muy bueno poder descargar el ejemplo para así poder experimentar con los códigos. Excelente página!
Gustavo dice
Hola Josue, ya tengo funcionando el menú expandible. Sabes cómo puedo hacer para q al pinchar sobre las distintas pestañas cambie aleatoriamente de cabecera… pero dejando la pagina de inicio siempre con la misma cabecera.
http://mispadressonprimerizos.blogspot.com.es/
Gracias y salu2
Josue Ochoa dice
Cuando se esta en una de las paginas interas que pertenece a X menu? porque haz puesto los menus de primer nivel con enlace a #, para hacerlo tendrías que hacer algún mecanismo dentro de tu plantilla de Blogger, si fuera WordPress te podría ayudar mas especificamente.
Sujeto Que No Quiere Dar Su Nombre dice
Casi lloré al encontrar esto…
….Espera, olvida el «casi»
¡Gracias!
jorge dice
que tal Josue, una excelente pagina llena de grandes recursos, muchas gracias por tus tutoriales… sigue asi!!!….. GRACIAS!!!!
leo dice
hola, tome el ejemplo que muestras para hacer un menu con submenus, pero no me muestra los submenus, gracias , estan interesantes tus ejemplos..
Josue Ochoa dice
Pueden ser muchas cosas, si tienes la URL donde lo estas probando ponla.
alfredo dice
hola Josue, una pregunta, como hago para que tenga propiedades de transpariencia;
solo los sub-menus. o que soporten una imagen (para q de el efecto de transpariencia. mi idea es hacerla un defenfoque al fondo q esta atras de los menus ). si hay donde hago los cambios 🙂
gracias de antemano.
una consulta mas que no es referente al tema: tengo un sistemas de comentarios … como hago para q este mande un mensaje al mi correo u otro cada vez q alguien deje un comentario… utilizando cualquier servicio de mensajeria. (nose si hay mail php).
Josue Ochoa dice
Con RGBA (background: rgba(0, 0, 0, 0.5);) donde 0.5 es el valor de Alpha (transparencia), tambien puedes usar un png con transparencia.
Sobre los comentarios, usas WordPress? yo uso este plugin http://wordpress.org/extend/plugins/subscribe-to-comments/
alfredo dice
Gracias hare la prueba …. luego comento de como me fue 😉
Juan Manuel dice
Josue:
Desde Buenos Aires te mando un gran abrazo y te felicito por tu buena predisposición. Tu ejemplo de menú desplegable es muy util y práctico me servirá de mucho en mis proyectos futuros.
Muchas Gracias.
fernando dice
Hola Josue, tu menú es el único que ha cumplido con lo que quiero, obviamente le he hecho hartos ajustes a la planilla para que quede perfecto. Es más, como lo tengo ahora está perfecto, cumple mis requisitos. Pero tengo dos problemas que me tienen loco:
1- Los «Botones» del menú principal son muy grandes, los puedo adecuar poniendo «height» en «.nav li a {«, pero las palabras no se centran a la altura cuando modifico el height. solo se reduce el margen de abajo hacia arriba
2- Una vez que modifico el height, se me desordena la posición de los submenu, ya no empiezan desplegados junto al submenu.
He intentado de todo, margin, padding, etc.
Si tienes una idea de como lograrlo me ayudarías mucho, ya que me gustaría que los botones principales fueran más pequeños (y las palabras centradas a la altura del botón) pero sin alterar la posición del desplegado del submenu.
Mi página en proceso http://chirisushi.blogspot.com/
Muchas gracias
Josue Ochoa dice
Hola Fernando, mira no te entendi muy bien pero por lo que veo en tu ejemplo al parecer funciona correctamente, sin embargo me parece que estas queriendo definir la altura de los ‘li a’ sin usar padding, osea con height y mantenerlos centrados verticalmente (?), eso lo puedes hacer con line-height:
height: 35px; // si defines 35 de alto
line-height: 35px; // defines 35 de line-height y asi se centrara verticalmente
padding: 0 25px; // luego el padding lo puedes dejar solo a los lados.
fernando dice
Josue, ahora que lo veo me parece tan simple, muchas gracias, pero aún no puedo lograr que los subsub-menus queden a la altura. me explico:
Si te das cuenta donde dice: EVENTOS/Eventos/Opción 01
http://chirisushi.blogspot.com/
Los subsub-menu (Opción 01) no los puedo dejar a la altura de Eventos, obviamente lo mismo con el resto.
Te dejo el código que tengo puesto:
* {
border-radius: 10px; /* redondear botón */
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
.nav > li {
float:left;
}
.nav li a {
background:#A5130F;
color:#FFF;
display:block;
border:1px solid;
padding: 0 25px;
height: 10px;
line-height: 10px;
}
.nav li a:hover {
background:#A5130F;
}
.nav li ul {
display:none;
position:absolute;
min-width:170px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-177px;
top:1;
}
Te agradecería un montón si me ayudas con esta.
Saludos
israel dice
Muy interesante el menú,secillo y rápido.Lo he variado un poco para mi primera pagina web.Muchas gracias,un saludo
Sara dice
Veo que al copiar ha puesto los ítems del menú, pero a mi me salen en horizontal tal como en tu menú.
Gracias
jftoadies dice
Hola Campeon, me has salvado la vida una y otra vez este menu, no cabe duda que es uno de los mejors tutoriale que he visto y seguido, seguro esta en mi top10 !!!! tengo una duda como hago para que los submenus se desplieguen a el lado izquierdo?
Gracias y Saludos
Josue Ochoa dice
Inviertes el valor de right aqui:
.nav li ul li ul {
right: 140px;
top:0;
}
jftoadies dice
Sos un genio, lo había intentado donde no era!!! Problema resuelto ÉXITOS BRO’
alex dice
hola josue buen dia tengo un problema con el sitio que estoy haciendo baje un menu con jquery-slideshow lo implemente al index lo que pasa es cuando le doy click a alguna pestaña del menu me baja la imagen que se encuentra debajo del menu le eh estado buscado pero nada si me puedes ayudar te lo agradeceria…
Josue Ochoa dice
Estas implementando este menu? pasame la URL de la pagina.
Sara dice
Ya he resuelto el problema poniendo en el css
.nav > li {
float:left;
position: relative;
left: 20%;
}
Gracias de todos modos, seguiré tu web con interés
Joce chavez dice
Que tal Josue, ayer escribí una consulta pero no la veo el día de hoy, así que molesto nuevamente,
Estoy implementando el menú en este sitio, pero no he logrado por mas que lo intento que al poner el desplegable lo posicione debajo del menú normal, ni tampoco que el tamaño sea el adecuado.
Por favor, le ruego darle un vistazo a ver si puedes recomendarme algo.
Saludos de antemano,
http://www.pcconsultorescr.com (en la parte de tiendas)
Josue Ochoa dice
Ponle valor top a .nav li ul:
.nav li ul{
top: 50px;
}
Joce chavez dice
Genial!! Josué. Una maravilla
Te agradezco un montón.
Igual que otro montón de gente, sigo tus tutoriales con mucho interés.
Bendiciones
MargaritaMaria dice
Hola Josue. Muy bueno tu tutorial. Mil gracias !!!
Estoy haciendo tu tutorial para un trabajo de Universidad y necesito crear 2 submenus mas ala DERECHA en este submenu ..(los que estan con la X antepuesta) he probado pero no me resulta…podrias decirme el codigo para esto? el submenu entrada salida resultado es una foto y podria ir a nueva ventana como hacer el enlace?
Grupo proceso Inic-Gestion integr trabajo-Desarrollar ActaConstituc proy- Xentrada-salida-resultado es una foto- Xdefinicion del resultado.
Es urgente Mil gracias por tu colaboracion.!!
Saluditos y buen dia !!
MargaritaMaria
–
Josue Ochoa dice
Hola Margarita, no entendi tu comentario.
carlos dice
Hola un saludo Josue…. tengo varias preguntas: en esto del web ps andamos ya muy entrados, (veo tu pagina ¿tu la hiciste? imagino que si…) veo ademas varios efectos como a la derecha(de tu sitio, arriba) si uno pasa el mouse las imágenes encerradas en un circulo cambian a cuadradas, ¿como haces eso?, otra mas mi estimado Josue, veo que tienes dos cosas que me interesan (ojala y hagas un post sobre esto) tienes una cajita para «suscribirse» y ademas me agrada tus cajas de comentarios (osea esto), ¿podrias hacer un post de estas dos cosas? o bien si podrias publicarlo, para aprender mas en esto.
Sobre el Menú esta excelente, lo he copiado para estudiarlo….. realmente creo que la practica hace al maestro… saludos y felicidades por tu ejemplo…..
Josue Ochoa dice
Hola Carlos, son varias cosas, los efectos de la derecha es CSS3, todo esta en este archivo, la caja de los comentarios es simple CSS, las suscripciones son de Feedburner, los anuncios son de Google Adsense.
carlos dice
ah!!! otra cosa quisiera me pasaras el tip como poner publicidad com la que tienes mero arriba, ¿te pagan por eso no?… plis porque ps esto de la web, cada vez se pone mejor…..
Carlos dice
Hola ante todo felicitarte por el tutorial, de lo mejorcito que he podido ver.
Tengo una pregunta, ¿cómo puedo hacer para que los items sean cada uno de un color diferente y los submenús de tamaño diferente.
Gracias
Jose Raul Disharoon dice
supongo que deberías crearle un
.nav li ul li a{
background-color:el color que sea que sea;
}
Si verificado.
Si además quieres otro color distinto cuando pase por encima con el ratón
.nav li ul li a:hover{
background-color:el color que sea que sea;
}
elprofecibernetico dice
Muchas gracias por el tutorial, la verdad es que estaba buscando la forma de crear un menú como este. Gracias me sirvió de mucho.
carlos m dice
Hola Josue, Ochoa,,, al parecer se quedo encriptado mis datos, pues me han llegado mas de 3 correos de tu web, TURSOS; avisandome de que he cometnado en tu web… de favor haber si puedes quitar mis datos que quedaron como por default en las cajas de NOMBRE, MAIL Y URL…. saludos atte. Carlos m
x dice
creo que ya… se quito dejando en blanco espero ya no lleguen
tobal dice
Hola, tengo un menú de este tipo hecho y lo que quiero saber es cómo puedo hacer que funcione sin usar float:left. Gracias
josueochoa dice
Es por el z-index, ponle position: relative al menu y luego un z-index superior al del slider, z-index: 99999 es casi seguro que iria encima.
Fabiana dice
Hola, antes que nada mil gracias por tus comentarios, es de la unica web que pude lograr lo que deseaba. El unico tema es que el menu no logro que aparezca por encima de un slide de imagenes. Còmo debo corregirlo para que este por arriba de este? Gracias!!!
Juan dice
gracias excelente tuto 🙂
Jorge couoh dice
Hola Josue, excelente trabajo, excelente tutorial, te felicito y te agradezco por el, solo tengo un problema, lo estoy implementando, en IE lo veo bien pero en google chrome, no, creo que se debe a que estoy trabajando con una plantilla css de dynamicdrive, esa plantilla al parecer hace el el subnivel salga debajo de un div, el cual no permite verlo, no se si me puedas ayudar. saludos Jorge
josueochoa dice
Pasame la URL donde lo tienes.
Moises Conejo dice
Buenisimo!!!
Poncho dice
Hola Josue saludos cordiales. mi pregunta es la siguiente como le haria para que el menu quedara centrado autompaticamente en la pagina. uso firefox y explores 7,8.
puiggi dice
Hola Josue tengo un problema, mi menú le pongo un margin:45px, pero quiero que cuando se despliegue el menu hacia abajo no salga este margin, nose como hacerlo y lo he intentado de muchas formas, te lo agradezco de antemano.
josueochoa dice
A que le pones ese margin? al ul padre o al hijo, lo que quieres es que no afecte al hijo, solo al padre?
Sergi Puig dice
exacto, lo pongo al ul padre, y quiero que no afecte al hijo, ¿como lo puedo hacer?
josueochoa dice
Usa selectores directos, asi: ul > li{ … }
Estudio Web dice
Excelente artículo y explicación Josue! Felicitaciones!! 🙂
Te dejo un ajuste para dar aviso de los «Submenues»:
En vez de:
Submenu 1▼
Usar:
Submenu 1
.con-submenu{
background-image:url(../images/layout/icono_menu_01.png);
background-position:right bottom;
background-repeat:no-repeat;
}
Y para lo que sea necesario, ajustar el padding derecho para posicionar la imagen, o utilizar otra imagen 🙂
Saludos!!
Anaro dice
me funciona en CHROME pero no en IE.
me muestra cada elemento de la lista hacia abajo con un ancho de 100% y ademas no despliega nada =S
isabel dice
Hola Josue, en primer lugar quiero darte las gracias por compartir con nosotros tus conocimientos, es muy de agradecer. Quería preguntarte una duda que tengo con respecto a los menús desplegables (los hijos). El caso es que mi menú con sus submenús los tengo en un div e inmediatamente debajo tengo otro div. Cuando despliego un menú queda por detrás del div de abajo, osea que o se ven los hijos. ¿Qué puedo hacer para que el menú se despliegue sobre el div de abajo?
Gracias con antelación
Hugo dice
Hola Josue, ante todo muchas gracias por tu generosidad y compartir este tutorial con todos. Estoy actualizando mi página y quiero aplicarle este menú desplegable múltinivel. Pero quisiera hacerle dos cambios primero centrarlo en la la página, el resultado más parecido que pude lograr es colocando en NAV padding:0 30%; pero esto le dá una posición fija y si variamos el tamaño de la ventana del navegador se desplaza y segundo darle al primer nivel un color blanco de fondo y al resto otro color pero ya he probado y no lo consigo, incluso con las respuesta que ya hay en tus comentarios. Abusando de tu generosidad te paso el link de la página http://www.msservicios.com.ar/vehiculosprueba.html para ver si podes darme una mano. desde ya muchas gracias.
josueochoa dice
Para lo primero, centralo con margin: 0 auto (necesita tener un width definido), y para lo segundo, selecciona el primer elemento li, ej: ul li:first-child{ background: white; }
Freddy Abreu dice
Hola mi hermano muy bueno el tutorial aprendí bastante, pero tengo un problema, cada vez que intento usar otro navegador se me modifica la barra, en algunos navegadores se me pone muy pequeña y en otros se pone muy grande como hago para arreglar este problema? necesito que mi barra quede fija sin que se mueva en otros navegadores por favor se lo agradecería de verdad mi hermano.
javiervg dice
Gracias, funciona muy bien …. saludos …
Jose Raul Disharoon dice
Hola.
Primero agradecerte la explicación de todos los pasos que haces, En otros sitios sólo te dicen copia y pega, Esto que has hecho se agradece mucho.
Quería preguntarte una pequeña duda.
Haces una clase nav en el primer ul y partes de ahi, haciendo esto el menú funciona como describes en el artículo. Pero he intentado adaptarlo a la nueva etiqueta estándar de html5. quedando el principio:
…etc
en el css cambiado el «.nav li ul» etc por «nav ul li….» lo que ocurre es que los submenús no salen uno debajo del otro sino uno al lado del otro. ¿sabes a que podría deberse?
Muchas gracias.
Un saludo.
josueochoa dice
Tendria que ver tu codigo, acabo de probar cambiando el div a nav y no hubo problemas, intenta cambiar el elemento pero manteniendo la clase, cosa que quedaria
tito3576 dice
Felicitaciones, maestro, muy interesante
Arturo Vera Zamorano dice
Tengo una consulta: tengo un dropdown en una pagina y posee un menu desplegable con opciones, el problema esta en que cuando lo despliego no se muestra completo ya que hay mas filtros (dropdown o combobox) en la pagina que sobresalen, el codigo es mas o menos el sgte:
out.print(«»);
out.print(«Todas «);
out.print(«»);
que debo agregar para que mi menu desplegable se muestre sobrepuesto a todos los demas elementos que pueden haber?
Nam3lesS dice
te hago una pregunta..a esto lo quiero agregar submenus… pero no se como.. me podrias ayudar? espero tu respuesta gracias.
.submenu{ position:absolute; z-index:10; top:50px; left:0px;white-space:nowrap;}
.submenu > ul{ border-bottom: 1px solid #c6c6c7;}
.submenu ul > li{ display:block; height:29px; position:relative; text-align:left;}
.submenu ul > li:first-child{}
.submenu ul > li > a{ display:block;height:29px;line-height:29px; text-decoration:none; position: relative; font-family:’BebasNeueRegular’;font-size:16px; color:#717375; text-transform: uppercase; padding:0 8px; background: #e8e8e8;
transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;
}
.submenu ul > li > a:hover { text-decoration:none; background: #2bb8e6; color: #fff;}
pablo dice
Muchísimas gracias, Josue, por tan excelente tutorial, me está sirviendo de mucho.
Estoy rehaciendo un menú desplegable que hice modificando estilos de un Spry del Dreamweaver, puedes verlo en http://www.avelinosala.es. Este que está subido, (el spry), como ves, ahora funciona con Safari y Firefox perfectamente, pero algo debe ir mal con el java, porque en móviles y en tabletas no va bien (en Chrome directamente ni va). Así que estoy viendo la forma de hacerlo directamente con HTML y CSS (siguiendo tu tutorial), pues entiendo que es el java lo que da problemas.
Todo bien. Pero me encuentro con un problema. He consultado el aluvión de comentarios que tan generosamente has contestado, pero nadie se refiere a éste en concreto. El caso es que cuando voy al último subnivel, que se queda marcado con fondo gris, a mi me gustaría que también el anterior nivel se quede marcado con el fondo gris (como sucede ahora en http://www.avelinosala.es) pero no hago más que tocar el CSS aquí y allá y no lo logro.
Te adjunto las modificaciones que he hecho hasta ahora en tus CSS para adecuarlas a mi diseño.
Muchas gracias por tu ayuda.
* {
font-family:Arial, Helvetica, sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
.nav > li {
float:left;
width:110px;
font-size: 12px;
}
.nav li a {
background:#c6e5fa;
color:#000;
display:block;
padding: 0.5em 0.75em;
}
.nav li.submenu{
display: none;
}
.nav li a:not(:last-child) .submenu {
display: inline;
}
.nav li a:hover{
background:#d0d1d3;
}
.nav li {
position:relative;
}
.nav li ul {
display:none;
position:absolute;
min-width:110px;
font-size: 10px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li ul {
right:-110px;
top:0;
}
josueochoa dice
Me parece que ya lo haz logrado, de todos modos para menus mas avanzados te recomiendo http://users.tpg.com.au/j_birch/plugins/superfish/
pablo dice
Gracias, Josue.
Sí, finalmente volví a hacerlo todo de nuevo partiendo de un menú de Stu Nicholls (CSS3 menús). Me costó un poquito trastear con las CSS sobre una de las plantillas, pero finalmente lo conseguí adecuar a mi diseño perfectamente.
Victor Orea dice
Buenos dias Josue muy bien explicada tu entrada, me ha gustado mucho, yo estoy implementando un menu desplegable con superfish.js me funciona bien pero como tengo demaciados enlaces me los acomoda en 2 filas el menu, quisiera saber si se puede reducir las celdas sin disminuir el tamaño de la letra drasticamente, te anexo mi codigo:
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu li {
position: relative;
}
.sf-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 90;
}
.sf-menu > li {
float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display: block;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu ul ul {
top: 0;
left: 100%;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu ul {
box-shadow: 2px 2px 4px rgba(0,0,0,.2);
min-width: 5em; /* allow long menu items to determine submenu width */
*width: 5em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
border-left: 1px solid #fff;
border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
border-top: 1px solid rgba(255,255,255,.5);
padding: .75em 1em;
text-decoration: none;
zoom: 1; /* IE7 */
}
.sf-menu a {
color: #2C5234;
font-family: «Fontana ND Ee OsF»;
font-size: 12px;
font-weight: bold;
}
.sf-menu li {
background: ;
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* …unless you support IE7 (let it wrap) */
-webkit-transition: background .2s;
transition: background .2s;
}
.sf-menu ul li {
background:#C5C8A2 ;
}
.sf-menu ul ul li {
background: #9AAEDB;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
background: #CFDEFF;
/* only transition out, not in */
-webkit-transition: none;
transition: none;
}
/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
padding-right: 2.5em;
*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
content: »;
position: absolute;
top: 50%;
right: 1.5em;
margin-top: -5px;
height: 0;
width: 0;
/* order of following 3 rules important for fallbacks to work */
border: 5px solid transparent;
border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
margin-top: -5px;
margin-right: -3px;
border-color: transparent;
border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
border-left-color: #000;
}
josueochoa dice
Pasame la URL donde lo estas probando.
Pablo Chandia Cornejo dice
Amigo tengo una duda con un estilo que estoy trabajando y no me desplega el menu :(, soy ing informatico pero no nos enseñan css y estoy trabajando en mi tesis para titularme y nesecito que se desplege mi menu 🙁 no funciono con los pasos que tienes tu, obiamente no funciona por que el css de propiedades es diferente aun asi me podrias hechas una mano?
/*
TOP
*/
div#header-top{
width:960px;
height:60px;
float:left;
}
ul#menu{
float:right;
margin:13px 0;
list-style-type:none;
background:#05111e;
border:1px solid #163755;
position:relative;
padding:0 10px 0 0;
z-index:100;
}
ul#menu li{
display:none;
float:left;
position:absolute;
}
ul#menu li a,
ul#menu li a:active,
ul#menu li a:visited{
float:left;
padding:5px 12px 7px 12px;
padding:6px 12px 6px 12px9;/* IE8 and below */
color:#fff;
}
ul#menu li a:hover{
background:#000;
text-decoration:none;
}
ul#menu li a.ddar{
}
ul#menu li.sep:first-child a{
-moz-border-radius-bottomleft:5px;
-moz-border-radius-topleft:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
ul#menu li.sep{
border-right:1px solid #000;
}
ul#menu li.sep a{
border-right:1px solid #091929;
}
ul#menu img{
width:12px;
height:12px;
float:left;
margin:10px 0px 0 10px;
cursor:pointer;
}
ul#menu img#login{
margin-right:4px;
}
/* second level */
ul#menu li ul.second{
min-width:140px;
position: absolute;
top:31px;
left:-1px;
z-index:1000;
margin:1px 0 0 0;
padding:14px 0 0px 0;
display:none;
overflow:hidden;
}
ul#menu li ul.second li{
width:140px;
float:left;
display:inline;
padding:0;
background:#0f1d2a;
position:relative;
}
li.activeli{
background:#010305;
}
ul#menu li ul.second li a{
width:128px;
float:left;
margin:0;
border:none;
padding:6px 0px 6px 12px;
color:#fff;
}
ul#menu li ul.second li a:hover{
background:#000;
color:#FFF;
}
/* thirth level */
ul#menu li ul.second li ul.thirth{
width: 140px;
position: relative;
top:31px;
right:-140px;
z-index:1000;
margin:1px 0 0 0;
padding:14px 0 0px 0;
display:none;
overflow:hidden;
}
ul#menu li ul.second li ul.thirth li{
width:140px;
float:left;
display:inline;
padding:0;
background:#0f1d2a;
}
li.activeli{
background:#010305;
}
ul#menu li ul.second li ul.thirth li a{
width:128px;
float:right;
margin:0;
border:none;
padding:6px 0px 6px 12px;
color:#fff;
display:block;
}
ul#menu li ul.second li ul.thirth li:hover{
background:#000;
color:#FFF;
display:none;
}
Ahi estan las propiedades del menu drop down 3, nose si deje algo mal o todo la verdad nose de css alguien me ayuda?
josueochoa dice
Pasame la URL donde lo estas probando.
Mario Cotom dice
Buenas presentaciones te felicitos y gracias por compartirnos tus conocimientos
Nelson Cristhian dice
Muchas gracias! me ayudaste mucho! bendiciones
Mauricio Briseno dice
Josue, muy buena tu explicacion, porque vas paso a paso, y vemos los cambios, solo me quedan algunas dudas,
Para una web que quiero hacer modifique los menus y en vez de float:left; le puse float right; y me inviertio el orden de los menus, con que funcion hago que no se invierta?
tambien te comento que la lista de un submenu es algo larga y quisiera que tuvieran menos diferencia de espacio entre cada submenu como lo modifico?
y tmb te comento que en el css al principio puse
body {
background: url(fondo.gif);
}
y ps me pone el fondo pero se repite la imagen como puedo hacer que se ajuste al tamaño de la pantalla es por poco lo que se repite como tipo mosaico, le puse abajo un width 100%; pero no funciono
Saludos
van moji dice
Puedes explicarme con este ejemplo lo de position relative y absolute,lineas 27 y 35-36-37.Gracias
van moji dice
¿que quieres decir con:llevaran position:absolute para que no afecten el ancho del menu principal?
van moji dice
y luego ….al mismo novel que su ancestro li que tiene position:relative.Gracias
josueochoa dice
Cuando un elemento lleva position: absolute entra en otro espacio de posicionamiento, es como si flotase encima del resto de elementos (por ende su ancho es ignorado), sobre lo otro se pone relative al padre para que el hijo que tiene absolute se posicione en relacion al padre, de lo contrario el campo de posicionamiento de este elemento seria el elemento body. Se que es confuso al principio, te recomiendo hacer pruebas aqui para que lo vayas entendiendo mejor: http://codepen.io/pen
van moji dice
y encima de que resto de elementos esta flotando en este caso?
van moji dice
ni idea.
.nav li ul{
display.none;
position:absolute;
min-width:140px,
}
No entiendo.Me dicen que es para que se quede fijo algo,pero no se el que.No entiendo este codigo
van moji dice
ni idea.
.nav li ul{
display.none;
position:absolute;
min-width:140px,
}
No entiendo.Me dicen que es para que se quede fijo algo,pero no se el que.No entiendo este codigo
.nav li ul li{
position.relative;
}
Incluso si quito el relative,el menu se muestra bien
van moji dice
¿Cual es el padre y el hijo aqui?¿son cajas anidadas?
Hernando dice
Muchas Gracias popr el tutorial, muy ilustrativo y claro. Sólo una pregunta:
Si quiero crear el menú dinámicamente con datos de un recordset y con niveles de anidamiento variables como se haría?
Guest dice
excelente tutorial mi unica pregunta es como centrar el menu ya lo intente con margin:0 auto; pero no centra
si alguien me puede ayudar muchas gracias
Leonardo Lucero dice
saludos amigo deseo saber como poner viñetas a mi menu, podrias ayudarme
CAMILO ALGARRAツ dice
Quiero hacer un menu desplegable , pero ya tengo hecho el menu horizontal con imagenes y quiero que de una imagen se desplegue un menu vertical como lo haria ? Por favor es urgente
swemuertito dice
hola, muy interesante, puedes mandarme completo como para insertarlo directo a mi web? estoy aprendiendo y no te entendi mucho, me serviria tremendamente grande si me ayudas, mil gracias de antemano
swemuertito dice
no puedo instalar, entender y peor aun no encuentro mas bonito que lo tuyo pero ahora empese con una pagina de ventas en suecia, lo cual ya esta claro! pero solo me falta los menus y submenus y esto ya me tomo muchisimos dias!!! tratando y buscando, porfavor espero puedas ayudarme!
Javier dice
Me sirvio, muchisimas gracias por compartir tus conocimientos. Saludos.
carlos rocha dice
muy útil muchas gracias
igomez169 dice
No funciona el link del demo ni tampoco el de descarga. Podrian solucionarlo estimado.
Make money online dice
Magnificent beat ! I would like to apprentice while you amend your site, how could i
subscribe for a blog site? The account helped me a
acceptable deal. I had been tiny bit acquainted of this your broadcast offered bright clear idea
Internet marketing dice
Aw, this was an extremely nice post. Taking a few minutes and actual effort to make a really good article… but what can I
say… I procrastinate a lot and don’t seem to get nearly anything done.