Este de hoy es un menú que puede incluir un segundo nivel o submenú en los elementos de la lista que se desee y que se desplegará al pasar el puntero por encima del item correspondiente. Su particularidad es que el despliegue será en horizontal, ocupando todo el ancho disponible y que se mostrará solapado por encima de cualquier otro contenido que pudiera existir por la zona dónde aparece.
Adicionalmente, ya que nos ponemos en faena, lo construiremos todo de manera que sirva tanto para diseños estáticos como adaptables (RWD).
Lo fundamental en un menú es la relación de elementos y enlaces, cosa que haremos en esta ocasión de la manera más socorrida, es decir, mediante una lista. Para crear los submenús, simplemente anidamos una segunda lista ul dentro del elemento de lista li principal que pretendemos que sea desplegable.
Este es un ejemplo con un enlace directo (sin desplegable) y otro elemento que contendrá un submenú que al desplegarse mostrará tres enlaces. Sólo tendréis que replicar la estructura del primer li o del segundo para hacer respectivamente una cosa u otra.
<nav> <ul class="fullnav"> <li> <a href="URL_DESTINO">ENLACE_DIRECTO</a> </li> <li> <a href="#">OPCIÓN_DESPLEGABLE</a> <ul> <li> <a href="URL_DESTINO">ENLACE_SUBMENÚ</a> </li> <li> <a href="URL_DESTINO">ENLACE_SUBMENÚ</a> </li> <li> <a href="URL_DESTINO">ENLACE_SUBMENÚ</a> </li> </ul> </li> </ul> </nav>
Esto anterior es el HTML que así, sin estilo, formará sólo una simple lista con una sublista en el segundo elemento. Se puede incluir en un gadget o directamente en la plantilla (Blogger) si sustituís las comillas dobles (") por comillas simples (').
Una vez montada la lista llega el turno del CSS para que todo funcione como os prometía al principio.
El lugar dónde colocarlo sería en la hoja de estilo (.css) si la tenéis en archivo aparte o entre las etiquetas skin si lo insertáis en una plantilla Blogger. También se puede añadir desde el Diseñador de plantillas > Avanzado > Añadir CSS.
nav {position: relative; width: 100%; margin: 0 auto; font-family: Arial;}
ul.fullnav, ul.fullnav ul {list-style: none; width: 100%; margin: 0; padding: 0; border: 0; font-size: 0; text-align: center;}
ul.fullnav {border-top: 4px double #666; border-bottom: 4px solid #999; background: #bbb;}
ul.fullnav li {display: inline-block; margin: 0; padding: 0; font-size: 18px; line-height: 60px;}
ul.fullnav li a {display: block; padding: 0 10px; text-decoration: none; text-transform: uppercase; color: #333;}
ul.fullnav li ul {position: absolute; left: 0; width: 100%; height: 0; overflow: hidden; background: #999; line-height: 0; z-index: 3;}
ul.fullnav ul a {color: white;}
ul.fullnav li:hover a {background: #999;}
ul.fullnav li:hover ul {height: auto;}
ul.fullnav li:hover ul li a {background: transparent;}
ul.fullnav li:hover ul li a:hover {text-decoration: none; color: #333;}
ul.fullnav, ul.fullnav ul {list-style: none; width: 100%; margin: 0; padding: 0; border: 0; font-size: 0; text-align: center;}
ul.fullnav {border-top: 4px double #666; border-bottom: 4px solid #999; background: #bbb;}
ul.fullnav li {display: inline-block; margin: 0; padding: 0; font-size: 18px; line-height: 60px;}
ul.fullnav li a {display: block; padding: 0 10px; text-decoration: none; text-transform: uppercase; color: #333;}
ul.fullnav li ul {position: absolute; left: 0; width: 100%; height: 0; overflow: hidden; background: #999; line-height: 0; z-index: 3;}
ul.fullnav ul a {color: white;}
ul.fullnav li:hover a {background: #999;}
ul.fullnav li:hover ul {height: auto;}
ul.fullnav li:hover ul li a {background: transparent;}
ul.fullnav li:hover ul li a:hover {text-decoration: none; color: #333;}
Para los que busquen ir aprendiendo cosas, el sistema que he utilizado se basa en posicionar la sublista (ul.fullnav li ul) de manera absoluta con respecto al contenedor general (nav) para que aparezca debajo de los enlaces principales, dejándola además inicialmente oculta con height: 0 y overflow: hidden.
Al hacer hover sobre el elemento de lista cambiamos el valor de la altura para que esta sea automática (ul.fullnav li:hover ul {height: auto;}) y sólo con eso ya la tendremos visible. Todo lo demás es parafernalia estética que evidentemente podéis personalizar al gusto.
Y para terminar la demo, pero como vista así de manera aislada algunos no se harán una idea de cómo puede quedar en su sitio, en este Codepen podéis verlo integrado en una web simulada. Como siempre, allí podréis trastear lo que queráis para ver qué hace qué cosa y también para experimentar modificando lo que necesitéis.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Excelente post.
ResponderEliminarAndaba buscando algo así para mi próxima plantilla. Con unos pequeños cambios tienes mucho en muy poco espacio.
ResponderEliminarY no, no tardaré un siglo en acabarla ;) . De hecho, la tengo casi lista, sólo tenía cierto dolor de cabeza con el menú que tenía hecho, pero voy a intentar acoplar y adaptar esto a ver cómo queda.
Pruebo el nuevo menú y funciona pero en la versión para móviles no aparece, en lugar de ello solo muestra la opción página principal por dos veces como puedes ver aquí http://i.imgur.com/OzoKoeg.png
ResponderEliminarEs que para usar este (y otros) gadgets en móviles, tendrías que prescindir de las plantillas de Blogger y usar una personalizada. De lo contrario no saldrán, tal y como te pasa.
Eliminar¡Hola Oloman! Muchísimas gracias por este artículo y tantos otros que a lo largo de mi vida bloguereña he estado leyendo entre las tinieblas jajaj ;)
ResponderEliminarEstoy aplicando este menu en un blog de pruebas para ver si me gusta y quito los que tengo en el blog principal. EL link es el siguiente: http://goo.gl/V4akKB
En lugar de que el ancho del SUBMENU sea el ANCHO del menu principal, sale la lista hacia abajo, en lugar de hacia el ancho (no me lo lleva al ancho de la pantalla tampoco y no sé por qué pero lo prefiero así). El menú tiene un submenu y un subsubmenu, pero igual, lo había probado en Codepen y me había funcionado.
Yo creo que entre tanto modificarle el HTML a lo largo del tiempo, modifiqué algo más que no sé jajaja ;) Alguna pista de donde me pueda fijar? GRACIAS!!!
Hola Oloman! Me inquietaba el tema y encontré el problema, tenía una configuración de TABS para los menús que tengo en el blog principal y lo tendría que quitar para que funcione correctamente.
EliminarSé que estabas ayudando a una compi de MadTB con su blog ;) ¡Saludos!
Ah, estupendo, porque por eso que comentas y otras muchas cosas más, voy de cabeza y con mucho atraso contestándoos. Me alegro de que lo resolvieras por tus medios.
EliminarSeguro que tienes razón y, sinceramente, tomo nota para la próxima versión que algún día haré.
ResponderEliminarLo más complicado sería lo del segundo menú, pues para eso tendría que añadir nuevas etiquetas en TODOS los posts que ya tengo publicados y eso, también sinceramente, me da mucha pereza. Lo más práctico mientras tanto es que uses el buscador, probando diversas palabras. Por ejemplo "slideshow" casi que no la uso, pero "slider" sí y a veces "visor".
Otra idea sería que usaras el enlace de la izquierda "Salta". Es un post al azar, pero a veces se descubren cosas que ni se te habría ocurrido buscar :)
Gracias en cualquier caso. Se aprecian los comentarios constructivos.
Hola oloman, muchas gracias por este post, llevo hace un tiempo buscando algo así. se me ocurre preguntarte si al submenú se le podrían añadir (no sé cómo llamarlo) listas, columnas...
ResponderEliminarMe explico, en tu menú tienes por ejemplo la pestaña países, y yo me pregunto si se podría poner una categoría general, (por ejemplo europa, asia áfrica...) y debajo de cada una de ellas los distintos países.
Esto que explico lo veo en una web, no se si se puedan poner aqui enlaces o esté prohibido, se llama "caminomundos", y en estructura parece que es el mismo tipo de menú que aquí nos explicas, pero no se si se pueda hacer.
Bueno, realmente creo que es lo mismo (hecho con otro sistema), pero que en lugar de contener una lista completa (ul) dentro de cada elemento de la lista principal (li), han metido un montón de texto.
Eliminar...pero he estado probando y ese asunto hace que el código haya que cambiarlo bastante, así que será en otra ocasión que lo explique ;)
EliminarHola Oloman! Muy útil este tutorial, gracias! Te escribo porque no hay forma de centrarlo en mi blog, este es el link http://luzyhumo.blogspot.com.ar/ qué puedo hacer? Ya probé varias alternativas y nada.
ResponderEliminarGracias!
Jimena
Eso es porque lo has metido dentro del bloque destinado al menú de páginas y entonces, todos los estilos que este lleva están interfiriendo. Para arreglarlo has de hacer las siguientes modificaciones:
Eliminar1. Añadir un !important aquí dónde ves el MARGIN.
ul.fullnav, ul.fullnav ul {
list-style: none;
width: 100%;
margin: 0 !important;
padding: 0;
border: 0;
font-size: 0;
text-align: center;
}
2. Añadir un float: none al final de esta parte:
ul.fullnav li {
display: inline-block;
margin: 0;
padding: 0;
font-size: 18px;
line-height: 60px;
float: none !important;
}
3. Un center: 0 (que no sirve para nada) en este selector, cambiarlo por un left: 0 aquí
ul.fullnav li ul {
position: absolute;
left: 0;
width: 100%;
height: 0;
overflow: hidden;
background: #999;
line-height: 0;
z-index: 3;
}
Y ya está ;)
bueno pos buena explicación...
ResponderEliminarBuenas Oloman, gracias por compartir este menú desplegable. He conseguido personalizarlo bastante a mi gusto y la verdad es que queda fenomenal.
ResponderEliminarSin embargo, se me escapa un último detalle: ¿cómo podría programarse el CSS de manera que las sub-pestañas saliesen centradas desde la posición de su pestaña madre? Naturalmente, considerando que si una pestaña se encuentra, por ejemplo, al borde derecho, que las sub-pestañas se recoloquen sin salir del menú, cogiendo espacio de la izquierda.
Te agradezco el tiempo que inviertes en generar este tipo de contenidos, gracias a los que muchos podemos dejar nuestro blog mucho más atractivo y funcional.
¡Salud!
No entiendo bien lo que quieres hacer porque las subpestañas salen centradas con respecto al "todo". Este es un menú que funciona así. Quizás lo que quieres es otra cosa como esta.
EliminarBuenas Oloman. ¿Tendrías a mano códigos de menús desplegables como para insertarlos en dreamweaver? Desde ya muchas GRACIAS.
ResponderEliminarNo sé cómo funciona Dreamweaver Milton. Nunca lo he usado.
EliminarHola buenas tardes, ¿por qué escribe ul.fullnav?, solo nos podriamos referir como .fullnav, o estoy equivocado, por su respuesta gracias
ResponderEliminarUna manía mía Gerardo. Efectivamente si pones .fullnav sólo debería funcionar, pero para evitar cualquier tipo de interferencias en otro código CSS que se refiera a listas y que pudiera andar por ahí en medio, me gusta especificarlo así.
EliminarAdemás también lo hago con la intención de que se vea claro a qué tipo de elemento afectará ese CSS, A la lista en ese caso.
Gracias por la aclaración, llevo poco tiempo aprendiendo y hay cosas desconocidas aun. Buen dia
EliminarLO MAXIMO MI GRAN PREGUNTA ES COMO ESCRIBO EN CADA MENU? Y SUB MENU?
ResponderEliminar¿Puedes reformular la pregunta?
EliminarHola Oloman.
ResponderEliminarHe estado jugando con tu css para hacer un menú en mi blog (www.viulamoto.blogspot.com), el problema está en que me gustaría que el menú tuviera 3 niveles: Menú principal > Submenú > Opciones definitivas, pero no consigo que se vean.
Te pongo el CSS que estoy usando:
nav {position: relative; width: auto;}
ul.fullnav, ul.fullnav ul {list-style: none; width: auto; margin: 0; padding: 0; border: 0; font-size: 0;}
ul.fullnav {color: transparent;}
ul.fullnav li {display: inline-block; margin: 0; padding: 0;}
ul.fullnav li a {display: block; padding: 0 10px; text-decoration: none; color: #ffffff;}
ul.fullnav li ul {position: absolute; left: 0; width: auto; height: 0; overflow: hidden; background: #444444; line-height: 0; z-index: 3;}
ul.fullnav li ul li ul{position: absolute; left: 0; width: auto; height: 0; overflow: hidden; background: #444444; line-height: 0; z-index: 3;}
ul.fullnav ul a {color: #444444;}
ul.fullnav li:hover a {background: #444444;}
ul.fullnav li:hover ul {height: auto;}
ul.fullnav li:hover ul li a {background: transparent;}
ul.fullnav li:hover ul li a:hover {text-decoration: none; color: #ffffff;}
Ya que estamos... ¿se podría hacer que el primer menú tan sólo tuviera el ancho para contener el texo?
Muchas gracias!
¿Por qué no lo montas en un CodePen y desde ahí lo veo? Me ahorrarías mucho trabajo y sobre todo tiempo que no tengo :S
EliminarHola Oloman, una duda sobre este magnifico menú, es posible ponerle un buscador y que este sea en forma de lupa y se expanda... imagino que sí... ¿Puedes decirme como? un abrazo.
ResponderEliminarAl menú le puedes añadir lo que quieras simplemente escribiendo el correspondiente código HTML justo antes del que forma la lista (ul). Otra cosa sería integrarlo, porque realmente no está ideado para contener nada.
EliminarPor otra parte, lo crear un buscador con ese formato no lo tengo publicado, pero casi seguro que alguien sí lo habrá hecho.
Ok, gracias, lo miraré.
EliminarNO ME FUNCIONA :c POR QUE, PUSE HASTA EL MISMO HTML Y EL CSS NO MODIFIQUE NADA Y TAMPOCO ME SALE
ResponderEliminarNo será exactamente el mismo o no lo habrás puesto dónde debías. Como pudiste comprobar en el ejemplo, el código funciona.
EliminarCómo tendría que hacerlo yo para que el menú ocupará todo el ancho solo el menú sin la parte desplegable. Este es mi CSS código:
ResponderEliminar#header {
width:100%;
margin:auto;
font-family:"Times New Roman", Times, serif;
}
ul{
list-style:none;
}
.nav {
width:500px;
margin:auto;
}
.nav > li {
float:left;
}
.nav li a {
background-color:#03F;
color:#F00;
text-decoration:none;
padding:10px 12px;
display:block;
}
.nav li a:hover {
background-color:#036;
border-radius:20px;
}
.nav li:hover > ul {
display:block;
}
En un principio sólo es cuestión de cambiar el 500px de .nav por un 100%
ResponderEliminar.nav {
width:100%;
margin:auto;
}
Eso también lo probé y no me funciona solo me mueve el menú y pasa de estar casi centrado a estar a la izquierda del todo sin cambiar su ancho
EliminarAcabo de arreglarlo englobando el menú en un div PA y con un ancho del 100%.
EliminarMuchas gracias por tu ayuda de todas formas
Pues... de nada. Tú lo solucionaste ;)
EliminarHola Oloman disculpa que sea algo pesado con tantas preguntas. ¿Podrías decirme como puedo ponerle a la izquierda de este menú una imagen o logo, quizá es simplemente con la etiqueta IMG? En cualquier caso imagino que algo de CSS habrá que incluirle... Si además tienes idea de como hacer que sólo aparezca cuando se realiza Scroll...? Por pedir que no quede... En cualquier caso si conoces como incluir la imagen ya sería válido. Gracias por tú tiempo.
ResponderEliminarHay una manera sencilla de añadir a ese menú una imagen, pero lo del scroll ya requiere una explicación grande... y usar JavaScript.
EliminarPara poner un logo simplemente añade un elemento de lista (li) adicional a los enlaces del menú (ponlo el primero para que salga a la izquierda) y dentro de él ya pones la imagen.
Para que quede centrado verticalmente con los enlaces, añade esto al CSS:
nav img {vertical-align: middle;}
Gracias Oloman, en realidad puse otro menú, aunque este me gusta mucho tiene el inconveniente de no plegarse en la versión móvil y estéticamente es lo que se lleva ahora, además con las rallitas o menú hamburguesa... no obstante intentaré incluirle el logo con la información que me das (Conste que este menu tuyo me gusta más que cualquier otro)
Eliminar¡Hola de nuevo!
ResponderEliminar¡Te he dejado un comentario sobre el menú desplegable, pero ya he conseguido que aparezca tal y como te sale a ti! Qué alivio.
Un saludo y muchas gracias por compartir tus conocimientos.
PD: Las explicaciones aquí son infinitamente mejores que en youtube
Vaya... ahora que estaba pensando en dar el paso a YouTube XD
EliminarGracias Ángel
Sigo teniendo un problemilla con el menú desplegable. En la versión web funciona bien, pero no soy capaz de hacerlo aparecer para móviles. ¿cómo se podría hacer?
EliminarGracias.
Hola,
ResponderEliminarHe configurado perfectamente el menú pero no aparece en dispositivos móviles. ¿Hay alguna manera de que también aparezca?
Gracias.
http://angelsinocencio.blogspot.com.es/
ResponderEliminarCreo que finalmente has puesto otro tipo de menú, pero el problema es el mismo. Usas la plantilla de Blogger para móviles y esa no es configurable. Lo que sale lo pone Blogger y no es lo mismo que ves en tu versión web.
EliminarPara que ese menú (y otras cosas) salieran tal cual también en móviles, lo que tendrías que hacer sería usar una plantilla adaptable (RWD).
Y para probar como va eso, es suficiente con que cambies el tamaño de ventana de cualquier web RWD. Con esta misma puedes probar. Haz la ventana de tu navegador más pequeña y podrás ver cómo se reacoplan todos los elementos necesarios.
¡Gracias Oloman por tu respuesta! Finalmente he puesto el menú de blogger y estoy estudiando mudarlo a wordpress... Aunque también estoy pidiendo precios para que un profesional se encargue de todo y no perder más tiempo...
ResponderEliminar"Profesionales" sólo vas a encontrar para WP porque es lo rentable... para ellos ;)
Eliminar