Jump to content
Fórum Script Brasil
  • 0

(Resolvido) Submenu carregar fechado - Menu em Java


Question

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 to post
Share on other sites

6 answers to this question

Recommended Posts

  • 0

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 to post
Share on other sites
  • 0

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 to post
Share on other sites
  • 0

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 to post
Share on other sites
  • 0

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 to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Cloud Computing


  • Forum Statistics

    • Total Topics
      149405
    • Total Posts
      645894
×
×
  • Create New...