Menu

[Guest Fulerow]

tipo o desse site OdFHP alguém sabe fazr um menu desse?

[jissa]

Acho que isto é pego uma imagem, fatiada no PhotoShop Fireworks, ou algo assim, e criado os links...

[Renyo]

A concerteza ele deve ter pego uma figura inteira.... e recortando fácil fácil no photoshop.......

[Guest Fulerow]

oww galera.... vocês clicaram pa ver??? olhae...

[Renyo]

já OLHEI!!!!! É ISSO MESMO COMO DIZ O JISSA É FATIAS!!!!! OU NO PHOTOSHOP OU NO COREL

[sparrow]

Eu vi 2 tipos de menu nakele site

um em q a imagem ganha um foco/cor quando você passa o mouse por cima e outro q se expande quando você clica

IMAGEM TRANSPARENTE:

<img src="imagem.gif" style="filter:alpha(opacity=25)" onmouseover="this.style.filter='alpha(opacity=100)'" onmouseout="this.style.filter='alpha(opacity=25)'">

a imagem está com estilo-transparente e quando você passa o mouse por cima ela fica 100% opaca (sem transparência), quando você tira o mouse, a transparência volta

MENU Q EXPANDE:

<script language="JavaScript">

<!--

function expandir(objeto){

if (objeto.style.display=="none")

objeto.style.display=""

else

objeto.style.display="none"

}

//-->

</script>

<img src="imagem.gif" onClick="expandir(beaba)">

<span style="display:none" id="beaba">

<a href="#">link</a><br>

<a href="#">link</a><br>

<a href="#">link</a><br>

</span>

o objeto/camada beaba está com display=none, que faz com q ele não apareça e não seja reservado espaço p/ ele na página. quando display="", ele aparece e ocupa o expaço empurrando/expandindo os ítens seguintes.

vê se era isso q você keria

ps: se registra ae...

[Guest Guest]

é isso mesmo cara... mas... dá pa fazr isso com um menu??? tipow... se eu fizer isso em uma tabela dá erro de script... e se eu colocar embaixo também dá... o que eu faço??

eu to falando do segundo código que você mi passou

tipow... o menu do site que eu falei é o da direita

[diraol]

cara, não é com tabela q você vai fazer akilo...

você vai fazer com Camadas.... DIV..... procura no site que tem vários posts sobre isso...

Ah... pra fazer a busca se cadastra aqui no forum...

falou

[sparrow]

coloca a img (com a mesma largura da célula) e a camada na mesma célula

<table...

<tr>

<td><img ...><span/div...</td>

</tr>

</table>

você também pode colocar outra table dentro da camada

vê se dá certo

[Guest Fulerow]

coloca a img (com a mesma largura da célula) e a camada na mesma célula

<table...

<tr>

<td><img ...><span/div...</td>

</tr>

</table>

você também pode colocar outra table dentro da camada

vê se dá certo

num intendi

[sparrow]

você coloca a imagem e a camada dentro de uma mesma célula da tabela, e dentro da camada você pode pôr outra tabela

dá uma olhada no código abaixo

<script language="JavaScript">

<!--

function expandir(objeto){

if (objeto.style.display=="none")

objeto.style.display=""

else

objeto.style.display="none"

}

//-->

</script>

<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">

<tr>

<td><img src="imagem.gif" onClick="expandir(beaba)"><div style="display:none" id="beaba">

<table width="100" border="0" cellpadding="0" cellspacing="0">

<tr><td onMouseOver="this.style.background='#222222'" onMouseOut="this.style.background='#000000'"><a href="#">link</a><br></td></tr>

<tr><td onMouseOver="this.style.background='#222222'" onMouseOut="this.style.background='#000000'"><a href="#">link</a><br></td></tr>

<tr><td onMouseOver="this.style.background='#222222'" onMouseOut="this.style.background='#000000'"><a href="#">link</a><br></td></tr>

       </table>

</div></td></tr>

</table>

daí fica mais fácil fazer o layout do menu q vai escondido

[Guest Fulerow*no curso]

eheheheh ok... quando eu xegar em casa eu testo.. porque ai eu vou estar com DreamWeaver... ai eu posto aki se deu certo ou não