Gostaria De Fazer Como Este Link

ShadowRSM · Agosto 5, 2004

Olá amigos,

eu andei acessando algumas páginas na internet e me deparei com uma página à qual tem um modo diferente de tratar os links, ou seja, no início da página existe um menu Index e lá se encontra os seus links, só que quando passamos o mouse em cima de seus links ele dá um efeito igual ao OfficeXP, ou seja, ele fica com efeito de menu do Windows, então peço humildemente se alguém consegue fazer o mesmo efeito que este WebMaster da página utilizou e se também poderia passar o código para este efeito, pois eu analisei a página do webmaster e não consegui encontrar como ele conseguiu este efeito, por favor me ajudem...

Segue abaixo o endereço da página, contendo o efeito, é só você selecionar alguma opção no Index da página que verá o efeito que estou querendo, ok !!!

Site com efeito:

http://www.leechget.net/en/

PS: Peço desculpa se não podem postar endereços de páginas nestes tópicos, mas não tive opção, pois só vendo o efeito dos links para você saber o que desejo...

Grato e até mais,

Renato

DataSet · Agosto 5, 2004

Não é muito complicado... veja esse código aí

<html>
<head>
<style type=text/css>body{scrollbar-face-color: white; scrollbar-shadow-color: grey; scrollbar-highlight-color: white; scrollbar-3dlight-color: grey; scrollbar-darkshadow-color: white;scrollbar-track-color: #f7f7f7; scrollbar-arrow-color: #c0c0c0; background-attachment:fixed}</style>
<style type="text/css">
.mh {
background-color : #f8f8f8;
color : #556677;
display : block;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 11px;
font-weight : bold;
padding : 1px 5px 2px 4px;
vertical-align : center;
width : expression("100%");
}
.mn {
background : #eeeff0;
padding : 1px;
position : absolute;
z-index : 100;
border: 1px solid #556677;
filter: alpha(opacity=90);
}
.mn a{
border : 1px #eeeff0 solid;
color : #2F4F4F;
display : block;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 11px;
padding : 1px 5px 2px 04px;
text-decoration : none;
vertical-align : left;
width : expression("100%");
font-weight : normal;
}
.mn a:hover {
background : #778899;
border : 1px #223344 inset;
text-decoration : none;
color : #E0F0F0;
}
.sp {
border-bottom : #334455 1px solid;
border-top : #ffffff 0px solid;
margin : 2px 2px;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<script language="JavaScript1.2">
q1="<a href='";q2="' target='_centro' title='";q3="'>";q4="</a>";q5="<div class=sp></div>";q6="</div>";q7="<div class='mh'>";q8="' class='mn' style='position: absolute;width:"
d=document;dm=d.getElementById?1:0;ie=d.all?1:0;i4=(d.all && !dm)?1:0;n4=d.layers?1:0
mn=new Array();ln=new Array();sn=new Array();swr=new Array();sw=new Array();el= new Array();mel= new Array()
tp=3 // distância do topo do menu em relação a página
lf=1 //distância da esquerda do menu em relação a página
sp=1 //espaço entre os menus
hr=1 //espaço horizontal (1 - horizontal | 0 - vertical)
oh=50
ov=50
mn[0]="+'Computadores';ln[0]='#';swr[0]=120;sw[0]=120;sn[0]=""
+q1+"produtos/computadores.asp"+q2+"Descubra o ASP"+q3+"Desktop"+q4
+q1+"produtos/notbook.asp"+q2+"Descubra o PHP"+q3+"Note Book"+q4
+q5 //separador
+q1+"produtos/cooler.asp"+q2+"Descubra o PHP"+q3+"Cooler"+q4
+q1+"produtos/disquete.asp"+q2+"Descubra o PHP"+q3+"Disquete"+q4
+q1+"produtos/gabinetes.asp"+q2+"Descubra o PHP"+q3+"Gabinetes"+q4
+q1+"produtos/armazenamento.asp"+q2+"Descubra o PHP"+q3+"Hard Disk"+q4
+q5 //separador
+q1+"produtos/server_dicas.asp"+q2+"Descubra o PHP"+q3+"Outros"+q4
ma=mn.length;mw=0;for(i=0;i<ma;i++){if(sw>mw)mw=sw};d.write("<div id='ctrl' style='position:absolute;width:100%;height:100%;z-indez:90' onmouseover='há()'></div>");ctr=gE('ctrl')
if(hr==1){sp+=(dm&&!ie)?4:0;for(i=0;i<ma;i++){d.write("<div id='main"+i+q8+sw+";top:"+tp+";left:"+lf+q3+q1+ln+"' onmouseover='há();sE(el["+i+]);sE(ctr)"+q3+mn+q4+q6);mel=gE("main"+i);d.write("<div id=sub"+i+q8+swr+";top:"+(tp+gH(mel)+27)+";left:"+lf+q3+sn+q6);el=gE("sub"+i);lf+=(gW(mel)+sp)}}
else{for(i=0;i<ma;i++){d.write("<div id='main"+i+q8+mw+";top:"+tp+";left:"+lf+q3+q1+ln+"' onmouseover='há();sE(el["+i+]);sE(ctr)"+q3+mn+q4+q6);mel=gE("main"+i);d.write("<div id='sub"+i+q8+sw+";top:"+(tp+ov)+";left:"+(lf+mw-oh)+q3+sn+q6);tp+=(gH(mel)+sp);el=gE("sub"+i)}}
function há(){for(i=0;i<ma;i++)hE(el);hE(ctr)};function zA(){for(i=0;i<ma;i++){sZ(el,111);sZ(mel,100)}};function gE(e){if(dm){r=d.getElementById(e);return d.getElementById(e).style}if(i4)return d.all[e].style;if(n4)return d.layers[e]}
function hE(e){e.visibility="hidden"};function sE(e){e.visibility="visible"};function sZ(e,z){e.zIndex=z};function gH(e){h=parseInt(e.height||e.pixelHeight||r.offsetHeight);return h};function gW(e){w=parseInt(e.width||e.pixelWidth||r.offsetWidth);return w}
há();zA();d.onclick=há
</script>
</body>
</html>

A aparencia vai depender seu gosto. Se quizer colocar uma imagem na frente das opções coloque a seguinte linha entre as aspas do

mn[0]=""

<img src='produtos/produtos/desktop.jpg' border='0'> 

você pode alterar o que quizer, qualquer coisa dá um toque denovo.

Até.

Entrar

Gostaria De Fazer Como Este Link

Pergunta

ShadowRSM

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

DataSet

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades