47

Menu de pestañas invertidas

Este es el tipo de menú que usé durante mucho tiempo en El Escaparate y que podéis ver debajo de las etiquetas al pie del header.
Este menú esta sacado de Dynamic Drive, aunque con algunas modificaciones en cuanto a color, tipo de texto, etc. que pueden hacerse sin problemas en el código CSS del menú.
En Dynamic Drive, como podéis ver en la imagen, han usado dos colores: #8b0000 y #d50509, así que para cambiarlos solo tenéis que localizar esos códigos en el CSS del menú y sustituirlos por el código de vuestros colores.


[1] En primer lugar nos descargamos estas dos imágenes a nuestro PC (botón derecho del ratón, guardar como) y las subimos a nuestro propio alojamiento para más tarde usar su url en el código del menú:



Hacerlo así, y no copiéis la url de mis imágenes, pues no sería la primera vez que por problemas de ancho de banda he de trasladar imágenes a otro alojamiento y si eso pasase, el menú se desconfiguraría.


[2] Colocamos ahora el código CSS del menú justo antes de </head>:

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#invertedtabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}
#invertedtabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em; /*margin between menu and rest of content*/
padding:0;
list-style:none;
}
#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height: 1.5em;
}
#invertedtabs a{
float:left;
color: white;
background: #8b0000 url(media/color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}
#invertedtabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}
#invertedtabs a span{
float:none;
}
#invertedtabs a:hover{
background-color: #d50509;
}
#invertedtabs a:hover span{
background-color: #d50509;
}
#invertedtabs #current a, #invertedtabs #current span{ /*currently selected tab*/
background-color: #d50509;
}
#invertedtabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #8b0000;
border-bottom: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}
</style>

Es aquí donde tendremos que sustituir: media/color_tabs_left2.gif y media/color_tabs_right2.gif por la url de las imágenes que hemos descargado antes, fijaros que no es demasiado dificil saber en que lugar va cada una, pues la terminación de su url será la misma que la del ejemplo.

Cambiamos también aquí el código de los colores como ya os explicaba antes, por los vuestros.

[3]
Colocamos ahora el código necesario para mostrar nuestro menú y donde vamos a construir los enlaces. Podemos ponerlo directamente en un nuevo elemento (Gadget) HTML y arrastrarlo a debajo de la cabecera o, como en mi caso, colocarlo en el "crosscol".


En la entrada "Aprovechando espacios en la plantilla (crosscol)", podéis ver como dar uso a la zona del "crosscol".

<div id="invertedtabsline">&nbsp;</div>

<div id="invertedtabs">
<ul>
<li style="margin-left: 1px"><a href="http://elescaparatederosa.blogspot.com" title="Inicio"><span>Inicio</span></a></li>
<li><a href="mailto:lejaniaimposible@hotmail.com" title="Envia un email"><span>Contacto</span></a></li>
<li><a href="http://feeds.feedburner.com/blogspot/hnBy" title="Suscribete al Escaparate"><span>Suscribe Feed</span></a></li>
<li><a href="http://www.blogger.com/profile/06743611108067453905" title="Sobre mi"><span>Sobre mi</span></a></li>
<li><a href="http://elescaparatederosa.blogspot.com/search/label/?max-results=999" title="Ver todas las entradas"><span>Ver todas las entradas</span></a></li>
</ul>
</div>
<br style="clear: left"/>

Por supuesto tendréis que cambiar en este código mis datos (los he resaltado en negrita) por los vuestros.

Entradas Relacionadas:

47 comentarios:


MINDistortion

Rosa quise hacer esto y le doy vista previa no sale

sera x q ya le puse el
"Menu barra superior con buscador incluido"?

y tambien dime donde esta para poner entradas relacionadas al final del post ese tambien me intereza xD espero q tengas time gracias x too a x ti mi blog ta mas nice xp

FiX

