Maravilloso menú Pretty Simple

Este bonito menú trabaja con jQuery y es creación de Codrops está adaptado a menor tamaño que el original para poder mostrarlo en esta entrada pero las explicaciones nos darán como resultado un menú de 800px de ancho y 300px de alto que son las medidas de las imágenes.

Ver demo original del autor en Codrops

Los estilos los añadiremos situándonos en plantilla edición de HTML justo después de la etiqueta ]]></b:skin>

<style type='text/css'>
.rotator{
background-color:#111;
width:800px;
height:300px;
margin:0px auto;
position:relative;
font-family:&#39;Myriad Pro&#39;,Arial,Helvetica,sans-serif;
color:#fff;
text-transform:uppercase;
letter-spacing:-1px;
border:3px solid #f0f0f0;
overflow:hidden;
-moz-box-shadow:0px 0px 10px #222;
-webkit-box-shadow:0px 0px 10px #222;
box-shadow:0px 0px 10px #222;
}
.rotator ul{
list-style:none;
position:absolute;
right:0px;
top:0px;
margin-top:6px;
z-index:999999;
}
.rotator ul li{
display:block;
float:left;
clear:both;
width:260px;
}
.rotator ul li a{
width:230px;
float:right;
clear:both;
padding-left:10px;
text-decoration:none;
display:block;
height:52px;
line-height:52px;
background-color:#222;
margin:1px -20px 1px 0px;
opacity:0.7;
color:#f0f0f0;
font-size:20px;
border:2px solid #000;
border-right:none;
outline:none;
text-shadow:-1px 1px 1px #000;
-moz-border-radius:10px 0px 0px 20px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:20px;
border-top-left-radius:10px;
border-bottom-left-radius:20px;
}
.rotator ul li a:hover{
text-shadow:0px 0px 2px #fff;
}
.rotator .heading{
position:absolute;
top:0px;
left:0px;
width:500px;
}
.rotator .heading h1{
line-height:52px;
text-shadow:-1px 1px 1px #555;
font-weight:normal;
font-size:46px;
padding:20px;
}
.rotator .description{
width:500px;
height:80px;
position:absolute;
bottom:0px;
left:0px;
padding:20px;
background-color:#222;
-moz-border-radius:0px 10px 0px 0px;
-webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
opacity:0.7;
border-top:2px solid #000;
border-right:2px solid #000;
}
.rotator .description p{
text-shadow:-1px 1px 1px #000;
text-transform:none;
letter-spacing:normal;
line-height:26px;
}
a.more{
color:orange;
text-decoration:none;
text-transform:uppercase;
font-size:10px;
}
a.more:hover{
color:#fff;
}
</style>

En el mismo sitio y a continuación añadiremos el contenido del siguiente archivo

Si ya estamos utilizando jQuery para algún otro efecto omitimos el siguiente paso, de utilizarlo por primera vez añadiremos también lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Cada presentación contiene un bloque y es la parte que debemos modificar, que serán el título de la pestaña del menú, el título del contenido, la descripción, la url de la imagen y el enlace con el texto "Sigue..." es algo así:

<li><a href="rot4">Título-pestaña-1</a><div style="display:none;">
<div class="info_image">url-imagen-1</div>
<div class="info_heading">
Texto-contenido-1</div>
<div class="info_description">
Aquí texto descripción1
<a href="#" class="more">Sigue...</a></div>
</div>
</li>

Y el código completo para el menú que añadiremos en un gadget de HTML sería el siguiente:

<div class="rotator">
<ul id="rotmenu">
<li><a href="rot1">Título pestaña-1</a>
<div style="display:none;">
<div class="info_image">url-imagen-1</div>
<div class="info_heading">
Texto-contenido-1</div>
<div class="info_description">
Aquí texto descripción 1
<a href="#" class="more">Sigue...</a>
</div>
</div>
</li>
<li><a href="rot2">Título-pestaña-2</a><div style="display:none;">
<div class="info_image">url-imagen-2</div>
<div class="info_heading">
Texto-contenido-2</div>
<div class="info_description">
Aquí texto descripción 2
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot3">Título-pestaña-3</a><div style="display:none;">
<div class="info_image">url-imagen-3</div>
<div class="info_heading">
Texto-contenido-3</div>
<div class="info_description">
Aquí texto descripción 3
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot4">Título-pestaña-4</a><div style="display:none;">
<div class="info_image">url-imagen-4</div>
<div class="info_heading">
Texto-contenido-4</div>
<div class="info_description">
Aquí texto descripción 4
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot5">Título-pestaña-5</a><div style="display:none;">
<div class="info_image">url-imagen-5</div>
<div class="info_heading">
Título-contenido-5</div>
<div class="info_description">
Aquí texto descripción 5
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
</ul>
<div id="rot1">
<img src="url-imagen-1" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1>
</h1>
</div>
<div class="description">
<p>
</p>
</div>
</div>
</div>

❋ Título pestaña-1, 2, 3, 4, 5 escribimos el título del contenido.

❋ url-imagen-1, 2, 3, 4, 5 pegamos la url de la imagen tal y como la copiamos sin añadir la etiqueta de     imagen.

❋ Texto-contenido-1, 2, 3, 4, 5 Escribimos la descripción que se mostrará después del título.
❋ Sigue... lo podemos sustituir por cualquier otro texto.
❋ Hay una parte que dice:

<a href="#" class="more">Sigue...</a>

esa parte la podemos utilizar como enlace, si por ejemplo deseamos enlazar una entrada o una página estática copiamos la url que deseamos enlazar y la pegamos sustituyendo la almohadilla. De esa forma al marcar sobre "Leer más... nos llevará al sitio que enlazamos.