Ir para conteúdo

POWERED BY:

Arquivado

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

Tiago Pimentel

[Resolvido] Como manter o DIV com Display:Block

Por , em Javascript

Recommended Posts

Tiago Pimentel    0

Tiago Pimentel
Postado

Ola pessoal, to com um probleminha.

Estou querendo fazer um menu horizontal que ao passar o mouse por cima da opção, aparece embaixo os submenus.

Ate ai eu consegui fazer, mas acontece que nao sei como manter esse sub aberto ao tirar o ponteiro de cima do menu principal e coloca-lo encima dos sub's

 

Segue abaixo o codigo que fiz, esta completo, não ha nenhum arquivo aparte.

 

<html>
   <head>
      <style type="text/css" title="mystyles" media="all">
         .nav {
            width:500px;
            font-family:arial, verdana, sans-serif;
         }
	         
         a{
            text-decoration:none;
         }
      </style>
      <script type="text/javascript">
         function abrefecha(id){
            target = document.getElementById(id);
		         
            if(target.style.display == "none"){
               target.style.display = "block";
            }
            else if(target.style.display == "block"){
               target.style.display = "none";
            } 
         }
      </script>
   </head>
   <body>
      <table class="nav">
         <tr align="center">
            <td>
		<a href="#"><b>Amostra</b></a>
            </td>
            <td>
		<a href="#" OnMouseOver="javaScript:abrefecha('a1')" OnMouseOut="javaScript:abrefecha('a1')"><b>Amostra Menu 1</b></a>
            </td>
            <td>
		<a href="#" OnMouseOver="javaScript:abrefecha('a2')" OnMouseOut="javaScript:abrefecha('a2')"><b>Amostra Menu 2</b></a>
            </td>
         </tr>
      </table>
		
      <div style="display: none;" id="a1">
         <table class="nav">
            <tr align="center">
		<td>
		   <a href="#">Amostra Menu 1</a>
		</td>
		<td>
		   <a href="#">Amostra Menu 1</a>
		</td>
		<td>
		   <a href="#">Amostra Menu 1</a>
		</td>
	   </tr>
         </table>
      </div>
	
      <div style="display: none;" id="a2">
         <table class="nav">
            <tr align="center">
		<td>
		   <a href="#">Amostra Menu 2</a>
		</td>
		<td>
		   <a href="#">Amostra Menu 2</a>
		</td>
		<td>
		   <a href="#">Amostra Menu 2</a>
		</td>
	   </tr>
         </table>
      </div>
   </body>
</html>

Se alquem souber, me ajude, e se ainda souber como fazer para não dar erro no IE, agradeço, mtu msm!

 

VLW, VLW!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Cara, desnecessário fazer 'isso tudo'.. veja por exemplo alguns exemplos usando apenas CSS: (e o minimo de JS, para ativar no IE6).

http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/page__view__findpost__p__1347096

 

Procure por mais como: Menu Dropdown

No caso, a técnica normalmente utilizada, é fazer o submenu ser um elemento filho do item do menu em questão.

Enqnto o mouse estiver sobre o submenu, estará sobre o item do menu também, pois um está 'dentro do outro'.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Pimentel    0

Tiago Pimentel
Postado

Vlw William, me ajudou mtu, em me falar pra pesquizar como menu DROPDOWN,

mas principalmente em você falar sobre os http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/seta.gif elementos filhos.

 

Eu não uso mto css, na verdade, ja faz tempo que naum programa, teho prestado so suporte msm! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

So mais uma pergunta,

como marca este topic como[RESOLVIDO]? http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

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