Menú horizontal tipo listón

Esta es una forma curiosa y sobre todo original de lucir las secciones con las páginas independientes de Blogger. El resultado es muy estético. Este truco ha sido visto en Ciudad Blogger.

Cortesía de Ciudad Blogger

  • Ubicación: plantilla.

1. Se empieza buscando esta línea ]]></b:skin> para pegar el siguiente bloque justo antes: 

/* Menú Listón
----------------------------------------------- */
#menuListon:after, #menuListon:before {
content: '';
position: absolute;
}

#menuListon {
height:25px; /* Alto del menú */
text-align: center;
position: relative;
margin: 0 -30px 5px -30px;
padding: 10px 0;
background: #e5592e; /* Color del listón */
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
box-shadow: 0 2px 0 #bbb;
}
#menuListon:before, #menuListon:after {
border-style: solid;
border-color: transparent;
bottom: -10px;
}

#menuListon:before {
border-width: 0 20px 10px 0;
border-right-color: #8C3115; /* Color de la sombra del doblez */
left: 0;
}

#menuListon:after {
border-width: 0 0 10px 20px;
border-left-color: #8C3115; /* Color de la sombra del doblez */
right: 0;
}

#menuListon ul {
margin-top: 0px;
}

#menuListon li {
list-style: none;
display: inline;
padding-right:20px;
}
#menuListon li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: inline;
text-decoration: none;
color: #f0f0f0; /* Color del texto */
font-size: 18px; /* Tamaño del texto */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}

#menuListon li a:hover {
font-size:20px; /* Tamaño del texto al pasar el cursor */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}


Editamos parámetros de colores... Para ajustar el listón al blog, modificar el parámetro margin, ambos -30px y marcados en rojo. Cuanto más se rebaje el número, más se reducirá el listón, y viceversa.

 2. Seguidamente, buscamos este otro bloque...
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>
</b:section>

...y pegamos justo debajo el menú:

<div id='menuListon'>
<ul>
  <li><a href='URL del enlace'> Pestaña 1</a></li>
  <li><a href='URL del enlace'> Pestaña 2</a></li>
  <li><a href='URL del enlace'> Pestaña 3</a></li>
  <li><a href='URL del enlace'> Pestaña 4</a></li>
  </ul>
</div>

Si queremos añadir un icono a la pestaña, debemos poner este código:

<img src="URL IMAGEN"/></a>

Así que, el código final quedaría así, con el icono:

<li><a href='URL del enlace'><img src="URL IMAGEN"/></a> Pestaña 1</a></li>

Solo nos queda cambiar lo que está en rosa por las urls de las páginas, y lo de verde por el nombre de las secciones del menú.

Etiquetado como: ,