Hola Rosa hermosa!!! una vez mas, yo aqui haciendo consultas :(

esta vez para preguntarte como puedo hacer para que las imagenes que subo a mi blog, mediante la herramienta de blogger, se abran en una nueva pestaña.

Toneladas de besos y muchas gracias por adelantado :D

Ah, y mi pagina ya cumplio sus 3000 visitas, estoy re feliz!!!!

Fix

Dani Navedo

Hola.

Aquí un futbolero aprendiendo trucos gracias a este magnífico blog.

Le he hechado un primer vistazo general a las entradas antiguas, pero ahora miraré con mas calma para aplicar algunos trucos a mi blog.

Te agrego a mi lista de blogs amigos, mas concretamente a mi sección "de todo un poco", te agradecería que me agregaras.

Un saludo desde El fútbol es injusto!!

Anónimo

MINDistortion , ¿como que le das a vista previa?

¿No has colocado el código del menú (el último) en un elemento HTML?

No tiene que ver con la barra-menú, este debería salir igualmente...

Anónimo

F ! X , una vez subida la imagen a la entrada, en la pestaña "edición html" la imagen se verá como código, dentro de ese código hay una línea <a href= que será algo así:
<a href="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SO5qSIikXuI/AAAAAAAAEZs/oRc2v-n0-Cs/s1600-h/rssqo0nj8.jpg"

Pega a continuación de eso un target="_blank" sin separación entre los dos, así:

<a href="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SO5qSIikXuI/AAAAAAAAEZs/oRc2v-n0-Cs/s1600-h/rssqo0nj8.jpg"target="_blank"

Creo que con eso bastará.

Anónimo

Navedo , gracias, aunque no hago intercambio de enlaces, a los blogs que enlazo los he elegido yo por diferentes razones, como es su temática, o mi amistad con sus dueños, no porque ellos me enlacen a mí...

Miraré tu blog no obstante y muchas gracias!

Unknown

Hola!
disculpa mi insistencia e ignorancia, pero esos codigos donde me tengo q meter?? eso es lo q no e entendido...mil gracias!!

Rosy
Chile!

Mary Lovecraft

Hola Rosita linda!!

muy interesante esta entrada. Estuve buscando algo así cuando estaba dándole forma a mi blog 'Alter~nativa'( http://wwwalter-nativa.blogspot.com ) y bueno, al final puse un menú normal siguiéndote a tí por otro lado y que no quedó nada mal!!
pero nunca está demás saber que ahora cuando lo necesite, podré crear éste o modificarl lo que ya tengo a uno como éste, en cualquiera de mis blogs.

Muchas gracias!!

un besito y que pases buena noche ;)

Jony

HOLA GUAPA..!
Sabrias si hay alguna forma de que para entrar en mi blog, pudiera poner una contraseña de usuario para que accedieran sólo a él los que se hubieran registrado?-
o algo por el estilo?
Muchas gracias Rosa

Anónimo

Rosy , pues donde va a ser, dentro del código de tu plantilla, en el panel pincha en la pestaña de "Edición de html" allí está todo el código de tu plantilla, vas siguiendo las indicaciones de la entrada y ya...

Anónimo

Jony, contraseña exactamente no, pero si puedes hacer que solo sea para los lectores que tu invites,para eso ve a tu panel Configuración - pestaña "Permisos" y allí verás más o menos claro lo que digo...

Anónimo

Hola, gracias por tan excelente blog, lo estuve revisando y encontre varios templates que ya descargue..... No hay muy buenos contenidos en Internet al respecto, el tuyo es una excepcion. Saludos

Anónimo

Saludos Rosa, muy bueno y útil el post :D

Te quería preguntar, cómo puedo hacer que el menú esté un poco más arriba, pegado a la imagen de cabecera?

De antemano ¡GRACIAS!

Saludos desde Córdoba

PD: Te dejo la dirección de mi blog, por si quieres ver a qué me refiero; se muestra que entre la linea de las pestañitas y el borde de abajo del recuadro de la imagen de cabecera hay un espacio: http://davidtroyagalvez.blogspot.com

Anónimo

Davi's , esa distancia está marcada en tu cabecera:
#header-wrapper {
width:900px;
margin:0 auto 10px;
}

Reduce el valor en 10px por uno menor.

Anónimo

¡Mil gracias Rosa! :) Ya está cambiado y ha quedado así de bien -----> http://davidtroyagalvez.blogspot.com

¡Gracias!

Ahora tengo otra preguntilla... si puede ser :P Cómo podría reducir el ancho de la línea que hay arriba de las pestañas para que se ajustase al ancho de la cabecera?

Muchas Gracias :), sigo tu blog desde que comencé con mi blog. Para mí junto con vagabundia y Pizcos, los tres mejores ;)

¡Saludos!

Anónimo

Davi´s, en el código css del menú, exactamente en:

#invertedtabsline{

Pones en width en vez de 100% el mismo ancho que el de tu cabecera en pixeles, es decir, cambia 100% por 900px

Anónimo

¡Muchas Gracias Rosa!

Un saludo y seguiré visitando tu blog ;)

MINDistortion

