Menu com galeria de imagens

E ai galera, hoje vou postar um menu com galeria de imagens. Você pode variar, usando como Slide ou só um menu estático ou fixo. Bom, aqui vai um exemplo:

DEMO

Bom, para criar um Menu desses é preciso JavaScript, CSS e HTML.

• Vamos começar pelo JavaScript:

Abra o Blogger > Design > HTML (Não é preciso Expandir Modelos de Widget).

• Acima da Tag </head>, vamos colocar o seguinte código:

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

<script type='text/javascript'>

$(document).ready(function()

{

$(&#39;.galleryImage&#39;).hover(

function()

{

$(this).find(&#39;img&#39;).animate(

{ width:140,

marginBottom:0,

marginLeft:0

}, 300);

},

function()

{

$(this).find(&#39;img&#39;).animate(

{width:100,

marginTop:0,

marginLeft:0

},300);

});

});

</script>

• Acima da Tag ]]></b:skin>, vamos colocar o seguinte CSS:

/* Gallery Container

----------------- */

.galleryContainer{

width: 500px; /*largura total*/

}

.galleryImage { /* imagens iniciais da galeria*/

 background-color:#333333; /* escolha aqui a cor do background */

 width:160px;

 height:160px;

 overflow:hidden;

 margin:0px;

 float:left;

border:3px solid #003333; /* escolha aqui a cor e largura da borda */

}

.info{

margin-left:5px;

margin-right:5px;

margin-bottom:0px;

font-family:arial; /* escolha aqui tipo de fonte do texto*/

padding:0px 0px 0px 0px;

}

.info h2{ /* títulos*/

color:#ccc; /* cor da fonte do título */

font-size:110%; /* tamanho da fonte do título */

}

.info p { /* texto da legenda*/

color:#fff; /* cor da fonte do texto */

padding:0px 0px 0px 0px;

font-size:80%; /* tamanho da fonte do texto */

}

.clear {

clear:both;

margin-top:5px;

}

• Agora vamos para o HTML. Escolha um Gadget no layout e coloque um HTML/JavaScript. Dentro dele você irá colocar o seguinte código:

<div class="galleryContainer">

<div class="galleryImage">

<img src="LINK-DA-IMAGEM" />

<div class="info">

<h2><a href="LINK-DA-POSTAGEM">Bleach</a></h2>

</div>

</div>

<div class="galleryImage">

<img src="LINK-DA-IMAGEM" />

<div class="info">

<h2><a href="LINK-DA-POSTAGEM">TITLE</a></h2>

</div>

</div>

<div class="galleryImage">

<img src="LINK-DA-IMAGEM" />

<div class="info">

<h2><a href="LINK-DA-POSTAGEM">TITLE</a></h2>

</div>

</div>

</div>

• Se você quiser efeito Slide é só colocar: <marquee>Código-HTML</marquee>