Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Submenu carregar fechado - Menu em Java

dianabreit

Perguntado por dianabreit,

 Share

Pergunta

dianabreit

dianabreit

Postado
Postado

Bom dia, tenho o seguinte site http://www.hidrauforca.com.br/novo/menu.html, no qual o menu carrega todo em aberto e você pode fechar ou abrir o submenu, mas gostaria de que a pagina já carregasse com o menu fechado, e eu clicasse nas setinhas para que os submenus abrissem...

alguém poderia me ajudar, não tenho conhecimento em java, esse menu eu já peguei pronto, se pudessem me ajudar com o código já com os submenus minimizados...

Obrigada

Link para o comentário
Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

  • 0
dianabreit

dianabreit

Postado
  • Autor
Postado

o código

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Wagner B. Soares" />
<title>Menu</title>
<style type="text/css"> 
body
{
	font-size: 11px;
    font-family: Verdana, Arial, Helvetica, Garamond, sans-serif, serif;
}

div.menu
{
	width: 200px;
	border: 1px solid #000000;
}

div.menu a
{
	display: block;
	padding-left: 5px;
	line-height: 20px;
	color: #000000;
	text-decoration: none;
	outline: none;
}

* html div.menu a { height: 1%; }

div.menu a:hover
{
	background-color: #000066;
    color: #FFFFFF;
}

ul.corpo
{
	margin: 0px;
	padding: 0px;
	width: 200px;
}

ul.corpo li
{
	display: block;
	margin: 0px;
	padding: 0px;
	list-style: none;
}

span.imagem
{	
	display: block;
	width: 198px;
	position : absolute;
	text-align: right;
}

span.imagem img
{
	padding: 3px 2px;
	cursor: pointer;
}

span.header
{
	z-index:1;
	display: block;
	margin: 0px;
	padding: 0px;
	padding-left: 5px;
	line-height: 22px;
	color: #FFFFFF;
	font-weight: bold;
	background-color: #000000;
}

</style>
<script type="text/javascript"> 
up_down = function(img,body)
{
		if(img.src.indexOf("up") > -1)
		{
			img.src="arrow_down.gif";
			document.getElementById(body).style.display = "none";
		}
		else
		{
			img.src="arrow_up.gif";
			document.getElementById(body).style.display = "block";
		}
};
</script>
</head>
<body>
	<div id="menu" class="menu">
		<span class="imagem"><img src="arrow_up.gif" onclick="up_down(this,'menuBody');" alt="" title="" /></span>
		<span class="header">Menu</span>
		<ul id="menuBody" class="corpo">
			<li><a href="#">Arquivo</a></li>
			<li><a href="#">Editar</a></li>
			<li><a href="#">Procurar</a></li>
			<li><a href="#">Ferramentas</a></li>
		</ul>
	</div>
	<br />
	<div id="menu1" class="menu">
		<span class="imagem"><img src="arrow_up.gif" onclick="up_down(this,'menuBody1');" alt="" title="" /></span>
		<span class="header">Menu</span>
		<ul id="menuBody1" class="corpo">
			<li><a href="#">Arquivo</a></li>
			<li><a href="#">Editar</a></li>
			<li><a href="#">Procurar</a></li>
			<li><a href="#">Ferramentas</a></li>
		</ul>
	</div>
</body>

Link para o comentário
Compartilhar em outros sites
  • 0
lobismano

lobismano

Postado
Postado

E ai beleza.

Insere no no <body>.

<body onload="colapseall();">
No <script> 
function colapseall()
{
document.getElementById('menuBody').style.display = "none";
document.getElementById('menuBody1').style.display = "none";
}
e troca a imagem de "arrow_up.gif" para "arrow_down.gif" em: 
<span class="imagem"><img src="arrow_down.gif" onclick="up_down(this,'menuBody1');" alt="" title="" /></span>

At.

Link para o comentário
Compartilhar em outros sites
  • 0
dianabreit

dianabreit

Postado
  • Autor
Postado

Oiiee, obrigada por responder, então alterei tudo q você pediu, se quiser acessar o menu hospedado pra ver como ficou, entra no http://www.hidrauforca.com.br/novo/menu.html

mas aconteceu um problema, o menu agora carrega fechado (oba), mass ao clicar na setinha para o submenu aparecer, não acontece nada...

olha como está o código agora com as alteraçoes q você me pediu....

(obrigada mais um avez)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Wagner B. Soares" />
<title>Menu</title>
<style type="text/css"> 
body
{
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, Garamond, sans-serif, serif;
}

div.menu
{
    width: 200px;
    border: 1px solid #000000;
}

div.menu a
{
    display: block;
    padding-left: 5px;
    line-height: 20px;
    color: #000000;
    text-decoration: none;
    outline: none;
}

* html div.menu a { height: 1%; }

div.menu a:hover
{
    background-color: #000066;
    color: #FFFFFF;
}

ul.corpo
{
    margin: 0px;
    padding: 0px;
    width: 200px;
}

ul.corpo li
{
    display: block;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

span.imagem
{    
    display: block;
    width: 198px;
    position : absolute;
    text-align: right;
}

span.imagem img
{
    padding: 3px 2px;
    cursor: pointer;
}

span.header
{
    z-index:1;
    display: block;
    margin: 0px;
    padding: 0px;
    padding-left: 5px;
    line-height: 22px;
    color: #FFFFFF;
    font-weight: bold;
    background-color: #000000;
}

</style>
<script type="text/javascript"> 
up_down = function colapseall()
{
document.getElementById('menuBody').style.display = "none";
document.getElementById('menuBody1').style.display = "none";
}
</script>
</head>
<body onload="colapseall();">
    <div id="menu" class="menu">
        <span class="imagem"><img src="arrow_down.gif" onclick="up_down(this,'menuBody1');" alt="" title="" /></span>
        <span class="header">Pistolas de Pintura</span>
        <ul id="menuBody" class="corpo">
            <li><a href="pistola_pressao.html" target="img">Pressão</a></li>
            <li><a href="#">Editar</a></li>
            <li><a href="#">Procurar</a></li>
            <li><a href="#">Ferramentas</a></li>
        </ul>
    </div>
    <br />
    <div id="menu1" class="menu">
        <span class="imagem"><img src="arrow_down.gif" onclick="up_down(this,'menuBody1');" alt="" title="" /></span>
        <span class="header">Menu</span>
        <ul id="menuBody1" class="corpo">
            <li><a href="#">Arquivo</a></li>
            <li><a href="#">Editar</a></li>
            <li><a href="#">Procurar</a></li>
            <li><a href="#">Ferramentas</a></li>
        </ul>
    </div>
</body>
</html>

Link para o comentário
Compartilhar em outros sites
  • 0
lobismano

lobismano

Postado
Postado

E ai beleza.

Não era para remover o script anterior e sim acrescentar o novo.

<script type="text/javascript"> 
up_down = function(img,body)
{
if(img.src.indexOf("up") > -1)
{
img.src="arrow_down.gif";
document.getElementById(body).style.display = "none";
}
else
{
img.src="arrow_up.gif";
document.getElementById(body).style.display = "block";
}
};

function colapseall()
{
document.getElementById('menuBody').style.display = "none";
document.getElementById('menuBody1').style.display = "none";
}

</script>
Outra coisa, os dois links estão passando o mesmo 'menuBody1' sendo que o primeiro é 'menuBody' 
<span class="imagem"><img src="arrow_down.gif" onclick="up_down(this,'menuBody1');" alt="" title="" /></span>
<span class="imagem"><img src="arrow_down.gif" onclick="up_down(this,'menuBody1');" alt="" title="" /></span>

At.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...