Ir para conteúdo

POWERED BY:

Arquivado

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

flneves

Menu como o do terra

Por , em Javascript

Recommended Posts

flneves    0

flneves
Postado

Pessoal,

 

 

Uso o dreamweaver e gostaria de fazer um menu igual a esse:

 

Imagem Postada

 

 

 

no site Terra

 

Sei que é puro DHTML, mas nem sei começar!!!!

 

Alguem tem algo pronto para que edite????

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Você só precisa de 2 classes CSS, uma pro menu selecionado, e outra pro que não está selecionado. O Javascript/Ajax serve para mudar esses estilos.

 

Eu tenho pronto, mas não está aqui comigo, vou dar uma procurada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Raficcha    1

Raficcha
Postado

Olha so cara.. você vai precisar disso se for trocar uma classe CSS com Javascript... eu to colocando aqui pq foi dificil pra mim descobri como se fazia..

 

 

para alterar uma classe em java script:

document.getElementByIs("id_do_objeto").className = "nomedanovaclasse"

Compartilhar este post

Link para o post
Compartilhar em outros sites

flneves    0

flneves
Postado

Pessoal,

 

 

Ja quase consegui fazer, ta faltando dois detalhes que tem feito eu perdero sono!!!!

 

Segue abaixo o link: Erro!

 

Quero fazer assim:

 

Quando clicar no botão 1 apareça a div 1

 

e suma as demais, sem sobreposições!!!!

 

Assim como quero que no load apareça a div 01

 

Segue abaixo o código:

 

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.exheading {font-weight: bold; cursor: hand}
.exheading {font-weight: bold; cursor: hand}
.exindent {padding-left: 20px}
.exindent {padding-left: 20px}
-->
</style>


<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<script language="JavaScript" type="text/JavaScript">
//-->

//begin IE 4+ And NS6 dHTML Outlines
function hideshow(which)
{
if (!document.getElementById|document.all)
	{
	return
	}
else
	{
	if (document.getElementById)
		{
		oWhich = eval ("document.getElementById('" + which + "')")
		}
	else
		{
		oWhich = eval ("document.all." + which)
		}
	}

	window.focus()

	if (oWhich.style.display=="none")
		{
		oWhich.style.display=""
		}
	else
		{
		oWhich.style.display="none"
		}
}
//end IE 4+ And NS6 dHTML Outlines
function initmenuExpandible()
{
hideshow('menuChildbotão 1')
hideshow('menuChildbotão2')
}

function initmenuExpandible()
{
hideshow('menuChildb1')
hideshow('menuChildb2')
hideshow('menuChildb3')
hideshow('menuChildb4')
hideshow('menuChildb5')
}//-->
</script>

</head>

<body onLoad="MM_preloadImages('img/menu/b1.1.jpg','img/menu/b2.1.jpg','img/menu/b3.1.jpg','img/menu/b4.1.jpg','img/menu/b5.1.jpg')">
<table width="618" border="0" cellpadding="0" cellspacing="2">
  <tr>
	<td width="135"><div id="menuParentb1" onClick="java script:hideshow('menuChildb1')" class="exheading"><img src="img/menu/b1.0.jpg" name="b10" width="134" height="21" id="b10" onClick="MM_swapImage('b10','','img/menu/b1.1.jpg',1)" onrelease="MM_swapImgRestore()"></div></td>
	<td width="135"><div id="menuParentb2" onClick="java script:hideshow('menuChildb2')" class="exheading"><img src="img/menu/b2.0.jpg" name="B20" width="120" height="21" id="B20" onMouseOver="MM_swapImage('B20','','img/menu/b2.1.jpg',1)" onMouseOut="MM_swapImgRestore()"></div></td>
	<td width="135"><div id="menuParentb3" onClick="java script:hideshow('menuChildb3')" class="exheading"><img src="img/menu/b3.0.jpg" name="B30" width="120" height="21" id="B30" onMouseOver="MM_swapImage('B30','','img/menu/b3.1.jpg',1)" onMouseOut="MM_swapImgRestore()"></div></td>
	<td width="135"><div id="menuParentb4" onClick="java script:hideshow('menuChildb4')" class="exheading"><img src="img/menu/b4.0.jpg" name="B40" width="120" height="21" id="B40" onMouseOver="MM_swapImage('B40','','img/menu/b4.1.jpg',1)" onMouseOut="MM_swapImgRestore()"></div></td>
	<td width="66"><div id="menuParentb5" class="exheading"><img src="img/menu/b5.0.jpg" name="B50" width="120" height="21" id="B50" onClick="java script:hideshow('menuChildb5')" onMouseOver="MM_swapImage('B50','','img/menu/b5.1.jpg',1)" onMouseOut="MM_swapImgRestore()"></div></td>
  </tr>
  <tr>
	<td colspan="5">
	  <div id="menuChildb1" style="cursor:auto" class="exindent"><b>Replace the content of this div with the content which you wish to have within the outline.</b></div>
	  <div id="menuChildb2" style="cursor:auto" class="exindent"><b>Replace the content of this div with the content which you wish to have within the outline.</b></div>
	  <div id="menuChildb3" style="cursor:auto" class="exindent"><b>Replace the content of this div with the content which you wish to have within the outline.</b></div>
	  <div id="menuChildb4" style="cursor:auto" class="exindent"><b>Replace the content of this div with the content which you wish to have within the outline.</b></div>
	  <div id="menuChildb5" style="cursor:auto" class="exindent"><b>Replace the content of this div with the content which you wish to have within the outline.</b></div></td>
  </tr>
</table>
</body>
</html>

 

Se puderem ajudar, fico grato!!!

 

 

Vlwww

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Muito código ai no teu script... dá uma olhada nessa:

http://www.cenasordidas.hbe.com.br/exemplo...rRotatorio.html

 

Basta você alterar e tirar o onmouse, que o onclick funciona perfeitamente ai... já escondendo as demais abas.

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