Menus Dinâmicos

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?

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

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.

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();})});	}};

Boa tarde amigos,

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

Valeu!!!

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

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

/*
**************************************
* 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");
 }
	};
};

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