Menú de pestañas | Oloblogger Vamos a explicar cómo hacer un menú que simula unas pestañas móviles. La cosa es mostrar unos enlace...

21 de noviembre de 2009

Menú de pestañas

Vamos a explicar cómo hacer un menú que simula unas pestañas móviles. La cosa es mostrar unos enlaces hechos con imágenes, formando una especie de botón y que al pasar el puntero por encima (hover), simulen moverse. El resultado funcionará cómo en este ejemplo:



Estas son las imágenes que hemos utilizado en el ejemplo. Son JPG sin transparencia y por eso le hemos incorporado el color negro en la parte redondeada de abajo, coincidiendo con el color del fondo dónde lo vamos a utilizar. No hay problema en utilizar unos GIF con fondo transparente y de hecho, sería lo recomendable si el fondo de vuestro blog no tiene un color plano sino una imagen. Para el efecto de que la pestaña se "estire" sólo necesitamos que una imagen sea más larga que otra. Con respecto al diseño de las imágenes, ahí es dónde os podeis lucir, porque el resto del menú es bastante fácil de construir.



Lo primero es redactar el estilo de las pestañas en la parte CSS de la plantilla (antes de ]]></b:skin>):

/* Estilo menu pestañas*/
ul#main-nav { /* El bloque general de los enlaces */
margin:0px;
padding:0px;
float:left; /* También podriamos llevarlo a la dcha o incluso centrarlo */
width:100%;
}
ul#main-nav li { /* Cada elemento del menú */
list-style:none;
float:left; /* Cada pestaña se pegará a la anterior, alineadas a la izquierda */
width:100px; /* Ancho de la imagen de fondo que utilicemos */
text-align:center;
}
ul#main-nav li a { /* Cada elemento con enlace del menú */
text-decoration:none;
display:block;
color:#cccccc;
/* Imagen pestaña normal */
background:url(http://4.bp.blogspot.com/_0eC4K-qZ7AM/SqL8lV9KvWI/AAAAAAAAJno/8BKgddxLUR8/s400/pestana1.jpg) no-repeat top left;
height:36px; /* Altura de la imagen más alta */
padding:4px 0px 9px 0px;
}
ul#main-nav li a:hover { /* Cada elemento con enlace pulsado */
color:#ffffff;
font-weight:bold;
/* Imagen pestaña más alta */
background:url(http://2.bp.blogspot.com/_0eC4K-qZ7AM/SqMEpIVMwNI/AAAAAAAAJn4/hlOUaROScxc/s400/pestana2.jpg) no-repeat top left;
/* Redistribuimos el padding vertical (4+9x) para que el texto de la pestaña simule bajar junto con ella */
padding-top:10px;
padding-bottom:3px;
}

Ahora buscamos el lugar dónde queremos situar el menú y allí escribimos una lista utilizando la clase creada (main-nav) y unos enlaces simples dentro de cada elemento:

<!-- MENU -->
<ul id='main-nav'>
<li><a href='URL_ENLACE1'>ENLACE1</a></li>
<li><a href='URL_ENLACE2'>ENLACE2</a></li>
<li><a href='URL_ENLACE3'>ENLACE3</a></li>
</ul>

Para colocarlo justo después de la cabecera, tal y como se hizo en la plantilla Bloggerbloc (alguien que no recuerdo lo preguntó), esta segunda parte habrá que insertarla debajo del cierre del bloque correspondiente, que normalmente lleva la id='header-wrapper'. Tras el </div> que lleve ese bloque es dónde tenemos que poner nuestra batería de enlaces para este caso.

Las pestañas podeis diseñarlas con los colores y formas que más os gusten. Si cambiais el tamaño, sólo habrá que ajustar los width, height y padding de la parte de estilo. Aunque los bloques son rectángulos, nada impide usar como se ha dicho, un GIF redondo o incluso totalmente irregular. Con hacer transparente la parte que no queremos que se vea, el efecto estará logrado.

