Ir para conteúdo

POWERED BY:

Arquivado

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

pauloca

Problema com menu

Por , em Javascript

Recommended Posts

pauloca    0

pauloca
Postado

Olá a todos.

 

Estou pela primeira vez tentando construir um site e o meu conhecimento ainda é muito pequeno, por isso, estou aqui recorrendo à boa vontade de quem puder e quiser me ajudar nesses primeiros passos. O fórum pode até ter a resposta para o meu problema mas, como o meu conhecimento de java é zero, provavelmente não saberei reconhecê-la.

Estou usando como guia um tutorial sobre css e menus que peguei no site www.maujor.com. Esse tutorial tem um exemplo de menu drop-down com uma camada de sub-menus que fica oculta e só aparece quando o mouse é passado por cima da camada principal e há um trecho de código em java que serve para fazer o menu funcionar.

Para testes estou usando o Internet Explorer e o Mozila no Linux.

A página onde está o menu está dividida em blocos através de divs e estilizados com css.

Há dois blocos, um na direita onde está o menu e outro na esquerda onde há algum conteúdo.

No Mozila do Linux o bloco de conteúdo impede o aparecimento da sub-camada de menu, somente quando aumento a largura do bloco onde está o menu e diminuo a largura do bloco de conteúdo é que o sub-menu aparece. O que eu quero é que o sub-menu apareça por cima do bloco de conteúdo quando o mouse for passado sobre o menu.

No Internet Explorer o sub-menu não aparece de jeito neunhum, mesmo se houver mais espaço.

Abaixo está o código da miha págia index.htm.

 

<html>  <head>	<title> </title>  </head>  	<style type="text/css" title="mystyles" media="all">	  <!--		#page		  {		   font-size:11px;		   font-family:verdana,geneva,arial,sans-serif;		   line-height:14px;		   background-color:#d5d5de;		   text-align:left;		   visibility:visible;		   margin-top:auto;		   margin-right:auto;		   margin-left:auto;		   position:relative;		   height:600px;		   width:800px;		  }		#box1		  {		   background-color:#f6f6b8;		   position:relative;		   height:60px;		   width:800px;		  }		#box2		  {		   background-color:#c9ebe3;		   position:relative;		   height:30px;		   width:800px;		  }		#box3		  {		   background-color:#f6c3f6;		   position:relative;		   float:left;		   height:450px;		   width:150px;		   		  }		#box4		  {		   background-color:#ddd;		   position:relative;		   float:left;		   height:450px;		   width:340px;		   		  }		#box5		  {		   background-color:#ccc;		   position:relative;		   float:left;		   height:450px;		   width:160px;		  }		#box6		  {		   background-color:#c4ebc4;		   position:relative;		   height:60px;		   width:800px;		   clear:left;		  }		ul		  {		   margin:0;		   padding:0;		   list-style:none;		   width:150px;		  }		ul li		  {		   position:relative;		   margin:0;		   padding:0;		   list-style:none;		   width:150px;		   border-bottom:1px solid #ccc;		  }		li ul		  {		   position:absolute;		   left:149px;		   top:0;		   display:none;		  }		ul li a		  {		   display:block;		   text-decoration:one;		   color:#777;		   background:#fff;		   padding:5px;		   border:1px solid #ccc;		   border-bottom:0;		  }		li:hover ul,li.over ul		  {		   display:block;		  }		/* Fix IE. Hide from IE Mac \*/		* html ul li { float: left: }		* html ul li a { height: 1%; }		/* End */		startList = function() {		if (document.all&&document.getElementById) {		navRoot = document.getElementById("nav");		for (i=0; i<navRoot.childNodes.lenght; i++){		node = navRoot.childNodes[i];		if (node.nodeName=="LI") {		node.onmouseover=function() {		this.className+=" over";		  }		  node.onmouseout=function() {		  this.className=this.className.replace				(" over", "");		   }		   }		  }		 }		}		window.onload=startList;			  -->	</style>    <body>  	<div id="page">  	  <div id="box1">		box1	  </div>		  <div id="box2">		box2	  </div>		  <div id="box3">		<ul id="nav">		  <li> <a href="#"> ESCOLA DOMINICAL </a> 			<ul>			  <li> <a href="#"> CLASSES </a> </li>			  <li> <a href="#"> REVISTA </a> </li>			</ul>		  </li>		  <li> <a href="#"> SEMADEI </a>			<ul>			  <li> <a href="#"> O QUE É </a> </li>			  <li> <a href="#"> OBJETIVOS </a> </li>			  <li> <a href="#"> EVENTOS </a> </li>			</ul>		  </li>		  <li> <a href="#"> CONGREGAÇÕES </a> 			<ul>			  <li> <a href="c:\aditapevi\congregacoes\sede\sede.htm"> SEDE </a> </li>			  <li> <a href="#"> VILA GIOIA </a> </li>			  <li> <a href="#"> BRIQUET I </a> </li>			</ul>		  </li>		  <li> <a href="#"> GRUPOS </a> 			<ul>			  <li> <a href="#"> UFADEI </a> </li>			  <li> <a href="#"> UMADEI </a> </li>			  <li> <a href="#"> UAADEI </a> </li>			</ul>		  </li>		  <li> <a href="#"> DEPARTAMENTOS </a>			<ul>			  <li> <a href="#"> TESOURARIA </a> </li>			  <li> <a href="#"> IFANTIL </a> </li>			</ul>		  </li>		</ul>	  </div>	  	  <div id="box4">		box4	  </div>	  	  <div id="box5">		box5	  </div>		  <div id="box6">		box6	  </div>	  	</div>    </body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

renanfog    0

renanfog
Postado

você colou o javascript dentro da tag style....

 

startList = function() {		if (document.all&&document.getElementById) {		navRoot = document.getElementById("nav");		for (i=0; i<navRoot.childNodes.lenght; i++){		node = navRoot.childNodes[i];		if (node.nodeName=="LI") {		node.onmouseover=function() {		this.className+=" over";		  }		  node.onmouseout=function() {		  this.className=this.className.replace				(" over", "");		   }		   }		  }		 }		}		window.onload=startList;

Todo esse bloco ai em cima, cria um <script type="text/javascript></script> depois de fechar o </style> e cola ai dentro.........

 

fica assim...

 

.....</style><script type="text/javascript>startList = function() {		if (document.all&&document.getElementById) {		navRoot = document.getElementById("nav");		for (i=0; i<navRoot.childNodes.lenght; i++){		node = navRoot.childNodes[i];		if (node.nodeName=="LI") {		node.onmouseover=function() {		this.className+=" over";		  }		  node.onmouseout=function() {		  this.className=this.className.replace				(" over", "");		   }		   }		  }		 }		}		window.onload=startList;</script>

testa ai e avisa

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