Maravilloso men?? Pretty Simple

  • septiembre 28, 2010

 VER MEN?? AQU??


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
Un buen truco de un precioso meno para blog
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.

Fuente

No Comments Found