Mobily Blocks es un menú creado con un plugin de jQuery y como podemos ver ademas de su vistosidad tiene una bonita animación que yo he aprovechado sustituyendo las imágenes por unas acordes para estas fechas.
Antes de decidirse por este menú debemos de tener en cuenta el espacio que vamos a necesitar y la utilidad que deseamos darle ya que dependiendo de eso serán las imágenes que le añadiremos.
Buscamos
]]></b:skin> y justo antes añadimos los estilos del menú
.nature {
display:block;
width:150px;
height:150px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG7pJlw6Zlw85YUy1g6uLWXnEZK28cZ92H5Ka_A3AFo13G3XjRhYXmJ_H78F3W0xlzPWn1JE9-DdlfjljZrxcJBgbQpdQCvWHettNrfkXJ5xJ_GBbB9FHW5JazrN5xbh390SLNEjrXaPc/s1600/1--.png) no-repeat;
cursor:pointer;
position:relative;
}
.nature {
clear:both;
margin:0 auto;
z-index:2;
}
ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}
ul.reset li {
position:absolute;
}
ul.reset li a {
outline:none;
}
a img {
border:none;
}
Después nos situaremos justo antes de
</head> y añadiremos la librería que es la siguiente línea en rojo.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
Si ya la estamos utilizando omitimos ese paso y procedemos a copiar el contenido de
este archivo para pegarlo justo después de la librería jQuery. Y por último editamos un nuevo gadget de html y en su interior añadimos lo siguiente:
<div class="nature">
<ul class="reset" style="display: block; z-index: 50; opacity: 0;">
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKjA3A3ojMPSHIMdgPLWpuey5kr0i5PtCKOlXFpZwyeLMYMTrlkS8SJgowD3uK8ihGtJHe3JWd_5Cg6WrSPqXCbzFz5cS9Q9kHUrspnOdCfsnNil5XsPeXjVgXzORiYaZ6KkIpcAiH_D8/s1600/2-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV998hyphenhyphencdkXTemZjWM2Vg3SDALU-sVuV9NdUs1hALIPN5tsjYcCv5B5LMJ3PIGCsYUZxclWUpDOkryr62kIh91bJyvy_xLdaJskz82SZqegDrykzJOWymKLKXw4QgFixgzcvg4A78yyHw/s1600/3-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6wC3LH0U-fYJlnrZRyLIRlrn3SlwN-REx80zi8WXvgM0P1a02qZnzOZB_gtztdcbGz0PD7BegPPi33KA34m8WI4W1XbbpI8bEPTaDIIUqiUFQDyvvHoY84Dl6PmrXsv4a0Y30T1KRQiI/s1600/10-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZiK4NsN0u3CxWUPPrcx_kykWsXEIeUGZ5uDg8Htztygla-dbk0u-Ja5UB8ANm-Mt-Wxt5CQiAD1s3Vth82dry7BskHMm8JscNOJmudPZWxh9SWYB9fM8ncUeo5wU15QdCuC4-Fe1xRXc/s1600/5-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 50;">
<a href="#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ3gf6xJIaJN8phepOw8ahLrFR-0i_ZGC8gVyiZ7f5fzoBeR6v70Lr9ls-MrCh7soexxT9Gn9m0nCTJs_jtc5J4kMZMjX5co0OYSm_Cskt0R8cXOnh3_nsIJuV1zGt1gAz3pGKJ6guP7I/s320/6-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiowqIGOwIDhQbEeeENVU6jKZTgzCFVMzxogZCo02z2PL7ucTcBH3-b2eH3ZsvhXkqPQH0MPd5JDQg5DlFzS_2D8ek7P3qfCVl3AQvZC9Bxl3w0XBAlE7QsJkj4nYJV4mlYA0t1xkj6uFI/s1600/1-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilvVbaxvYL5IZmE30xFp44tbEhlt4qWmfBgxJUhdYvUrluWljI73zRDd0L7OWZ586vNzMx4luCqNssnZwOHaES7ExL09QgunIDnnX0u7qAALc46-GsDSy-zBjUyIxdF5Sa0p7fziLir1E/s1600/8-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0rvLJt-VY4P9dzeYLfwwkG-yUYw1TYeSaOtyRq28y5PVANvx5UmZq5xHBgl-c3PII5sfedlQm3JbyapuV891Ebe9Jac_h1kzFenxNwIgMDZUHd4iDDiQSos3cKQv65ePLNs62jicYvR8/s1600/9-.png" />
</a>
</li>
</ul>
<a class="trigger" style="display: block; position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%;"></a>
</div>
En ese código estamos añadiendo las imágenes que las podemos sustituir por otras teniendo en cuenta que miden 150x150 y que son en formato png.
Para añadir la url de los enlaces o los sitios que deseamos enlazar debemos sustituir la almohadilla
<a href="#"> por la url de cada enlace.
Todo tuyo
Manu.