rosa ya esto lo dejo pa mas adelante lo q si es q como le hago para q me salga entradas relacionadas asi como tu tienes al final de cada post

aparte no sale en mi blog "publicado por " y eso q lo tengo activado sera x q en mi blog tengo 5 personas que pueden postear?!

espero tu respuesta :P

MINDistortion

a verdad lo que me preguntaste ahi cuando te vas a edicion html
te da 3 opciones

borrar cambios - vista previa - guardar plantilla

cuando le daba en vista previa no salia esa barra salia lo mismo

xD

Anónimo

Min, mira aquí lo de entradas relacionadas:

http://elescaparatederosa.blogspot.com/2008/02/entradas-relacionadas.html

Para lo del publicado por, mira en tu plantilla con los elementos expandidos a ver si ves esto:

<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

Si no está, busca esta línea:
<p class='post-footer-line post-footer-line-1'>

Y pega debajo de ella ese código, USA VISTA PREVIA.

Anónimo

Hola Rosa ensayando el menú de esta entrada en mi blog de prueba, me sale en posición vertical, y no se como lograr que quede horizontal como el ejemplo.
te envié una imagen a tu correo para que la observes.
Gracias Rosa

Anónimo

Soliradidad, si has seguido las instrucciones correctamente, tendría que salir como debe, para eso está el css que es el que "ordena" que así sea...más no puedo decirte sin ver el blog donde lo has puesto y poder mirar el error.

PITU

hola rosa en la pestaña de mi entrada no esta para ver el codigo html, solo pone vista previa
y he pinchado encima de la imagen y he copiado la url de la imagen ¿se hace asi?

Anónimo

RAUL , supongo que dices después de haber subido la imagen a la entrada para conseguir su url...si es eso, si, lo has hecho correctamente.

S. C. P.

Hola, querida Rosa. Sabes que hasta ahora había usado el IE para todo, pero últimamente empecé a abrir más y más cosas con el Mozilla, y fíjate por donde vengo a descubrir recién hoy que tal como está ahora el menú, no se ven los botones hasta que no pasas por encima cuando uso FF. ¿Qué hago, mi querida Rosa, para que se vean igual que en el IE? Te doy la dirección del blog en el que me pasa eso:

http://blogdelasopa.blogspot.com/

Te agradezco mires un poquito a ver qué hago.
Gracias!!!
silvia

Anónimo

S. C. P. , es que nunca se ha visto correctamente...en IE tampoco se ve como tiene que verse.
Tienes colocadas las imágenes en el css con un montón de código innecesario y además html que ahí no puede ponerse.

Cuando tendría que ser algo como esto:
#invertedtabs a{
float:left;
color: white;
background: #8b0000 url('http://www.flickr.com/photos/silvia_carrero_parris/2962484549');
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}
#invertedtabs a span{
float:left;
display:block;
background: transparent url('http://www.flickr.com/photos/silvia_carrero_parris/2962484641');
padding:3px 9px 3px 6px;
}

O sea la url de la imagen simplemente, sin todo ese código que no se de donde ha salido...
Ojo, que las urls que he puesto las he sacado de tu código, pero tampoco se si son las correctas...pero supongo que te das cuenta de lo que quiero decir.

S. C. P.

Hola Rosa. Ya cambié el tramo de la plantilla por el que me dejaste, y cambié las url por las direcciones que corresponde. Ese montón de código estaba por yo haber seleccionado una de las dos opciones que te da flickr. Ya la cambié por la "corta". Pásate a ver si se vé ahora como corresponde.

Un besote y un abrazito

Anónimo

S.C.P. Podría quedarse así perfectamente desde luego no está mal, pero las imágenes transparentes tendrían que dar a cada rectángulo de enlace el aspecto de pestañas por abajo...no se porque no sale así.

David Gallardo

Hola Rosa. He incluido estas pestañas y todo funciona correctamente, pero tengo un tremendo lío con los colores. Al final lo he dejado todo con fondo blanco y que se vean las secciones como mal menor, pero me gustaría colorear los botones con algún color... ¿sabes cual parámetro tengo que modificar? Muchas gracias. Mi blog es
http://mercadeopop.blogspot.com/

Anónimo

galko, en "mercadeo pop" veo otro menú distinto a este...supongo que te has decidido por otro.

Anónimo

Querida Rosa he visto en tu blog de pruebas dos menús que me han interesado: menú uno y menú dos. No sé si en una próxima entrada vas a explicar como construirlos. Yo te estaría muy agradecido si así lo hicieras. Aprovecho para desearte lo mejor para el próximo año 2009, que todos tus sueños se cumplan.

