Menu deslizante horizontal

Pessoal,
Gostaria de idéias ou dicas para a construção de um menu deslizante horizontal.

Como ele será?!

Tenho no meu site um banner e logo abaixo dele um menu dentro de um div de 20px X 770px

Eu gostaria de fazer um menu assim:

----------------------------------------------------------------------------------------------------------------------------------------------
[ < ] Home | Serviços | Utilidade Pública | Games | Blabla | Blabla | Blabla | Blabla | Blabla | Blabla | Blabla | B[ > ]
----------------------------------------------------------------------------------------------------------------------------------------------

Onde o simbolo [ > ] e [ < ] serão botões que guiarão a direção da rolagem do menu para apresentar os itens off-screen.

Alguém já viu algo parecido ou poderia me dar algumas dicas de como fazer???

Detalhe: Gostaria de não utilizar flash. Os itens do menu são dinâmicos.

[]'s

Cara, nunca lidei com isso, mas já vi fazerem em Flex ou em Javascript. Tem um site de JS que tem uma renca de códigos, mas não consigo lembrar o nome...

Virtual Machine Man Membro desde: 14/09/2002 16:37:24 Mensagens: 698 Offline

Cara, tem um jeito bem simples de fazer isso....

Você cria um iframe e coloca o menu dentro, nas bordas (esquerda, direita) do iframe vc coloca os botões com as setas e uma funçãozinha javascript para fazer a rolagem....

Tenho um código aqui de uma função que usei para fazer essa funcionalidade, com ela vc tera uma ideia de como fazer o scroll

function fctScrollDiv () {
	//debugger;
	
	document.getElementById("divExt").style.height = document.getElementById("divInt").style.height;
	document.getElementById("tbExt").style.height = document.getElementById("divInt").scrollHeight;
	document.getElementById("tbIntScroll").style.width = document.getElementById("divInt").scrollWidth;
}

function fctRolaDiv () {
//	debugger;
	document.getElementById("divInt").scrollTop = document.getElementById("divExt").scrollTop;
}

window.attachEvent("onload",fctScrollDiv);

function fctRolaDivHorizontal() {
	document.getElementById("divInt").scrollLeft = document.getElementById("divIntScroll").scrollLeft;
	document.getElementById("divCabec").scrollLeft = document.getElementById("divIntScroll").scrollLeft;
	
}

function obtemProporcoes() {
	
	var heightDiv = parseFloat(document.getElementById("divPrincipal").style.height);
	var widthDiv = parseFloat(document.getElementById("divPrincipal").style.width);
	var heightDivListagem = parseFloat(document.getElementById("divInt").style.height);
	
	porcentHeight = heightDiv * 100 / document.body.clientHeight / 100;
	porcentWidth = widthDiv * 100 / document.body.clientWidth / 100;
	porcentHeightDivListagem = heightDivListagem * 100 / document.body.clientHeight / 100;
}

function fctResizeDiv() {
	document.getElementById("divPrincipal").style.height = document.body.clientHeight * porcentHeight;
	document.getElementById("divPrincipal").style.width = document.body.clientWidth * porcentWidth;	
	document.getElementById("divInt").style.height = document.body.clientHeight * porcentHeightDivListagem;
	document.getElementById("divExt").style.height = document.getElementById("divInt").style.height;
}

window.attachEvent("onload", obtemProporcoes);
window.onresize = fctResizeDiv;
</script>

ps: Não se assustem, isso foi uma gambiarra em um legado...rsrs

GUJ Ranger Membro desde: 02/06/2005 16:28:38 Mensagens: 934 Offline

O RichFaces tem diversos componentes para menus. Dê uma olhada no show-room...

http://livedemo.exadel.com/richfaces-demo/richfaces/contextMenu.jsf

Resolvi a algum tempo e esqueci de postar a solução. Criei um div setando o overflow-x: hidden; e no style do li usei display: inline;

Usando o document.getElementById(id).scrollLeft fiz a rolagem do div.

[]'s

Se ajudar, esse site você monta menu em CSS e tem a opção horizontal.
http://www.cssmenumaker.com

Notícias, artigos e o maior fórum brasileiro sobre Java