Menú horizontal y algo +

20/feb/2006 53

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&aacute;s Izquierda</a></li>
      <li><a href="#">Izquierda</a></li>
      <li><a href="#">Derecha</a></li>
      <li><a href="#">M&aacute;s derecha</a></li>
   </ul>
</div>

Le vamos a dar color y forma a esto. Agregando estilo a #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; }

Ver resultado parcial.

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

CSSLab - link

Solamente reemplazaremos donde antes habíamos seteado los parámetros relacionados con el fondo (background-image):

#menu ul {
   padding: 0;
   margin: 0;
   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; }

Ver resultado final.

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.

Comentarios

  1. Bane [#]

    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

  2. Administrador [#]

    claro, para eso estoy. suerte.

  3. Administrador [#]

    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.

  4. CSSLab Admin [#]

    mmm nolose en realidad, nunca he utilizado joomla. pero en la index seguro debes llamar el css (con import o link). suerte.

  5. Cristian [#]

    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.

  6. Rafa [#]

    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!!

  7. CSSLab Admin [#]

    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.

  8. CSSLab Admin [#]

    Cristian, piedes dejar la URL con lo q estas tratando de hacer? asi leyendo tu descripcion no queda muy claro.

  9. Cristian [#]

    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.

  10. CSSLab Admin [#]

    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.

  11. Cristian [#]

    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.

  12. CSSLab Admin [#]

    Manda el link mejor de donde estas trabajando. Así a ciegas queda muy difícil acertar.

  13. Diego [#]

    Gracias viejo!!!!!!!!!!!!!!!!!!!!!!!!!!!
    Me salvaste la vida….

  14. Cristian [#]

    Quiero agregarle un submenú al que ya tengo, pero no sé qué códigos ponerle. Me pueden dar una idea?

  15. CSSLab Admin [#]

    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.

  16. yonathan [#]

    muy bueno

  17. luis alberto [#]

    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.

  18. diego [#]

    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

  19. CSSLab Admin [#]

    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.

  20. Miguel [#]

    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

  21. CSSLab Admin [#]

    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

  22. visitante [#]

    El menu en css no funciona correctamente abriendolo con Internet Explorer pues el “background-image” no aparece. ¿Algun truco ?

    Saludos,

  23. PiPo [#]

    Excelente ejemplo

    Pero ¿Cómo puedo hacer para que aparezcan submenus en forma vertical a partir de este mismo ejemplo?

  24. Chuache [#]

    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.

  25. Chuache [#]

    Miguel, hay varios libros que son muy buenos para las css… os recomiendo
    “CURSO DE CSS” Christopher schmitt ANAYA O’REILLY.

  26. Rodrigo [#]

    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

  27. CSSLab Admin [#]

    rodrigo, te recomiendo poner tu duda en los foros, mas completa (incluyendo URL) para ver si yo o alguien mas pueda ayudarte. saludos.

  28. CSSLab » Convirtiendo Listas en Árboles [#]

    […] Recontra conocidas ya son los menúes construídos con listas de ítems. Los hay verticales, y muy fácil es transformarlas a horizontales. Gráficamente, existen necesidades que a través de la habilidad del diseñador/desarrollador se pueden solucionar elegantemente con unos trucos de CSS. En este caso, mostraré una manera de crear menúes tipo árboles, utilizando algunos GIF para lograr esos enlaces y nodos. […]

  29. » Videocast 2: menú con listas | CSSLab [#]

    […] sitio desde buscadores viene desde la consulta css menú horizontal. Este tema es algo que se ha tocado hace bastante tiempo. Pero nunca está de mas reforzarlo, y ofrecer mejor material a quienes necesitan de este […]

  30. spel maskin [#]

    spel maskin…

    collaborations!vower opposites mastered abstractionist …

  31. » Pronto… | CSSLab [#]

    […] Menú horizontal y algo + […]

  32. CSSLab » Esas botoneras: centrándolas [#]

    […] dentro de un <li></li> y flotarlos a la izquierda (como usualmente se usa para los menúes horizontales), puse todos los botones dentro de un mismo <li>, caso contrario no podrían ser […]

  33. Jorge [#]

    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í:

  34. CSSLab » Menú con tabs con CSS, jQuery y Mootools [#]

    […] menúes tipo tabs ó con subniveles tanto horizontales como verticales, son muy útiles al momento de desplegar grandes cantidades de […]

  35. Manfred [#]

    Muy buena Explicacion

  36. roxana vargas [#]

    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

  37. Jorge Epuñan [#]

    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.

  38. abel [#]

    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.

  39. Juan [#]

    yo te apoyo igual tengo ese problema

  40. rodrigo [#]

    Excelente explicacion que bueno que exista personas que enseñen, yo por ello adornare mi sitio gracias por tus ideas

  41. sisol [#]

    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

  42. charles [#]

    gracias men por el aportes bien explicado

  43. Css_Man [#]

    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

  44. jorge [#]

    duda existencial, se peude hacer desplegable este tipo de menu en css?

  45. Jorge Epuñan [#]

    jorge: si y no. El menu dropdown utiliza tecnicas de CSS2 (pseudo-classes) q no son soportadas por IE6. En estos dias, ya podrias utilizarlas sin tener miedo si no tienes considerado este browser dentro de tu target.

    Ahora, igual puedes lograr menues con tabs mediante Javascript.

    Exito.

  46. Psicoanalizado [#]

    Muchas gracias por la informacion, muy practico este tutorial.

  47. Samuel [#]

    Que pasaría si quiero un separador entre boton y botón y como solucionaría el problema de que el separador aparece en el último botón y si utilizo style=”background-image: none;” en el link no me muestra la imagen over cuando le paso el mouse encima

  48. horacio [#]

    excelente totorial y lo sigues a pie de la letra te queda de maravilla, habra algun problema si lo uso exactamente = a como quedo.

  49. guillermo besares [#]

    podrias hecharme la mano con un menu, te envio el codigo. pero no se a que mail te lo envio puedes enviarme tu mail para enviarte el codigo gracias

  50. warrons [#]

    Hola, intento modificar mi web y tengo problemas para pasar mi menu vertical a horizontal, esta hecho asi. he intentado colocando la opción display:inline; en el css pero no me ha dado resultado, lo único que pasa es que se centra y continúa siendo vertical, mas no horizontal como lo deseo. por su ayuda gracias.

    Portada
    Radio Online
    Anuncios
    Contáctanos
    Nosotros

    y los stilos css estan asi:

    ul, ol, dl {
    padding: 0;
    margin: 0;
    }

    ul.nav {
    list-style: none;
    border-top: 1px solid #666;
    margin-bottom: 15px; }
    ul.nav li {
    border-bottom: 1px solid #246D99;
    }
    ul.nav a, ul.nav a:visited {
    padding: 5px 5px 5px 15px;
    display:block; /*
    width: 160px;
    text-decoration: none;
    background: #C6D580;
    }
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
    background: #ADB96E;
    color: #FFF;
    }

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab