Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

acdestefani

Menu Horizontal

Por , em Javascript

Recommended Posts

acdestefani    0

acdestefani
Postado

Olá pessoal!

Encontrei esse menu na internet e gostaria de usá-lo. Porém, preciso fazer uma alteração e como não tenho experiência gostaria de contar com a ajuda de vocês.

Quando passo o mouse no link ele abre um menu com as opções para baixo. Em alguns desse links gostaria se inserir uma seta na frente e ao passar o mouse fosse aberto outro menu do lado direito.

Será que é possível fazer essa adaptação no script abaixo.

Desde já agradeço a ajuda de todos.

Abraços

<html><head><title>teste</title><style>body{margin-top:0; margin-left:0; margin-bottom:0; margin-right:0;}.lmenu{font-family:verdana; font-size:10px; text-decoration:none; color:#000000;}.lmenu:hover{color:#CC0000;}</style><script LANGUAGE="Javascript"><!--function mOvr(src,clrOver) {if (!src.contains(event.fromElement)) {src.style.cursor = 'hand';src.bgColor = clrOver;}}function mOut(src,clrIn) {if (!src.contains(event.toElement)) {src.style.cursor = 'default';src.bgColor = clrIn;}}// --> </script><title>teste</title><base target="iframe"><style type="text/css">.mh {	background-color : #ffc6c6;	color : #cc0000;	display : block;	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;	font-size : 9px;	font-weight : bold;	padding : 1px 5px 2px 4px;	vertical-align : center;	width : expression("100%");}.mn {	background : #fff4f4;	padding : 1px;	position : absolute;	z-index : 100;	border: 1px solid #cc0000;}.mn a{	border : 1px #ffffff solid;	color : #CC0000;	display : block;	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;	font-size : 9px;	padding : 1px 5px 2px 4px;	text-decoration : none;	vertical-align : center;	width : expression("100%");	font-weight : normal;}.mn a:hover {	background : #ffc6c6;	border : 1px #CC0000 inset;	text-decoration : none;	color : #CC0000;}.sp {	border-bottom : #CC0000 1px solid;	border-top : #CC0000 0px solid;	margin : 2px 2px;}</style></head><body topmargin="0" leftmargin="0" bgcolor="#FFFFFF" bgproperties="fixed"><table  border="0" cellspacing="0" cellpadding="0" align="left"><tr><td><script language="JavaScript1.2">q1="<a href='";q2="' 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:0mn=new Array();ln=new Array();sn=new Array();sw=new Array();el= new Array();mel= new Array()tp=1 // distância do topo do menu em relação a página lf=3 //distância da esquerda do menu em relação a páginasp=1 //espaço entre os menushr=1 //espaço horizontal (1 - horizontal | 0 - vertical)oh=50 ov=50// primeiro menu mn[0]='Conheça o OP';ln[0]='#';sw[0]=155;sn[0]="" // primeiro título+q7+"Conheça o OP"+q6 +q1+"o_que_e_OP.htm"+q2+"Saíba o que é Orçamento Público"+q3+"O que é O. Público?"+q4+q1+"historia_op.htm"+q2+"Conheça a história do Orçamento Público"+q3+"Histótia do OP"+q4+q1+"estatuto_cmop.htm"+q2+"Estatuto do Conselho Municipal do Orçamento Público"+q3+"Estatuto CMOP"+q4+q1+"conselheiros_cmop.htm"+q2+"Conselheiros do Conselho Municipal do Orçamento Público"+q3+"Conselheiros CMOP"+q4//segundo menumn[1]='OP 2002';ln[1]='#';sw[1]=155;sn[1]=""+q7+"OP 2002"+q6 +q1+"metodologia_2002.htm"+q2+"Metodologia do Orçamento Participativo 2002"+q3+"Metodologia OP 2002"+q4+q1+"plano_obras_2002.htm"+q2+"Plano de Obras 2002"+q3+"Plano Obras 2002"+q4+q5 //separador+q7+"Calendário OP 2002"+q6+q1+"calendarioop2002_1aetapa.htm"+q2+"1ª Etapa"+q3+"1ª Etapa"+q4+q1+"calendarioop2002_2aetapa.htm"+q2+"2ª Etapa"+q3+"2ª Etapa"+q4+q1+"calendarioop2002_plenariasregionais.htm"+q2+"Plenárias Regionais"+q3+"Plenárias Regionais"+q4//terceiro menumn[2]='OP 2003';ln[2]='#';sw[2]=155;sn[2]=""+q7+"OP 2003"+q6 +q1+"metodologia_2003.htm"+q2+"Metodologia do Orçamento Participativo 2003"+q3+"Metodologia OP 2003"+q4+q1+"plano_obras_2003.htm"+q2+"Plano de Obras 2003"+q3+"Plano Obras 2003"+q4+q5 //separador+q7+"Calendário OP 2003"+q6+q1+"calendarioop2003_1aetapa.htm"+q2+"1ª Etapa"+q3+"1ª Etapa"+q4+q1+"calendarioop2003_2aetapa.htm"+q2+"2ª Etapa"+q3+"2ª Etapa"+q4+q1+"calendarioop2003_plenariasregionais.htm"+q2+"Plenárias Regionais"+q3+"Plenárias Regionais"+q4+q5 //separador+q1+"conselheiros_op_2003.htm"+q2+"Conselheiros do Orçamento Participativo 2003"+q3+"Conselheiros OP 2003"+q4+q1+"conselho_executivo_op_2003.htm"+q2+"Conselho Executivo do Orçamento Participativo 2003"+q3+"C. Executivo OP 2003"+q4//quarto menumn[3]='OP 2004';ln[3]='#';sw[3]=155;sn[3]=""+q7+"OP 2004"+q6 +q1+"metodologia_2004.htm"+q2+"Metodologia do Orçamento Participativo 2004"+q3+"Metodologia OP 2004"+q4+q1+"plano_obras_2004.htm"+q2+"Plano de Obras 2004"+q3+"Plano Obras 2004"+q4+q5 //separador+q1+"conselheiros_op_2004.htm"+q2+"Conselheiros do Orçamento Participativo 2004"+q3+"Conselheiros OP 2004"+q4+q1+"conselho_executivo_op_2004.htm"+q2+"Conselho Executivo do Orçamento Participativo 2004"+q3+"C. Executivo OP 2004"+q4//quinto menumn[4]='OP 2005';ln[4]='#';sw[4]=155;sn[4]=""+q7+"OP 2005"+q6 +q1+"metodologia_2005.htm"+q2+"Metodologia do Orçamento Participativo 2005"+q3+"Metodologia OP 2005"+q4+q1+"plano_obras_2005.htm"+q2+"Plano de Obras 2005"+q3+"Plano Obras 2005"+q4+q5 //separador+q1+"conselheiros_op_2005.htm"+q2+"Conselheiros do Orçamento Participativo 2005"+q3+"Conselheiros OP 2005"+q4+q1+"conselho_executivo_op_2005.htm"+q2+"Conselho Executivo do Orçamento Participativo 2005"+q3+"C. Executivo OP 2005"+q4//sexto menumn[5]='OP 2006';ln[5]='#';sw[5]=155;sn[5]=""+q7+"OP 2006"+q6 +q1+"metodologia_2006.htm"+q2+"Metodologia do Orçamento Participativo 2006"+q3+"Metodologia OP 2006"+q4+q1+"plano_obras_2006.htm"+q2+"Plano de Obras 2006"+q3+"Plano Obras 2006"+q4+q5 //separador+q1+"conselheiros_op_2006.htm"+q2+"Conselheiros do Orçamento Participativo 2006"+q3+"Conselheiros OP 2006"+q4+q1+"conselho_executivo_op_2006.htm"+q2+"Conselho Executivo do Orçamento Participativo 2006"+q3+"C. Executivo OP 2006"+q4//setimo menumn[6]='Obras';ln[6]='#';sw[6]=155;sn[6]=""+q7+"Obras"+q6 +q1+"obras_executadas.htm"+q2+"Obras já executadas"+q3+"Obras Executadas"+q4+q1+"obras_andamento.htm"+q2+"Obras em andamento"+q3+"Obras em Andamento"+q4+q1+"obras_licitadas.htm"+q2+"Obras já licitadas"+q3+"Obras Licitadas"+q4+q1+"obras_programadas.htm"+q2+"Obras programadas"+q3+"Obras Programadas"+q4+q1+"resumo_obras.htm"+q2+"Resumo das Obras"+q3+"Resumo"+q4// para acrescentar mais menu basta seguir a ordem// mn[0]='título um';ln[0]='#';sw[0]=100;sn[0]="" // menu 1// mn[1]='título dois';ln[1]='#';sw[1]=100;sn[1]="" // menu 2// mn[2]='título três';ln[2]='#';sw[2]=100;sn[2]="" // menu 3// mn[3]='título três';ln[3]='#';sw[3]=100;sn[3]="" // menu 4// mn[4]='título três';ln[4]='#';sw[4]=100;sn[4]="" // menu 5// mn[5]='título três';ln[5]='#';sw[5]=100;sn[5]="" // menu 6// mn[6]='título três';ln[6]='#';sw[6]=100;sn[6]="" // menu 7//terceiro menu//mn[2]='menu 2';ln[2]='#';sw[2]=100;sn[2]=""//+q1+"paginadois.html"+q2+"Description"+q3+"link 1"+q4//+q1+"paginadois.html"+q2+"Description"+q3+"link 2"+q4//+q1+"paginadois.html"+q2+"Description"+q3+"link 3"+q4// NÃO É NECESSÁRIO ALTERAR O CÓDIGO ABAIXO //ma=mn.length;mw=0;for(i=0;i<ma;i++){if(sw[i]>mw)mw=sw[i]};d.write("<div id='ctrl' style='position:absolute;width:100%;height:100%;z-indez:90' onmouseover='hA()'></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[i]+";top:"+tp+";left:"+lf+q3+q1+ln[i]+"' onmouseover='hA();sE(el["+i+"]);sE(ctr)"+q3+mn[i]+q4+q6);mel[i]=gE("main"+i);d.write("<div id='sub"+i+q8+sw[i]+";top:"+(tp+gH(mel[i])-1)+";left:"+lf+q3+sn[i]+q6);el[i]=gE("sub"+i);lf+=(gW(mel[i])+sp)}}else{for(i=0;i<ma;i++){d.write("<div id='main"+i+q8+mw+";top:"+tp+";left:"+lf+q3+q1+ln[i]+"' onmouseover='hA();sE(el["+i+"]);sE(ctr)"+q3+mn[i]+q4+q6);mel[i]=gE("main"+i);d.write("<div id='sub"+i+q8+sw[i]+";top:"+(tp+ov)+";left:"+(lf+mw-oh)+q3+sn[i]+q6);tp+=(gH(mel[i])+sp);el[i]=gE("sub"+i)}}function hA(){for(i=0;i<ma;i++)hE(el[i]);hE(ctr)};function zA(){for(i=0;i<ma;i++){sZ(el[i],111);sZ(mel[i],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}hA();zA();d.onclick=hA</script></td></tr></table><p style="margin-top: 0; margin-bottom: 0"> </p><p style="line-height: 50%; margin-top: 0; margin-bottom: 0"> </p><table border="0" cellpadding="2" width="100%" cellspacing="0" height="113"><tr>	<td width="100%" height="72">	  <p align="center"><img border="0" src="Imagens/bar_sup_op.jpg" width="750" height="70"></p>	</td></tr><tr>	<td width="100%" bgcolor="#D9E6FF" height="8">	<p align="center">	<b>	<font color="#CC0000">	<script language="JavaScript"><!--hoje = new Date()dia = hoje.getDate()dias = hoje.getDay()mes = hoje.getMonth()ano = hoje.getYear()if (dia < 10)dia = "0" + diaano = 1900+ano;function CriaArray (n){this.length = n }NomeDia = new CriaArray(7)NomeDia[0] = "Domingo"NomeDia[1] = "Segunda-feira"NomeDia[2] = "Terça-feira"NomeDia[3] = "Quarta-feira"NomeDia[4] = "Quinta-feira"NomeDia[5] = "Sexta-feira"NomeDia[6] = "Sábado"//NomeMes = new CriaArray(12)NomeMes[0] = "Janeiro"NomeMes[1] = "Fevereiro"NomeMes[2] = "Março"NomeMes[3] = "Abril"NomeMes[4] = "Maio"NomeMes[5] = "Junho"NomeMes[6] = "Julho"NomeMes[7] = "Agosto"NomeMes[8] = "Setembro"NomeMes[9] = "Outubro"NomeMes[10] = "Novembro"NomeMes[11] = "Dezembro"// function WriteDate() {document.write ("<font color='#000080'face='Arial'size='1'>" + NomeDia[dias] + ", " + dia + " de " + NomeMes[mes] + " de " + ano + " </font&gt>")// }// --></script>	</font>	</b></td>  </tr>  <tr>	<td width="100%" bgcolor="#FFFFFF" height="21" valign="top">	<hr color="#CC0000" size="1"></td>  </tr></table><table border="0" cellpadding="2" width="100%">  <tr>	<td width="12%">	  <table border="0" cellpadding="2" width="100%">		<tr>		  <td width="100%">		   <p align="center">		   <a href="noticias_op.htm" target="iframe"  onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.Image1','document.Image1','Imagens/bt_principal_2.gif','#989346417380')"><img name="Image1" border="0" src="Imagens/bt_principal_1.gif" width="80" height="19"></a> 		   </p>		  </td>		</tr>		<tr>		  <td width="100%">			<p align="center">			<a href="mailto:opvga@yahoo.com.br" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.Image3','document.Image3','Imagens/bt_contato_2.gif','#989346417380')"><img name="Image3" border="0" src="Imagens/bt_contato_1.gif" width="80" height="19"></a> 			</p>		  </td>		</tr>		<tr>		  <td width="100%">		   <p align="center">		   <a href="caravana_op.htm" target="iframe"  onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.Image2','document.Image2','Imagens/bt_caravana_2.gif','#989346417380')"><img name="Image2" border="0" src="Imagens/bt_caravana_1.gif" width="80" height="19"></a> 		   </p>		  </td>		</tr>	  </table>	</td>	<td width="64%"><!--webbot bot="HTMLMarkup" startspan --><iframe src="noticias_op.htm" width="100%" height="230" scrolling="auto" frameborder="0" name="iframe"></iframe>	<!--webbot bot="HTMLMarkup" endspan -->	</td>	<td width="16%">			<p style="margin-top: 0; margin-bottom: 0" align="center"><img border="0" src="Imagens/telefone2.gif" width="50" height="47"></p>			<p style="margin-top: 0; margin-bottom: 0" align="center"><b><font color="#000080"><span style="mso-fareast-font-family: Times New Roman; mso-ansi-language: PT-BR; mso-fareast-language: PT-BR; mso-bidi-language: AR-SA"><font size="1" face="Arial">Telefone</font></span><font size="1" face="Arial"><span style="mso-fareast-font-family: Times New Roman; mso-ansi-language: PT-BR; mso-fareast-language: PT-BR; mso-bidi-language: AR-SA">:</span></font></font></b></p>			<p style="margin-top: 0; margin-bottom: 0" align="center"><b><span style="mso-fareast-font-family: Times New Roman; mso-ansi-language: PT-BR; mso-fareast-language: PT-BR; mso-bidi-language: AR-SA; text-transform: uppercase"><font size="2" face="Arial" color="#000080">(35)			3690-2029</font></span></b></p>			<p style="margin-top: 0; margin-bottom: 0" align="center"><img border="0" src="Imagens/logopmv.gif" width="123" height="93"></td>  </tr></table><table border="0" cellpadding="2" width="100%">  <tr>	<td width="100%">	  <hr size="1" color="#CC0000">	</td>  </tr>  <tr>	<td width="100%">	<p style="line-height: 80%; margin-top: 0; margin-bottom: 0" align="center"><span style="font-family: Times New Roman; mso-fareast-font-family: Times New Roman; mso-ansi-language: PT-BR; mso-fareast-language: PT-BR; mso-bidi-language: AR-SA; text-transform: uppercase"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#000080"><b>Prefeitura	do Município de Varginha - </b></font></span><span style="text-transform: uppercase; mso-bidi-language: AR-SA; mso-fareast-language: PT-BR; mso-ansi-language: PT-BR; mso-fareast-font-family: Times New Roman; font-family: Times New Roman"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#CC0000">Coordenação	de Relações com a Comunidade</font></b></span></p>	<p style="line-height: 80%; margin-top: 0; margin-bottom: 0" align="center"><span style="font-family: Times New Roman; mso-fareast-font-family: Times New Roman; mso-ansi-language: PT-BR; mso-fareast-language: PT-BR; mso-bidi-language: AR-SA"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Rua	Presidente Antônio Carlos, 356 - Centro - CEP 37002-000</font></span>	<p style="line-height: 80%; margin-top: 0; margin-bottom: 0" align="center"><span style="font-family: Times New Roman; mso-fareast-font-family: Times New Roman; mso-ansi-language: PT-BR; mso-fareast-language: PT-BR; mso-bidi-language: AR-SA"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Varginha - Minas Gerais - Brasil</font></span>	</td>  </tr></table></body></html>

</SCRIPT><script language="JavaScript"><!--function MM_swapImgRestore() { //v2.0  if (document.MM_swapImgData != null)	for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)	  document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];}function MM_preloadImages() { //v2.0  if (document.images) {	var imgFiles = MM_preloadImages.arguments;	if (document.preloadArray==null) document.preloadArray = new Array();	var i = document.preloadArray.length;	with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#"){	  preloadArray[i] = new Image;	  preloadArray[i++].src = imgFiles[j];  } }}function MM_swapImage() { //v2.0  var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;  for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {	objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];	if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||		(objStr.indexOf('document.all[')   ==0 && document.all   ==null))	  objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);	obj = eval(objStr);	if (obj != null) {	  swapArray[j++] = obj;	  swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src:oldArray[j];	  obj.src = MM_swapImage.arguments[i+2];  } }  document.MM_swapImgData = swapArray; //used for restore}function MM_openBrWindow(theURL,winName,features) { //v2.0  window.open(theURL,winName,features);}//--></script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

acdestefani,No link abaixo eu postei um código de menu horizontal que faz exatamente o que você quer, sendo muito mais simples. Se quiser uma ajuda para adaptar é só pedir.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito