Menú horizontal y algo +
Debido al pedido del público fiel lector de CSSLab, me puse las pilas y anoto un artículo más con una vieja pero nunca mal ponderada técnica para construir menús de listas horizontal (usando <ul> y <li>), pero en esta oportunidad le agregaremos un rollover, ya q he recibido la inquietud de parte de Bane de cómo aplicar el artículo anterior ‘Rápidos rollovers con CSS‘ en este tipo de despliegue. Vayamos al grano:
Lo primero es lo primero: creamos el menú con 1 <div>, 1 <ul> y varios <li>’s:
<div id="menu">
<ul>
<li><a href="#">Más Izquierda</a></li>
<li><a href="#">Izquierda</a></li>
<li><a href="#">Derecha</a></li>
<li><a href="#">Más derecha</a></li>
</ul>
</div>
Le vamos a dar color y forma a esto. Agregando estilo al #menu:
#menu ul {
padding: 0px;
margin: 0px;
background-color: #333;
list-style: none;
font-size: 14px;
font-weight: bold;
width: 100%;
height: 30px;
float: left;
}
y el punto clave: horizontalizando a través de display: inline;
#menu ul li {
display: inline;
}
Hasta aquí, nada fuera de lo común. Nos falta agregar algo bonito para que se vea bien en un rollover, algo simple. Un cambio de color:
#menu ul li a:link, #menu ul li a:visited {
background-color: #333;
color: #FFF;
padding: 5px 15px;
float: left;
text-decoration: none;
}
#menu ul li a:hover, #menu ul li a:active{
color: #F30;
background-color: #CCC;
height: 20px
}
Nuestro menú básico horizontal está hecho y funciona de maravilla. Ahora agreguémosle un rollover con imagen de fondo (background-image en vez de background-color) y que las instancias estén en un mismo gif:
Gif del a:link y a:hover
Solamente reemplazaremos donde antes habíamos seteado los parámetros relacionados con el fondo (background-image):
#menu ul {
padding: 0px;
margin: 0px;
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
background-color: #333;
list-style: none;
font-size: 14px;
font-weight: bold;
width: 100%;
height: 30px;
float: left;
}
#menu ul li a:link, #menu ul li a:visited {
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
color: #FFF;
padding: 5px 15px;
float: left;
text-decoration: none;
}
#menu ul li a:hover, #menu ul li a:active{
color: #900;
background-position: 0 -30px;
background-color: #CCC;
height: 20px;
}
Una aclaración: en vez de resumir el background colocando aquí todos los parámetros (url, posición, repetición), preferí hacerlo cada uno en su respectivo atributo. Con esto, Safari lo puede leer fluído y no deja errores al desplegar el fondo. Además no me gusta resumir mucho. Otra aclaración: a diferencia del otro tutorial donde se explica lo mismo pero en un menú vertical, aquí el cambio de posición para mostrar la posición del fondo_menu.gif es de manera vertical, no horizontal: background-position: 0 -30px; donde fije el alto de la botonera en 30 pixeles para un despliegue exacto de las instancias de los botones.
Disculpa Bane por el retraso en la respuesta a tu inquietud. Espero ahora te resulte.
El código CSS completo:
body {
padding: 0px;
margin: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
}
#menu ul {
padding: 0px;
margin: 0px;
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
background-color: #333;
list-style: none;
font-size: 14px;
font-weight: bold;
width: 100%;
height: 30px;
float: left;
}
#menu ul li {
display: inline;
}
#menu ul li a:link, #menu ul li a:visited {
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
color: #FFF;
padding: 5px 15px;
float: left;
text-decoration: none;
}
#menu ul li a:hover, #menu ul li a:active{
color: #900;
background-position: 0 -30px;
background-color: #CCC;
height: 20px;
}
Quiero felicitarlos por tomarse el tiempo sobre mi inquietud y que seguramente sera la de otros tambien. Ya me habia rendido un poco al asunto y resignado a trabajar con menus verticales usando CSS pero con esta clase magistral podre completar mi sitio como lo deseaba.
Muchas Gracias
claro, para eso estoy. suerte.
Releyendo este post, me di cuenta q me salte varios puntos, no explique muy bien el codigo. Pero mi intencion no es enseñar paso a paso, sino orientar segun ciertos parametros problemas y posibles soluciones. Supongo tb q quien lee esto tiene cierto conocimiento de html y css. Si creen q debo ser mas especifico en ciertos puntos, haganmelo saber. No tengo problema en hacerlo.
mmm nolose en realidad, nunca he utilizado joomla. pero en la index seguro debes llamar el css (con import o link). suerte.
Hice todo paso por paso, pero cuando veo el blog (vista preliminar) las palabras pasan de largo en todo el blog, hasta el final de la pantalla, y lo que está en la columna de la derecha termina abajo de todo. No entiendo qué pasa, si es por el menú o porque yo metí la pata.
Hola, he estado probando el ejemplo y me ha parecido muy bueno. La verdad es que en muy pocas líneas puedes llegar a obtener un menú muy decente y serio. Enhorabuena! Pero, una duda que me crea es…¿según tengo entendido, las medidas de, por ejemplo, los padding, margin, height,… no deberían estar en porcentajes en vez de en px? De esta forma, éstas medidas se ajustarán a la pantalla del usuario que cargue la web sea cual sea la configuración en píxels. Yo he modificado algunas medidas del padding de #menu ul pero la diferencia entre IE y Firefox es abismal. Mientras que en uno se ve de forma correcta, en el otro los espacios son enormes…pffff.
Otra cosa, sería fantástico que partiendo de este menú pudieses explicar como hacer que el menú mantenga visible la opción seleccionada. La verda es que he estado ojeando alugnos ejemplos pero no acabo de entender el código.
Bueno, pues muchas gracias y enhorabuena!! Hasta pronto!!
si la diferencia entre IR, FF, Safari en cuanto a px, em y % son enormes, por elllo siempre comienzo mis hojas de estilo con:
* {
margin: 0;
padding: 0;
}
eso resetea todos los margenes y paddings de todos los elementos, tags, etc y asi uno tiene mayor control para ello.
El haber utilizado PX en vez de % para este caso fue por un problema preciso q tenia una persona en un sitio. Hacer q se acomode el menu no deberia ser mas complicado, mirare el codigo y publicare una revision liquida del mismo menu.
Para la opcion seleccionada, puedes crear una clase llamada ’seleccionada’, la q estara activa cuando estes en la pantalla de esa opcion del menu.
Saludos.
Cristian, piedes dejar la URL con lo q estas tratando de hacer? asi leyendo tu descripcion no queda muy claro.
Ya solucioné el problema, se me habían pasado los píxeles. Ahora necesito saber cómo puedo cambiar el código que postearon para que sea vertical.
Sácale el display: inline; del UL LI, eso es lo q hace q los elementos de la lista se dispongan horizontalmente, uno al lado del otro.
Cambié el código y me queda mal. Así:
* Más Izquierda
* Izquierda
No puedo lograr que se queden una abajo de la otra! Traté de cambiarle el ancho, el tamaño de la letra…el porcentaje de 100 a 32 pero nada.
Manda el link mejor de donde estas trabajando. Así a ciegas queda muy difícil acertar.
Gracias viejo!!!!!!!!!!!!!!!!!!!!!!!!!!!
Me salvaste la vida….
Quiero agregarle un submenú al que ya tengo, pero no sé qué códigos ponerle. Me pueden dar una idea?
como en este caso, el id #menu es unico, deberias duplicar todos los elementos como #submenu (ul, li’s…) por ejemplo. luego agrega un div justo abajo del #menu y este se colocaria por debajo, y claro cambia los estilos necesarios (tamaño txt, colores, etc). con eso deberias estar bien. ahora, si el submenu se te ubica al lado del menu, con un clear:both o un display:block (prueba cual) éste se colocaria justo por debajo.
muy bueno
Saludos a todos:
El rollover que se usa tiene 101×60.
He querido cambiarlos por otro de 200/64 y con 2 opciones de la lista.
Pero no se muestra bien.
Me pueden ayudar.
FELIZ NAVIDAD!!!!!!!!1
gracias.
Muy buen resumen de un menu horizontal.
Ahora me surge una inquietud, usas un gif por una cuestion de tamaño o solo gustos.
otra cosa, ¿usando CSS la unica via de ubicar horizontalmente un menu es con display: inline; o hay otras opciones? acabo de leer en otra pagina algo que no me funciono: hacian una lista igual a esta salvo por dos cosas bien importantes:
Primero no ponian la lista en un
Segundo supuestamente la colocan horizontalmente solo con float: left; (cosa que no me anduvo)
Saludos y gracias por el aporte
diego, si existe otra tecnica: se construye el menu con UL (OL tb sirve) y LI’s, pero en vez de darles display: inline a los li’s se los flota a la izquierda con float: left;. el efecto q se logra es el mismo, q se pongan uno al lado del otro. de ahi se manejan los paddings, margins, colores, etc. sobre el GIF, es solo cosa de gustos.
saludos.
hola, puedes explicarme algunas cosas?
ejemplo, que es “#menu ul” “#menu ul li” “#menu ul li a:link, #menu ul li a:visited” “#menu ul li a:hover, #menu ul li a:active” y como es que hay una referencia a estos, pues, solo en el div se indica en el ID “menu” y no con las otras cosas como “ul”, son argumentos o algo asi? o como? agradeceria mucho tu respuesta
miguel te recomiendo q leas un poco algun manual de html antes para entender lo q estas haciendo. puedes tb publicar tu codigo o link en los foros para q yo o alguien mas pueda ayudarte. salu2
El menu en css no funciona correctamente abriendolo con Internet Explorer pues el “background-image” no aparece. ¿Algun truco ?
Saludos,
Excelente ejemplo
Pero ¿Cómo puedo hacer para que aparezcan submenus en forma vertical a partir de este mismo ejemplo?
Me ha parecido muy bueno e intuitivo el tutorial, mis felicitaciones al autor, aparte que queda muy elegante y limpio, a la vez que rapido (normal en css). Para hacer el menu desplegable supongo que habra que llamar a alguna funcion en javascript. con capas lo consigo pero con css me cuesta mucho.
Miguel, hay varios libros que son muy buenos para las css… os recomiendo
“CURSO DE CSS” Christopher schmitt ANAYA O’REILLY.
hola,
tengo una duda sobre como poner dos menus CSS uno horizontal y otro vertical en una misma pagina, al segundo le doy una clase distinta ,eje
ul .menu2 a{ y aun asi me algunos elementos heredan del primer menu
esa es mi duda…
gracias
rodrigo, te recomiendo poner tu duda en los foros, mas completa (incluyendo URL) para ver si yo o alguien mas pueda ayudarte. saludos.
El script tiene problemas con Google Chrome, se soluciona quitando todas las etiquetas ul en el CSS y aplicando el estilo en el cuerpo HTML a la etiquta
se vería así:
Muy buena Explicacion
Quisiera saber si pueden ayudarme con la siguiente consulta: quiero poner en la pagina dos menus que despliegan submenus, uno es horizontal y otro es vertical pero al pegar los scripts me cambia el formato del otro, me dicen que quizás debería poner un class para que cada script sea inteligente y ejecute en el menu correspondiente, pero no se como puedo hacerlo, si lo sabes podrías ayudarme por favor
Roxana: deberias de diferenciar ambos scripts, ya q al ser uno horizontal y el otro vertical cambian. como bien dices, hazlo con diferentes class’es o por diferentes id’s.
suerte.
to es perfecto pero el menu quisiera q no se desaparesca el focus de la opcion dada por el usuario por q al darle click afuera del menu no conserva el focus. El focus desaparecia hasta q el usuario desee darle click a otra opcion del menu y asi sucesivamente.
yo te apoyo igual tengo ese problema
Excelente explicacion que bueno que exista personas que enseñen, yo por ello adornare mi sitio gracias por tus ideas
gracia por tu ayuda necesito poner un menu horizontal pero el problema es que el css no me hace nada pongo todo el codigo como esplicas y el menu no se hace nada
gracias men por el aportes bien explicado
Muchas gracias, siempre he tenido problemas para entender las instancias entre una y otra, pero con esto, + practicar y observar otros códigos, he aprendido