Menus no estilo do windows

[hunternh 2]

Para quem precisar.

 

Menus sem imagem:

 

http://hunternh.110mb.com/exemplos/menu_ferramentas.html

 

Com imagem:

 

http://hunternh.110mb.com/exemplos/menu_ferramentas2.html

[webflex 0]

Olá,

 

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

 

Cumps [*]

[Rodney3400 0]

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

[hunternh 2]

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="" />

[marcelrizzo 0]

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>

[Kikitten 0]

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";

[marcelrizzo 0]

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.

[marcelrizzo 0]

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!

[emarone 0]

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

[Marcos Thomaz 0]

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).

[emarone 0]

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

Valeu mesmo, mais uma vez obrigado.

[kadix 0]

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:

[programador php 0]

belo topico

 

abraço