Aunque está construido de distinta manera, este sistema ofrece el mismo resultado que las pestañas que podeis ver actualmente arriba a la derecha en este blog a modo de mini-post-it. Para conseguir buenos botones, ahora es sólo cuestión de tener un editor de imágenes, un poco de maña y mucha imaginación.

¿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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

57 comentarios :

  1. Oye, cambia el fondo que le pones al código.. no se lee ni bien ni mal.

    ResponderEliminar
  2. Yo lo leo bien, pero si lo seleccionas igual lo ves mejor. Además que el código suele ser para copiarlo y pegarlo en tu plantilla y modificar allí lo que quieras.

    Muchas gracias por este nuevo descubrimiento, hay en un blog donde igual lo experimento esta noche.

    ¡Besos!

    ResponderEliminar
  3. genial muchisimas gracias



    besitossss

    ResponderEliminar
  4. muy bueno!

    Y para ponerlos verticales?

    besitossss

    ResponderEliminar
  5. Lo de ponerlas verticales es otro artilugio y no se me ocurre dónde podría ir bien ¿algo más concreto podrías ser?

    ResponderEliminar
  6. Como creo este mismo sistema pero con menu desplegable?

    Osea que se desplegue y muestre la lista luego de clickearlo. Antes de darle click que solo salte el boton.

    Tienes idea de como hacerlo?

    ResponderEliminar
  7. Business, se pueden diseñar montones de menús distintos y cada uno lleva su propio código. Echa un vistazo a esta herramienta online que seguro que ahí encuentras varios modelos que te sirvan.

    ResponderEliminar
  8. .-OLOMAN: No sé si es porque, poco a poco, me voy enterando más de esto del CSS y del XHTML, o quizás porque lo has explicado muy clarito y completo; pero la verdad es que este post es un tutorial de referencia de cómo hacer una atractiva barra de menú con efecto desplazante hacia abajo.

    .-En cuanto a lo de cómo seleccionar las imágenes, tanto jgp como gif, preguntarte si el photoshop 8 elements permite crear imágenes, botones, etc. para este efecto...

    .-Gracias y enhorabuena por este pedazo de tutorial, porque, precisamente, estos días estoy aprendiendo cómo crear, diseñar y dar estilo a una barra de menú principal.

    ResponderEliminar
  9. Andybel, no conozco Photoshop 8, aunque supongo que sí. Las imágenes que ves de muestra en este post, las hice con el sencillo y gratuito Photofiltre.

    En otras ocasiones uso una aplicación antigua del paquete Photoshop: ImageReady, pero realmente para unos botones o pestañas, no hace falta mucha parafernalia.

    Me alegra que vayais avanzando más de lo que esperabais hace unos días, ya que entonces seos veía algo desesperados por no aprender al ritmo deseado.

    ResponderEliminar
  10. y no hay de otros colores quiero un menu verde porfa

    ResponderEliminar
  11. Puede ser del color y la forma que tú quieras. Bajas las imágenes base, las editas y las subes. Luego utilizas las direcciones nuevas que obtengas.

    ResponderEliminar
  12. Excelente, me gusto mucho este menu, en un futuro muy cercano lo pondre en mi blog ^^!
    ---
    Oloman te molesto nuevamente u.u - si entras en mi bog http://xdarkblood.blogspot.com/ - al final dice:

    1203 Discos
    26 Comentarios

    ...bueno si te das cuenta esta como desordenado, y me gustaria que me dijieras como puedo encerrar eso en un solo cuadro osea que queden las dos cosas juntas encerradas en cuadro ^^ ...

    Saludos y Muchas Gracias

    ResponderEliminar
  13. Feuer, para formatear eso, lo más fácil es hacer una tabla y meter en cada celda una parte del código. Aquí se explica un poco más la idea.

    ResponderEliminar
  14. y si quiero agregar mas botones¿?

    ResponderEliminar
  15. Pues como el estilo es el mismo, sólo tienes que añadir enlaces. Para ello, antes de </ul>, insertas más elementos de lista (li):
    <li><a href='URL_ENLACE4'>ENLACE4</a></li>
    <li><a href='URL_ENLACE5'>ENLACE5</a></li>
    <li><a href='URL_ENLACE6'>ENLACE6</a></li>
    etc...
    </ul>

    ResponderEliminar
  16. Estoy aprendiendo como hacer estas coas, pero no sé si es cuestión de costumbre o práctica, pero me está costando bastante....

    ResponderEliminar
  17. Es cuestión de seguir las instrucciones. Con el tiempo y la práctica podrás hacer variaciones sobre lo explicado.

    ResponderEliminar
  18. como hacerlo en blogger?

    ResponderEliminar
  19. Tal y como se explica Miten. De hecho las referencias que doy para insertar el código, son las de una plantilla Blogger.

    ResponderEliminar
  20. excelente tutorial master pero me gustaría saber si sabes como hacer unos menús mas personalizados o las técnicas que se usan para hacerlos, tengo mucho buscando la manera pero no la encuentro me podrías ayudar en eso :) mira estos son ejemplos de los menús que te menciono

    http://www.csstea.com/css-gallery-news-and-resources/264-120-excellent-examples-of-css-horizantal-menu.html

    ResponderEliminar
  21. ¡Uff! Esos son de lujo. Me gustan casi todos y la mayoría de ellos creo que se hacen "a mano".

    Es decir, los menús como el que se explica aquí, son para programar una vez y ya sólo cambiar el nombre del enlace las siguientes ocasiones.

    En estos que me enlazas, el componente gráfico hace que haya que trabajar más.

    Muchos son simplemente un menú "normal", con un fondo muy currado (por ejemplo 1 á 6 del enlace que me pasas). Si además, las letras del enlace las sustituyes por imágenes (1, 7, 8...) pues ya tienes resultados más sofisticados.

    En otros casos, seguramente se trata de hacer un fondo gráfico para cada botón individualmente, que concuerde con el fondo de la zona dónde esté y mediante el hover, cambiar el fondo para que parezca que se mueva. Siempre imágenes.

    Te copio el enlace Smark. Gracias.

    ResponderEliminar
  22. hola oloman tengo una preguntita es algo muy fuera de este tema, ¿como puedo cargar informacion de una base de datos a una caja de texto?

    La caja de texto la tengo en google sites y la base de datos (access 2007) esta en mi maquina.

    Saudos

    Dania

    ResponderEliminar
  23. Lo de las bases de datos es una cosa que no he tocado nunca, Nanis. No te puedo ayudar.
    De cualquier forma ¿como vas a volcar varios campos de varios registros en una sola caja de texto? Quedará todo muy raro ¿no?

    ResponderEliminar
  24. Me quedo bien...

    pero tengo un problema... los que pasa es que quiero centrar el menú, entonces cambio "float:left; " por "float:center; ", que "creo" seria lo obvio, pero cuando guardo la plantilla, se desbarata toda la plantilla :S ...(tengo una minima de tres columnas).

    Ojalá, me puedas ayudar.... gracias.

    ResponderEliminar
  25. Hola Kuston. Para centrar el menú completo, tendrías que eliminar el FLOAT y utilizar MARGIN:0PX AUTO;

    ul#main-nav {
    margin:0px auto;
    padding:0px;
    width:100%;
    }

    ResponderEliminar
  26. gracias por contestar...
    pero sigue mi problema, no se centra mi menu, no se que hice mal, pero te dejo una imagen: http://img38.imageshack.us/img38/2193/20100201235854.png

    ResponderEliminar
  27. Puede ser porque la capa anterior esté flotando.

    Podemos probar dos cosas o bien incluyes un
    display:block;
    en el mismo selector que antes comentaba, o bien editas la plantilla e incluyes delante de
    <ul id='main-nav'>
    un
    <div style='clear:both;'>

    A ver si hay suerte porque nunca me acuerdo del todo de estas cosas.
    .

    ResponderEliminar
  28. muchisimas gracias!! estoy decorando mi blog gracias a tu blog!! y mi última modificación han sido estas pestañas!!

    de nuevo gracias!

    ResponderEliminar
  29. Como podria hacer para que esto se despliegue hacia arriba y no hacia abajo??

    Gracias

    ResponderEliminar
  30. Para eso, el truco es fijarse en cómo se coloca el background que forma los botones. En lugar de posicionar ambos en la parte superior (top), tendrías que posicionarlo en la parte inferior (bottom). También habría que cambiar el padding del texto, pero eso ya se indica cómo hacerlo en los comentarios del código.

    ResponderEliminar
  31. con esto tengo mucha creatividad pero hay una cosa que no entiendo. Cuando pongo más de cinco o seis botones, no funciona al pasar mi curosr i solo me van algunos al cabo de un rato. Me entiendes merci de todas formas!

    ResponderEliminar
  32. En un principio, eso que dices no debería pasar siempre que hubiera espacio suficiente para todos los botones. El problema es que no lo tienes instalado y que así no puedo ver qué es lo que ocurre exactamente.

    ResponderEliminar
  33. los botones me aparecen todos ,espacio ay, se ven todos bien lo que pasa és que conforme voy poniendo mas botones los más reciente se ven la otra imagen que pongo para cuando el cursos este encima i otras no lo hacen. Pero es que aparte los botones que tengo puesto en otras zonas por ejemplo poongo una barra de menus en el lateral i inserto los botones, estos que pongo ahora me funcionan però alomejor entonces los de la cabecera dejan de mostrar la segunda imagen al pasar el curosr. No se si me entiendes

    ResponderEliminar
  34. Lo he probado en otras computadoras i pasa lo mismo i incluso peor.

    ResponderEliminar
  35. Insisto. Necesito que lo montes tal cual lo haces aunque sea en un blog de prueba, para poder ver qué es lo que sucede.

    ResponderEliminar
  36. Hola oloman, una cosa aparte del tema: ¿Como haces para que cada vez que señales con el puntero "algo" tenga un cuadro amarillo con texto?
    Como este: http://1.bp.blogspot.com/_m9myEUCycrI/TJS8-HV-iUI/AAAAAAAAAcI/2IBRh_yuzCA/s1600/cuadroama.png

    ResponderEliminar
  37. Facundo, ya te contesté en otro post dónde hiciste la misma pregunta ;)

    ResponderEliminar
  38. Si, disculpa es que no me acuerdo en que post comente lo mismo. ¿Me puedes decir?

    ResponderEliminar
  39. Además de en este de aquí, también en este y en este.

    En el último, que fue tu primero, tienes la contestación.

    Lo que deberías hacer es pinchar en "Suscripción por correo electrónico" cuando hagas una pregunta. Así te saldrá un aviso automático en tu email con enlace al comentario cuando alguien conteste. :D

    ResponderEliminar
  40. Saludos, ante todo muchas gracias por tantas ayudas, te pregunto si se puede quitar el fondo negro por un fondo transparente, ya que subí las imágenes en png, pero el fondo sigue saliendo negro. Gracias

    ResponderEliminar
  41. No hay problema. Puedes poner el fondo que quieras, bien sea un color plano o una imagen. Lo único que tienes que cuidar es el formato de la imagen que formará las pestañas. Como intento explicar en el post, o usas una imagen en la que se completen los huecos "no dibujados" con el color de fondo, o directamente usas un formato que permita transparencia, como es el caso de GIF y PNG.

    ResponderEliminar
  42. Gracias por tu respuesta ya me funciono, ahora tengo una pequeña duda, como le puedo quitar o hacer transparente un pequeño separador negro entre cada botón del menú. Para que me entiendas mejor mira este es el blog: http://pep-estanislaozuleta.blogspot.com/
    De nuevo muchas gracias y disculpa las molestias.

    ResponderEliminar
  43. Esa línea la mete el estilo genérico para enlaces dentro de listas. En...

    ul#main-nav li a

    ...añade un border:0px; y creo que se quedará todo el problema resuelto.

    ResponderEliminar
  44. Buenas! Me funcionó de maravilla el menú. Mi única consulta consiste en que si es posible colocar una imagen diferente para cada una de las pestañas.

    Saludos!

    ResponderEliminar
  45. No con este sistema Tumacher. Cada pestaña es un elemento de lista y con este código, TODOS los elementos tienen el mismo fondo. Tendrás que buscar otra cosa si lo quieres hacer con imágenes distintas.

    ResponderEliminar
  46. Hola! Creo que mi duda está dentro de este post... He puesto unas pestañas en mi blog, pero se ven semi-translúcidas y no se leen bien con el fondo. Me gustaría ponerlas de un color opaco, o no tan transparente, pero soy incapaz! He probado mil cosillas que voy viendo por tu blog y nada... si cambio el color aparece una barra opaca por detrás, y eso queda peor aún...

    ResponderEliminar
  47. Parece que lograste solucionarlo antes de que yo pudiera atender este comentario, La ladrona de libros. Ahora mismo tienen un fondo de color plano, sin transparencia.

    ResponderEliminar
  48. Gracias por tu respuesta Oloman, pero lo cierto es que no lo conseguí, igual no me expliqué en el pregunta, me refería al color del fondo que está detrás de las pestañas. No consigo ponerlo transparente, y por eso tengo que buscar fondos de página de colores similares al de las pestañas, para que no se note... :S Debe haber alguna forma de poner ese fondo de atrás transparente.

    ResponderEliminar
  49. A ver si es esto lo que quiers Ldrona de Libros:

    .tabs-inner .widget ul {opacity: 0.6;}

    ResponderEliminar
  50. Saludos Oloman. "Proyecto Educativo Popular Estanislao Zuleta", hizo una pregunta respecto a: COMO PONER LA BARRA NEGRA TRASPARENTE. Me gustaría, si puedes, que hagas una explicación mas detallada ya que soy nuevo en esto del "BLOG".
    Aprovecho para felicitarte... y de paso te dejo mi blog para futuras consultas de mi parte.
    http://detrasdelaverdadss.blogspot.com/

    ResponderEliminar
  51. Sandy, el tuyo no es el mismo caso exactamente. Prueba a añadir a ul#main-nav una línea más con background: transparent;

    ResponderEliminar
  52. EXCELENTE !!!
    Antes había intentado con la palabra "transparent".Quite la parte que dice: "margin:0px;
    padding:0px;" y la sustituí por "background: transparent;"
    Ahora se aprecia una diminuta linea negra. ¿que podría hacer en ese caso para eliminar eso?
    Y gracias por contestarme, tu blog me esta ayudado mucho !!!

    ResponderEliminar
  53. Sandy, a ver si en tu plantilla tienes una clase llamada

    .tabs-inner .widget li a

    Si es así, la raya sale por la última propiedad:
    border-right: 1px solid #000000;

    Si la quitas, la rayita desaparece. Lo que no sé es si esa línea sirve para algo más, pero puedes probar y si te estropea algo, la repones.

    ResponderEliminar
  54. Aparece la parte que dice: ".tabs-inner .widget li a" pero no aparece esa propiedad. De todos modos intentare otras cosas, sino tendré que dejarlo así. Muchas gracias por tu tiempo !!!!

    ResponderEliminar
  55. Sandy, quizás es una propiedad heredada y por eso yo lo veo así, pero no hay problema. Si no viene en lugar de quitarla, fuerza la desaparición del borde incluyendo en ella un border:0;

    Si no funciona puedes forzar un poco más poniendo en lugar de eso, border:0 !important;

    ResponderEliminar