Anónimo

Tito,si, estoy probandolos allí y voy a ir probando varios más, para publicar sucesivamente como hacerlos.

¡Gracias por tus deseos! Lo mismo deseo para ti:-L

Nathan yo

y un menu como mas adecuado con el color de mi blog no habrá

Anónimo

Global, en mis etiquetas arriba, hay una que dice "Menus" busca ahí entre las entradas.

Anónimo

Rosa... ehmm... para cambiar el color...? es que me lio con los números, no sé cual es cual :S

Anónimo

awixumayita,

#8b0000 color a la vista en #invertedtabs a{

#d50509 color al pasar el ratón en #invertedtabs a:hover{

Ahí se cambian los colores.

Auro

Rosa, ya he puesto este al final, y creo que ha quedado bastante bien, es raro lo del otro menú... sería por mi plantilla o algo, además, este queda con los colores a juego y todo!

Mil gracias!

Anónimo

Auro Pues me alegro mucho ;) y si, es raro lo del otro, tiene que ser que algún código se te escapó y produjo ese error...

Superito

Hola Rosa estoy usando este magnifico menu de pestañas invertidas, pero me gustaria saber si a este mismo diseño de menu se le puede añadir más subpestañas o submenus. Ya estube mirando el post de "MENU CON SUB-MENUS" pero me gustaria este diseño.

Gracias :)

Anónimo

Superito Supongo que sería posible añadir sub-menús, lo que ya no sería igual de fácil sería mantener la misma estética y que se viese igual en todos los navegadores...abría que modificar seguramente las imágenes, el CSS y demás...:S

Viviana

rosa:

esto me sirve para poner 6 botones independientes???... no se como explicarlo...

http://mamasybebesblog.blogspot.com

ahi debajo del baneer tengo los links pero sin imagenes... y yo quiero poner un boton x cada uno de esos links.

Anónimo

Viviana y Sofia Esto es un menú y lo que tu tienes una lista de enlaces en horizontal.
Te sirve pero tendrás que eliminar los enlaces que tienes para colocar este menú, luego a la hora de completar los campos del menú colocas los mismos datos que tenías en los enlaces...

Quizás te vendría mejor este otro sistema:

http://elescaparatederosa.blogspot.com/2008/02/aadir-un-men-bar-al-blog.html

Clara C. L.

Hola, Rosa!

Soy Clara (clara@crisalidaliteraria.com). Te dejé un par de mensajes con dudillas, concretamente, acerca de este menú...
¿Puedes revisar el correo a ver si llegó el mensaje y resolverme la duda?

Me explicaste como ajustar el tamaño de los botones al texto que contenían, pero se ajustaba "demasiado", y quería saber cómo ponerle un margen de unos 2-3 px para que no quedara tan apretado.

Y de paso, ¿cómo puedo centrar el menú?
He intentado cambiar "left" por "center" en varios parámetros, pero se me desbarata totalmente...

Un abrazo, Rosa, y gracias.
Clara.

Mi página, abajo.

Crisálida Literaria

Anónimo

Clara No se si me llegó o no, si es así, estate segura que ya lo he respondido... de hecho estoy ahora con algunos de ayer y de antes de ayer...

En esta parte:
#invertedtabs li{ prueba a colocar algún valor, no muy alto en padding:0;

En cuanto a centrarlo este tipo de menús, es complicado hacerlo con float, tendrás que tratar de hacerlo en el margi-left de #invertedtabs{ por ejemplo, a ver como resulta...

La verdad que no entiendo muchas veces porque elegís algo, como este menú por ejemplo, para luego modificarlo casi por completo...

Jennifer Delgado

Hola:
Gracias miles por este menu. Lo he utilizado en mi blog Rincon de la Psicologia y ha quedado muy bien. Si te pasas por alli veras que su estetica se debe mucho a los consejos y los trucos que das en este blog.
Desearia utilizarlo en otro de mis sitios pero resulta que al subirlo a un servidor adopto el color negro y no he podido cambiarle el color del background. Existe alguna forma de subir las imagenes como transparentes?
Disculpa mi inexperiencia.
Gracias otra vez

Anónimo

Jennifer La única manera es subirlas a un alojamiento que las guarde tal como están... yo he usado photobucket por ejemplo.

Jennifer Delgado

Gracias por el consejo. Lo intentaré con las nuevas pistas.

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S