Ir para conteúdo

Arquivado

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

hunternh

Menus no estilo do windows

Por , em Javascript

Recommended Posts

hunternh    2

hunternh
Postado

Agora gerado por JS:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"><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.menuWin{	width: 200px;	border: 1px solid #000000;}div.menuWin a{	display: block;	padding-left: 3px;	padding-right: 3px;	margin: 0px;	border: 0px;	line-height: 20px;	color: #000000;	text-decoration: none;	outline: none;}* html div.menuWin a { height: 1%; }div.menuWin a:hover{	background-color: #000066;	color: #FFFFFF;}ul.menuWin-body{	margin: 0px;	padding: 0px;	width: 200px;}ul.menuWin-body li{	display: block;	margin: 0px;	padding: 0px;	list-style: none;	clear: both;}ul.menuWin-body li div{	width: 20px;	float: left;	margin: 0px;	margin-right: 5px;	padding: 0px;}ul.menuWin-body li img{	margin: 2px;	width: 16px;	height: 16px;	padding: 0px;	border: 0px;	vertical-align: middle;}span.menuWin-arrow{		display: block;	width: 198px;	position : absolute;	text-align: right;}span.menuWin-arrow img{	padding: 3px 2px;	cursor: pointer;	width: 15px;	height: 15px;}span.menuWin-header{	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">//<![CDATA[MenuWin = function(p,id){ 	var obj = this; // referência ao próprio objeto MenuWin	var parent = document.getElementById(p); // objeto que será o container do menu	var menu = document.createElement("div"); // o menu	menu.setAttribute("id",id);	menu.className = "menuWin";		var header = document.createElement("span"); // cabeçalho do menu	header.className = "menuWin-header";	var headerText = null;			var arrow = document.createElement("img"); // imagem para retrair e extender o menu	arrow.setAttribute("alt","");	arrow.setAttribute("title","");	arrow.src = "arrow_up.gif";	arrow.onclick = function()	{		if(this.src.indexOf("up") > -1)		{			this.src="arrow_down.gif";			body.style.display = "none";		}		else		{			this.src="arrow_up.gif";			body.style.display = "block";		}	};		var arrowContainer = document.createElement("span"); // container da imagem que retrai e extende o menu	arrowContainer.className="menuWin-arrow";	arrowContainer.appendChild(arrow);		menu.appendChild(arrowContainer);	menu.appendChild(header);		var body = document.createElement("ul"); // corpo do menu	body.className = "menuWin-body";		// função para setar o cabeçalho do menu	this.setTitle = function(t)	{		headerText = document.createTextNode(t);		header.appendChild(headerText);	};		// função para setar os itens do menu	// recebe como parâmetros o texto, o link, o target e a imagem do item	this.setItens = function(t,a,tg,i)	{		var li = document.createElement("li");		var link = document.createElement("a");		var img = document.createElement("img");		var imgContainer = document.createElement("div");					if(i != null)		{			img.setAttribute("alt","");			img.setAttribute("title","");			img.src = i;			imgContainer.appendChild(img);		}				link.appendChild(imgContainer);				link.setAttribute("href",a);		if(tg != null) link.setAttribute("target",tg);		link.appendChild(document.createTextNode(t));				li.appendChild(link);				body.appendChild(li);	};	// esta função extende o container da image que retrai e extende o menu,	// para manter alinhado o texto dos itens do menu.	this.heightLine = function()	{		var linhas = body.getElementsByTagName("li");		for(i = 0; i < linhas.length; i++)		{			while(linhas[i].getElementsByTagName("div")[0].offsetHeight < linhas[i].offsetHeight)			linhas[i].getElementsByTagName("div")[0].style.height = linhas[i].offsetHeight+"px";		}	};		// função para inserir na tela o menu	this.draw = function()	{		if(headerText == null)		{			headerText = document.createTextNode("Menu");			header.appendChild(headerText);		}		menu.appendChild(body);		parent.appendChild(menu);				obj.heightLine();	};	};//]]></script></head><body>	<div id="menu">		<script type="text/javascript">		//<![CDATA[			var m = new MenuWin("menu","mm");			m.setTitle("Menu");			m.setItens("Ferramentas","#","_blank","ofolder.gif");			m.setItens("Arquivos","#",null,"ofolder.gif");			m.setItens("Outros itens","#",null,"ofolder.gif");			m.setItens("Exibir","#",null,"ofolder.gif");			m.setItens("Editar","#",null,"ofolder.gif");			m.draw();			document.write("<br />");			var m2 = new MenuWin("menu","mm2");			m2.setTitle("Menu");			m2.setItens("Ferramentas","#","_blank","ofolder.gif");			m2.setItens("Arquivos","#",null,"ofolder.gif");			m2.setItens("Outros itens","#",null,null);			m2.setItens("Exibir","#",null,"ofolder.gif");			m2.setItens("Editar","#",null,"ofolder.gif");			m2.draw();		//]]>		</script>	</div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelrizzo    0

marcelrizzo
Postado

Eu estou tentando aproveitar esse menu, mas ele sempre começa "aberto" eu gostaria que ele começasse fechado. É possível isso?Eu fiz uns testes aqui, mas todos sem sucesso.É isso ae.Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Coloquei uma nova versão com efeito:

 

se quiser que inicie aberto vai instanciar assim: var m = new MenuWin("menu","mm");

se quiser fechado: var m = new MenuWin("menu","mm",true);

 

Olhe o codigo dele:

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

sipmann    2

sipmann
Postado

cara tipo... manero teu script fiz umas mod pra mim soh q tipo...quando eu bota pra minimiza ou aparece o menu ele n da aquele "efeito" =]plzzz qq pode ta errado...tipo n foi por causa das mod pq eu zerei ele dexei como você boto e mesmo assim ele fica sem o efeitovlw e belo script! =]

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

É o seguinte o menu com imagens tem um adicional, olhe o fonte e verá que eu utilizei a biblioteca jQuery.Vou atualizar o código aqui do post com essa modificação.

Compartilhar este post

Link para o post
Compartilhar em outros sites

sipmann    2

sipmann
Postado

n sei se você atualisou mas mesmo atualisado n deu =\ continua paradão =]vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Teria que adicionar um script para verificar quais estão abertos e fechá-los, vou dar uma olhada e assim que possível eu posto aqui a modificação necessária

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Boff    0

André Boff
Postado

Olá.

 

Possuo um script seu, sobre menus, e gostaria de saber se é possível que este menu inicie fechado.

 

André Boff.

 

 

--------------------------------------------SCRIPT-----------------------------------------------------

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<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>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

andreia_sp    1

andreia_sp
Postado

André Boff, voce pode fazer esta modificação:

 

 

up_down = function(img,body)
{
if (document.getElementById(body).style.display == 'block')
{
img.src="arrow_down.gif";
document.getElementById(body).style.display = "none";
}
else
{
img.src="arrow_up.gif";
document.getElementById(body).style.display = "block";
}
};

 

e:

 

<ul id="menuBody" class="corpo" style="display: 'none'">
<ul id="menuBody1" class="corpo" style="display: 'none'">

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Boff    0

André Boff
Postado

Andréia, http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Era bem o que eu queria, obrigado. Apenas gostaria de saber duas coisas: 1. Todas vez que abro minha página no IE abre-se um pedido de verficação do javascript, pedindo para aceitar ou não o código. Tenho como tirar esse aviso, abrindo direto a página? 2. No Firefox não funcionou o código que você me enviou, ou seja, continua entrando com o menu aberto. :wacko:

 

André Boff.

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