JMiur [E]

Esta es una de estas cosas que por ahora no funcionará en Internet Explorer pero no importa, igual vale la pena verlo.

Se trata de hacer un breadcrumbs, es decir, mostrar la ruta de la página web donde nos encontramos:

Inicio > Año > Mes > Título de la entrada
Inicio > Etiqueta > Título de la entrada

La idea de css-tricks.com es hacer eso agregándole alguna característica gráfica especial, sin imágenes y utilizando sólo CSS para crear los triángulos.

El HTML es una simple lista con una clase y en cada item, un enlace:
<ul class="breadcrumb">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Categoría</a></li>
  <li><a href="#">Blogger</a></li>
  <li><a href="#">El título de esta entrada</a></li>
</ul>
El resto es el estilo:
<style>
.breadcrumb { /* el rectángulo con la lista */
  list-style: none;
  margin: 0;
  overflow: hidden;
}
.breadcrumb li { /* cada item de la lista */
  float: left;
}
.breadcrumb li a { /* cada item es un enlace */
  color: #FFF;
  display: block;
  float: left;
  font-family: Helvetica;
  font-size: 18px;
  text-decoration: none;
  padding: 10px 0 10px 50px;
  position: relative; 
  /* el color de fondo del item que está a la izquierda */
  background-color: #A0A9B1;
}
.breadcrumb li a:after {
  content: " "; 
  display: block; 
  left: 100%;
  height: 0;
  margin-top: -50px; 
  position: absolute;
  top: 50%;
  width: 0; 
  z-index: 2;
  /* esto creará el primer triángulo */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #A0A9B1;
  border-top: 50px solid transparent;
} 
.breadcrumb li a:before { /* el siguiente enlace */
content: " "; 
  display: block; 
  height: 0;
  left: 100%;
  margin-top: -50px; 
  margin-left: 1px;
  position: absolute;
  top: 50%;
  width: 0; 
  z-index: 1;
  /* el color de fondo del segundo item */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #DEF;
  border-top: 50px solid transparent;
}
/* y los siguientes */
.breadcrumb li:first-child a {padding-left: 10px;}
.breadcrumb li:nth-child(2) a {background-color: #808991;}
.breadcrumb li:nth-child(2) a:after {border-left-color: #808991;}
.breadcrumb li:nth-child(3) a {background-color: #606971;}
.breadcrumb li:nth-child(3) a:after {border-left-color: #606971;}
.breadcrumb li:nth-child(4) a {background-color: #404951;}
.breadcrumb li:nth-child(4) a:after {border-left-color: #404951;}
.breadcrumb li:last-child a {
  background: none repeat scroll 0 0 transparent !important;
  color: #DEF;
  cursor: default;
}
/* el efecto hover */
.breadcrumb li:last-child a:after {border: none;}
.breadcrumb li:last-child a:before {border: none;}
.breadcrumb li a:hover {background-color: #501921;}
.breadcrumb li a:hover:after {border-left-color: #501921 !important;}
</style>

6 comentarios:

LNR  

COPADO!! se puede hacer mas chico cada triangulo?

Responder
JMiur  

Sí. Modificando las propiedades CSS.

Responder
LNR  

gracias pero lo intente agregar y no me andubo
a donde pongo los códigos html?

Responder
JMiur  

El CSS entre etiquetas style antes de </head> o junto con el resto, antes de </b:skin>

El HTM, donde quieras que se muestre.

Responder
La Cajita Felix  

COOL!!! GRACIAS AMIGO
Otra cosa.

Se podra poner con un HTML condicional el menu que tengo en mi blog asi se ve en los post tambien?

Responder
JMiur  

Imagino que sí pero desconozco que quieres hacer con exactitud.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR