Código Fonte - O melhor conteúdo para programadores

Autor

JavaScript

Compartilhe e guarde

Enquete

Você acredita que um dia o Firefox será mais utilizado que o IE?

Sim
Não

Home Código Fonte JavaScript - DHTML Diversos

Menu estilo Windows Explorer com fade

Ótimo codigo para usar em seu site com o estilo Windows Explorer.

Funciona perfeitamente no Internet Explorer e também no Firefox

Este é perfeito para sites sobre informática ou gêneros! Combine pastas para manter o visual mas agradável .

<script type="text/javascript" src="menu_windows3.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();

MenuWin = function(p,id,s)
{
 	var obj = this; // referência ao próprio objeto MenuWin
 	var st = (typeof s != 'undefined' && s != null) ? s : false;
	var parent = document.getElementById(p); // objeto que será o container do menu
	var menu = document.createElement("div"); // o menu
	menu.setAttribute("id",id);
	menu.setAttribute((document.all)?"className":"class","menuWin");
	
	var header = document.createElement("span"); // cabeçalho do menu
	header.setAttribute((document.all)?"className":"class","menuWin-header");
	var headerText = null;
	
	var images = new Array(new Image(),new Image());
	images[0].src = "arrow_up.gif";
	images[1].src = "arrow_down.gif";
	
	var arrow = document.createElement("img"); // imagem para retrair e extender o menu
	arrow.setAttribute("alt","");
	arrow.setAttribute("title","");
	arrow.setAttribute("src",images[0].src);
	arrow.onclick = function()
	{
		if(this.getAttribute("src").indexOf("up") > -1)
		{
			this.setAttribute("src",images[1].src);
			jQuery("#"+body.getAttribute("id")).animate({height: "hide",opacity: "hide"},"slow");
		}
		else
		{
			this.setAttribute("src",images[0].src);
			jQuery("#"+body.getAttribute("id")).animate({height: "show",opacity: "show"},"slow");
		}
	}
	
	var arrowContainer = document.createElement("span"); // container da imagem que retrai e extende o menu
	arrowContainer.setAttribute((document.all)?"className":"class","menuWin-arrow");
	arrowContainer.appendChild(arrow);
	
	menu.appendChild(arrowContainer);
	menu.appendChild(header);
	
	var body = document.createElement("ul"); // corpo do menu
	body.setAttribute("id","menuWin-body-"+id);
	body.setAttribute((document.all)?"className":"class","menuWin-body");
	
	obj.state = function()
	{
		body.style.display = "none";
		arrow.setAttribute("src",images[1].src);
	};
	
	// 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.setAttribute("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();
		if(st) obj.state();
	};

	
};
//]]>
</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",true);
			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>

MenuWin = function(p,id,s)
{
 	var obj = this; // referência ao próprio objeto MenuWin
 	var st = (typeof s != 'undefined' && s != null) ? s : false;
	var parent = document.getElementById(p); // objeto que será o container do menu
	var menu = document.createElement("div"); // o menu
	menu.setAttribute("id",id);
	menu.setAttribute((document.all)?"className":"class","menuWin");
	
	var header = document.createElement("span"); // cabeçalho do menu
	header.setAttribute((document.all)?"className":"class","menuWin-header");
	var headerText = null;
	
	var images = new Array(new Image(),new Image());
	images[0].src = "arrow_up.gif";
	images[1].src = "arrow_down.gif";
	
	var arrow = document.createElement("img"); // imagem para retrair e extender o menu
	arrow.setAttribute("alt","");
	arrow.setAttribute("title","");
	arrow.setAttribute("src",images[0].src);
	arrow.onclick = function()
	{
		if(this.getAttribute("src").indexOf("up") > -1)
		{
			this.setAttribute("src",images[1].src);
			jQuery("#"+body.getAttribute("id")).animate({height: "hide",opacity: "hide"},"slow");
		}
		else
		{
			this.setAttribute("src",images[0].src);
			jQuery("#"+body.getAttribute("id")).animate({height: "show",opacity: "show"},"slow");
		}
	}
	
	var arrowContainer = document.createElement("span"); // container da imagem que retrai e extende o menu
	arrowContainer.setAttribute((document.all)?"className":"class","menuWin-arrow");
	arrowContainer.appendChild(arrow);
	
	menu.appendChild(arrowContainer);
	menu.appendChild(header);
	
	var body = document.createElement("ul"); // corpo do menu
	body.setAttribute("id","menuWin-body-"+id);
	body.setAttribute((document.all)?"className":"class","menuWin-body");
	
	obj.state = function()
	{
		body.style.display = "none";
		arrow.setAttribute("src",images[1].src);
	};
	
	// 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.setAttribute("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();
		if(st) obj.state();
	};

};
//]]>
</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",true);
			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>

Arquivo	Tipo	Tamanho	Hits
menu_estilo_windows3_wanderson.zip	Arquivo ZIP	22,9 Kb	44819

Este código foi útil para você?

Nota	Comentário
Ainda não foi enviado nenhum comentário.

Regras:
Os comentários seguem as seguintes regras:

Todos os comentários são enviados por membros cadastrados no site.
A pontuação de comentários de conteúdo do próprio membro não serão computados.
Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
Há um limite de 10 comentários por dia para cada membro.
Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

Autenticação:	Apelido: Senha: (ainda não tem cadastro? clique aqui!)

Título:	Máximo de 30 caracteres
Comentário:	Máximo de 255 caracteres
Avaliação:

Equipe | Tabela de Pontos e Estrelas | Política de Privacidade | Mapa do Site | Fale Conosco