Menus no estilo do windows

Olá,

Muito bacana a dica, pois eu já tinha reflectido na ideia de arranjar um javascript para fazer esse funcionamento ;).

Cumps [*]

Agora para os menus, já aparecerem recolhidos, como faço?Já tentei de várias formas e não funcionou, Obrigado!Rodney Peixoto.

No estilo "ul.corpo" você acrescenta "display: none;":

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

E na imagem da seta você insere src="arrow_down.gif" no lugar de src="arrow_up.gif":

<img src="arrow_down.gif" onclick="up_down(this,'menuBody');" alt="" title="" />

Estranho, eu tentei usar isso para ele começar recolhido e não deu certo.Eu mudei algumas coisas no código, mudei o nome da imagem (mas deixei down e up nelas).Será que foi as mudanças que eu fiz que não deixa ele começar recolhido?Vou deixar ele aqui (sem as alterações), se você puder dar uma olhada.

/ MENU XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX /div.menu{ width: 122px; / Espaço da parte preta do menu / border: 1px solid #000000;}div.menu a{ display: block; padding-left: 5px; font-size:13px; line-height: 20px; / Espaço entre as palavras no menu / color: #000000; / Cor das letras / text-decoration: none; outline: none;} html div.menu a { height: 1%; }div.menu a:hover{ background-color: #ffe4b5; / cor do fundo quando o mouse está sobre o menu / color: #000000; / cor da letra quando o mouse está sobre o menu /}ul.corpo{ margin: 0px; padding: 0px; width: 120px; / Tamanho lateral do menu inteiro /}ul.corpo li{ display: block; margin: 0px; padding: 0px; list-style: none;}span.imagem{ display: block; width: 119px; / Posição da imagem que "abre o menu" / 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; font-size:12px; color: #000000; / cor da letra superior do menu */ font-weight: bold; background-color: #ffcf70;}

<div id="menu" class="menu"> <span class="imagem"><img src="imagens/q_up.jpg" onclick="up_down(this,'menuBody');" alt="" title=""></span> <span class="header">Introducion</span> <ul style="display: block;" id="menuBody" class="corpo"> <li><a href="#">Quem somos</a></li> </ul> </div> <div id="menu2" class="menu"> <span class="imagem"><img src="imagens/q_up.jpg" onclick="up_down(this,'menuBody2');" alt="" title=""></span> <span class="header">History</span> <ul style="display: block;" id="menuBody2" class="corpo"> <li><a href="#">Nosso passado</a></li> </ul> </div> <div id="menu3" class="menu"> <span class="imagem"><img src="imagens/q_up.jpg" onclick="up_down(this,'menuBody3');" alt="" title=""></span> <span class="header">Warranty</span> <ul style="display: block;" id="menuBody3" class="corpo"> <li><a href="#">Leia</a></li> </ul> </div> <div id="menu4" class="menu"> <span class="imagem"><img src="imagens/q_up.jpg" onclick="up_down(this,'menuBody4');" alt="" title=""></span> <span class="header">Products</span> <ul style="display: block;" id="menuBody4" class="corpo"> <li><a href="#">Produto1</a></li> <li><a href="#">Produto2</a></li> <li><a href="#">Produto3</a></li> <li><a href="#">Produto4</a></li> </ul> </div> <div id="menu5" class="menu"> <span class="imagem"><img src="imagens/q_up.jpg" onclick="up_down(this,'menuBody5');" alt="" title=""></span> <span class="header">Projects</span> <ul style="display: block;" id="menuBody5" class="corpo"> <li><a href="#">Project1</a></li> <li><a href="#">Project1</a></li> <li><a href="#">Project1</a></li> <li><a href="#">Project1</a></li> </ul> </div> <div id="menu6" class="menu"> <span class="imagem"><img src="imagens/q_up.jpg" onclick="up_down(this,'menuBody6');" alt="" title=""></span> <span class="header">Register</span> <ul style="display: block;" id="menuBody6" class="corpo"> <li><a href="#">Leia</a></li> </ul> </div> <div id="menu7" class="menu"> <span class="imagem"><img src="imagens/q_up.jpg" onclick="up_down(this,'menuBody7');" alt="" title=""></span> <span class="header">Sample Request</span> <ul style="display: block;" id="menuBody7" class="corpo"> <li><a href="#">Faça o pedido</a></li> </ul> </div> <div id="menu8" class="menu"> <span class="imagem"><img src="imagens/q_up.jpg" onclick="up_down(this,'menuBody8');" alt="" title=""></span> <span class="header">Contact Us</span> <ul style="display: block;" id="menuBody8" class="corpo"> <li><a href="#">O que você deseja?</a></li> </ul> </div>

você mudou o nome das imagens no JS tb?aki ó:var images = new Array(new Image(),new Image());	images[0].src = "arrow_up.gif";	images[1].src = "arrow_down.gif";

Então, eu mudei sim. Mas olha o código java que eu tenho

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

O que eu estou usando é o dessa página aqui: http://hunternh.110mb.com/exemplos/menu_ferramentas.html

Pelo que eu entendi do hunternh é que só é necessário acrescentar o display:none; e mudar na tag img. Está certo meu entendimento?

Obrigado.

Consegui resolver.

É o seguinte:

É necessário mudar o ul style logo abaixo da tag img.

Olhem:

_linenums:0'><ul style="display<strong class='bbc'>: none;</strong>" id="menuBody" class="corpo">

É isso, valeu a ajuda!

Pessoal, o menu é muito legal, mas será que alguém poderia me ajudar, pois eu queria utilizar o menu em uma página com quadros, e quando eu selecionasse um menu, abrisse o link no quadro principal e não em outra janela.

Desde já obrigado

Se estiver usando IFrames, bastaria alterar a criação do item assim:

m.setItens("Ferramentas","LinkParaAbrir","NomeDoIFrame","ofolder.gif");
Se for usando div's, terá que usar Ajax para trazer o conteúdo (pode aproveitar o framework que tá sendo usado, o JQuery).

Marcos muito obrigado, funcionou, após 4 dias pesquisando em toda Internet!!!

Valeu mesmo, mais uma vez obrigado.

eu queria utilizar este menu mas ao invés de clicar na setinha que fosse possível clicar diretamente no texto do menu mesmo.

alguem sabe como fazer esta alteração? :rolleyes:

belo topico

abraço