Menus Dinâmicos

[hunternh 2]

Em funcionamento: http://hunternh.110mb.com/exemplos/menus.html

 

menus.js

/**************************************** Menu v1.0						  ** Autor: Wagner B. Soares			****************************************/Menu = function(x,p){	// id do menu	var id = (isString(x)) ? x : null;	// se o id não for válido, para a execução do script	if(isNull(id)) return;	// recebe o container do menu	var parent = document.getElementById(p);	//referência ao próprio objeto	var obj = this;	// cria o menu	var menu = jQuery.create("ul",{"id":id,"class":"menu"},[]);		// função para adicionar os itens do menu	this.addItem = function(m,l,d,t)	{		// recebe um novo submenu		var submenu = (!isNull(m) && obj.constructor == m.constructor) ? m : null;		// recebe o link		var link = (isString(l)) ? l : "#";		// recebe o texto do link		var descricao = (isString(d)) ? d : "link";		// recebe o alvo do link		var target = (isString(t)) ? t : "";		// cria o item do menu		var li = jQuery.create("li",{},["a",{"href":link,"target":target,"title":descricao},[descricao]]);		// se existe um novo submenu, configura-o		if(!isNull(submenu))		{			jQuery(li).append(submenu.getObj());			jQuery(li).addClass("submenu");			li.onmouseover = function(){jQuery(submenu.getObj()).show();};			li.onmouseout = function(){jQuery(submenu.getObj()).hide();};		}		// adiciona o item ao menu		jQuery(menu).append(li);	};	// retorna o próprio objeto	this.getObj = function()	{		return menu;	};	// desenha o obejto na tela	this.draw = function()	{		jQuery(parent).append(menu);		jQuery("a",menu).each(function(){jQuery(this).click(function(){this.blur();})});		jQuery("a:first","li.submenu").addClass("seta");	};};/**************************************** MenuBar v1.0					   ** Autor: Wagner B. Soares			****************************************/MenuBar = function(x,p){	// id do menu	var id = (isString(x)) ? x : null;	// se o id não for válido, para a execução do script	if(isNull(id)) return;	// recebe o container do menu	var parent = document.getElementById(p);	//referência ao próprio objeto	var obj = this;	// cria o menu	var menu = jQuery.create("ul",{"id":id,"class":"menubar"},[]);		// função para adicionar os itens do menu	this.addItem = function(m,l,d,t)	{		// recebe um novo submenu		var submenu = (!isNull(m) && m.constructor == Menu) ? m : null;		// recebe o link		var link = (isString(l)) ? l : "#";		// recebe o texto do link		var descricao = (isString(d)) ? d : "link";		// recebe o alvo do link		var target = (isString(t)) ? t : "";		// cria o item do menu		var li = jQuery.create("li",{"class":"menuvertical"},["a",{"href":link,"target":target,"title":descricao},[descricao]]);		// se existe um novo submenu, configura-o		if(!isNull(submenu))		{			jQuery(li).append(submenu.getObj());			li.onmouseover = function(){jQuery(submenu.getObj()).show();};			li.onmouseout = function(){jQuery(submenu.getObj()).hide();};		}		// adiciona o item ao menu		jQuery(menu).append(li);	};	// retorna o próprio objeto	this.getObj = function()	{		return menu;	};	// desenha o obejto na tela	this.draw = function()	{		jQuery(parent).append(menu);		var w = 0;		jQuery("li.menuvertical").each(function(){w += this.offsetWidth;});		var h = 0;		jQuery("li.menuvertical").each(function()		{			if(this.offsetHeight > h)h = this.offsetHeight;		}).each(function()		{			jQuery(this).css({"height":h});			jQuery("a:first","li.menuvertical").css({"height":h-10});		});		jQuery(menu).css({"width":w,"height":h});		jQuery("ul.menu:first","li.menuvertical").css({"margin-left":-1});		jQuery("a",menu).each(function(){jQuery(this).click(function(){this.blur();})});	}};

menus.css

ul.menubar{	margin: 0;	padding: 0;	background-color: #33CCFF;	border: 1px solid #000000;	border-right: 0px;}ul.menubar .menuvertical{	margin: 0px;	  padding: 0px;	  width: 148px;	  list-style: none;	border-right: 1px solid #000000;	float:left;}ul.menubar ul.menu{	display: none;	position: absolute;	margin: 0px;}ul.menubar a{	padding: 5px;	display:block;	text-decoration: none;	color: #000000;}ul.menubar li a:hover{	color: #FFFFFF;	background-color: #000099;}ul.menu,ul.menu ul{	margin: 0;	padding: 0;	border: 0px;	border-top: 1px solid #000000;	width: 150px;	background-color: #33CCFF;	z-index: 10;}ul.menu li{	position: relative;	list-style: none;	border: 0px;}ul.menu li a{	display:block;	text-decoration: none;	border: 1px solid #000000;	border-top: 0px;	color: #000000;	padding: 5px 10px 5px 5px;}/* Fix IE. Hide from IE Mac \*/* html ul.menu li { float: left; height: 1%; }* ul.menu li a { height: 1%; }/* End */ul.menu ul{	position: absolute;	display: none;	left: 149px;	top: -1px;}ul.menu li.submenu ul{	display: none;}ul.menu a.seta{	background: transparent url(seta.gif) right center no-repeat;}ul.menu li a:hover{	color: #FFFFFF;	background-color: #000099;}

[DarkDragonLord 0]

Tem como fazer um layout e aplicá-lo aos menus ou eles terão este formato, só vai dar pra mudar as cores no css?

[Raoni 0]

Tem como fazer um layout e aplicá-lo aos menus ou eles terão este formato, só vai dar pra mudar as cores no css?

Fala DarkDragonLord!!!! vi o link q você me passou.. será util se eu usar com somente um menu... mas eu tenho na tabela a cada linha um menu diferente, por isso que fiz o loop para varios menus.estou tendo o problema agora é que estou usando dentro da tabela o nowrap, e com o <ul ele nao funciona, mesmo assim ele passa por cima do limite da tabela. teria alguma ideia???o codigo que estou usando é esse:

<table border = 1><tr> <td nowrap>   <ul id="quebras5">		 <li class="menuparent">			 <a href="#">raoni de mello caridade martins</a>		 </li>	</ul>	 </td></tr></table>

se eu tirar o <ul ele funciona certinho.. nao deixa quebrar o conteudo dentro da celula, mas com o <ul ele passa por cima. teria alguma ajuda???obrigado!!Raoni

[hunternh 2]

Com esse script que postei aqui você pode colocar quantos menus quiser na tela é só informar um id diferente para cada menu.Na questão do layout, é totalmente configurável através do css.

[nilsonuehara 0]

Hunternh,

parabéns pelo código... show de bola.

Aproveitei e fiz uma pequena modificação no menus.js para que ele aceite mais um parâmetro, o ONCLICK (no meu caso, eu quero que ao clicar em um determinado item de menu, ele execute uma função).

Fiz de forma não obstrutiva, pois da forma convencional não funciona no IEca ;)

 

um abração.

 

Nilson Uehara

 

/**************************************** Menu v1.0						  ** Autor: Wagner B. Soares			****************************************/Menu = function(x,p){	// id do menu	var id = (isString(x)) ? x : null;	// se o id não for válido, para a execução do script	if(isNull(id)) return;	// recebe o container do menu	var parent = document.getElementById(p);	//referência ao próprio objeto	var obj = this;	// cria o menu	var menu = jQuery.create("ul",{"id":id,"class":"menu"},[]);		// função para adicionar os itens do menu	this.addItem = function(m,l,d,t,onclick)	{		// recebe um novo submenu		var submenu = (!isNull(m) && obj.constructor == m.constructor) ? m : null;		// recebe o link		var link = (isString(l)) ? l : "#";		// recebe o texto do link		var descricao = (isString(d)) ? d : "link";		// recebe o alvo do link		var target = (isString(t)) ? t : "";		// cria o item do menu//Substituição...		//var li = jQuery.create("li",{},["a",{"href":link,"target":target,"title":descricao},[descricao]]);		var ahref= jQuery.create("a",{"href":link,"target":target,"title":descricao},[descricao]);		if (onclick!=undefined){			ahref.onclick = function(){				onclick();				return false;			}		}		var li   = jQuery.create("li",{},[ahref]);//--		// se existe um novo submenu, configura-o		if(!isNull(submenu))		{			jQuery(li).append(submenu.getObj());			jQuery(li).addClass("submenu");			li.onmouseover = function(){jQuery(submenu.getObj()).show();};			li.onmouseout = function(){jQuery(submenu.getObj()).hide();};		}		// adiciona o item ao menu		jQuery(menu).append(li);	};	// retorna o próprio objeto	this.getObj = function()	{		return menu;	};	// desenha o obejto na tela	this.draw = function()	{		jQuery(parent).append(menu);		jQuery("a",menu).each(function(){jQuery(this).click(function(){this.blur();})});		jQuery("a:first","li.submenu").addClass("seta");	};};/**************************************** MenuBar v1.0					   ** Autor: Wagner B. Soares			****************************************/MenuBar = function(x,p){	// id do menu	var id = (isString(x)) ? x : null;	// se o id não for válido, para a execução do script	if(isNull(id)) return;	// recebe o container do menu	var parent = document.getElementById(p);	//referência ao próprio objeto	var obj = this;	// cria o menu	var menu = jQuery.create("ul",{"id":id,"class":"menubar"},[]);		// função para adicionar os itens do menu	this.addItem = function(m,l,d,t,onclick)	{		// recebe um novo submenu		var submenu = (!isNull(m) && m.constructor == Menu) ? m : null;		// recebe o link		var link = (isString(l)) ? l : "#";		// recebe o texto do link		var descricao = (isString(d)) ? d : "link";		// recebe o alvo do link		var target = (isString(t)) ? t : "";		// cria o item do menu//Substituição...		//var li = jQuery.create("li",{"class":"menuvertical"},["a",{"href":link,"target":target,"title":descricao},[descricao]]);		var ahref= jQuery.create("a",{"href":link,"target":target,"title":descricao},[descricao]);		if (onclick!=undefined){			ahref.onclick = function(){				onclick();				return false;			}		}		var li   = jQuery.create("li",{"class":"menuvertical"},[ahref]);//--		// se existe um novo submenu, configura-o		if(!isNull(submenu))		{			jQuery(li).append(submenu.getObj());			li.onmouseover = function(){jQuery(submenu.getObj()).show();};			li.onmouseout = function(){jQuery(submenu.getObj()).hide();};		}		// adiciona o item ao menu		jQuery(menu).append(li);	};	// retorna o próprio objeto	this.getObj = function()	{		return menu;	};	// desenha o obejto na tela	this.draw = function()	{		jQuery(parent).append(menu);		var w = 0;		jQuery("li.menuvertical").each(function(){w += this.offsetWidth;});		var h = 0;		jQuery("li.menuvertical").each(function()		{			if(this.offsetHeight > h)h = this.offsetHeight;		}).each(function()		{			jQuery(this).css({"height":h});			jQuery("a:first","li.menuvertical").css({"height":h-10});		});		jQuery(menu).css({"width":w,"height":h});		jQuery("ul.menu:first","li.menuvertical").css({"margin-left":-1});		jQuery("a",menu).each(function(){jQuery(this).click(function(){this.blur();})});	}};

[Bela Pri 0]

Boa tarde amigos,

 

Este menu sobrepõe qualquer publicação flash que tenha na página?

 

Valeu!!!

[jack21 0]

Show de Bola o script...parabéns!

 

Estou implantando ele em meu CMS e fiz algumas melhorias que julguei mais práticas.

 

Posso passar direto para você (autor) ou posto aqui mesmo?

 

Grande abraço

[jack21 0]

Segue abaixo código que alterei....

 

Para utilizar basta chamar conforme exemplo abaixo.

 

var menu = new Menu("vertical ou horizontal", "id-do-elemento-onde-o-menu-sera-adicionado");
2
3menu.addItem({menu:null, link:"#nogo", desc:"Principal", onclick:"location.replace('index.php');"});
4

/*
 **************************************
 * Menu v1.0
 * Autor: Wagner B. Soares
 * Alterações: Jackson Caset
 **************************************
 */
Menu = function(x,p) {
	// id do menu
	var tipo = (isString(x)) ? x : null;
	// se o tipo não for válido, para a execução do script
	if(isNull(tipo)) return;
	// recebe o container do menu
	var parent = document.getElementById(p);
	//referência ao próprio objeto
	var obj = this;
	// cria o menu
	var menu = $j('<ul id="menu-'+tipo+'" class="menu"></ul>');
	
	// função para adicionar os itens do menu
	this.addItem = function(par) { //m,l,d,t,onclick
		// recebe um novo submenu
		var submenu = (!isNull(par.menu) && obj.constructor == par.menu.constructor) ? par.menu : null;
		// recebe o link
		var link = (isString(par.link)) ? par.link : "#";
		// recebe o texto do link
		var descricao = (isString(par.desc)) ? par.desc : "link";
		// recebe o alvo do link
		var target = (isString(par.target)) ? par.target : "";
		// cria evento
		var onclick = (isString(par.onclick)) ? par.onclick : "";
		
		// cria o item do menu
		var ahref = $j('<a href="'+link+'" title="'+descricao+'" '+(target != '' ? 'target="'+target+'"' : '')+' '+(onclick != '' ? 'onclick="'+onclick+'"' : '')+'>'+descricao+'</a>');
		var li = $j('<li></li>').append(ahref);

		// se existe um novo submenu, configura-o
		if(!isNull(submenu)) {
			$j(li).append(submenu.getObj());
			$j(li).addClass("submenu");
			li.hover(
				function(){ $j(submenu.getObj()).show(); },
				function() { $j(submenu.getObj()).hide(); }
			);
		}
		// adiciona o item ao menu
		$j(menu).append(li);
	};
	// retorna o próprio objeto
	this.getObj = function() {
		return menu;
	};
	// desenha o obejto na tela
	this.draw = function() {
		if(tipo == 'horizontal') {
			$j(parent).append(menu);
			var w = 0;
			$j("li.menuvertical").each(function(){w += this.offsetWidth;});
			var h = 0;
			$j("li.menuvertical").each(function() {
				if(this.offsetHeight > h)h = this.offsetHeight;
			}).each(function() {
				$j(this).css({"height":h});
				$j("a:first","li.menuvertical").css({"height":h-10});
			});
			$j(menu).css({"width":w,"height":h});
			$j("ul.menu:first","li.menuvertical").css({"margin-left":-1});
			$j("a",menu).each(function(){$j(this).click(function(){this.blur();})});
		} else {
			$j(parent).append(menu);
			$j("a",menu).each(function(){ $j(this).click(function(){this.blur();}) });
			$j("a:first","li.submenu").addClass("seta");
		}
	};
};

[jack21 0]

Ola Pessoal!

 

Não sei se este tópico ja esta morto, mas fiz alterações interessantes para criar menus drop down com jquery.

 

Deêm uma avaliada no exemplo.

 

http://www.softdesign.inf.br/jquery/menu/

 

Bem simples e totalmente configurável.

 

Grande abraço a todos