tutoriais

Flash

FrontPage

Dreamweaver

Dhtml

Html

ASP

PHP

jogos

Galerias

fóruns

Flash

TUTORIAIS DE DHTML

Um menu de navegação horizontal.

Este menu de navegação vertical apresenta as barras a medida que passamos com o rato. Inteiramento configurável mas não muito simples a compreender devido ao seu extenso e complexo código. "Javascriptores" este script é para programadores avançados...

Demo : "navega" no menu abaixo

1. Inserir logo após o tag <BODY>:

// Definição do objecto Menu
oMenu=new menuObj('oMenu')

// As variaveis do "style" (notação folha de estilo CSS)
//// O estilo do menu principal
oMenu.clMain='padding:5px; font-family:verdana; font-size:10px; font-weight:bold'
//// O estilo dos sub-menus 
oMenu.clSub='padding:5px; font-family:verdana; font-size:10px'
//// O estilo dos sub-sub-menus
oMenu.clSubSub='padding:5px; font-family:verdana; font-size:10px' 
//// O estilo dos links do menu principal
oMenu.clAMain='text-decoration:none; color:black'
//// O estilo dos links dos sub-menus
oMenu.clASub='text-decoration:none; color:black'
//// O estilo dos links dos sub-sub-menus
oMenu.clASubSub='text-decoration:none; color:black'

/////////////////////
oMenu.makeStyle()
/////////////////////

// As propriedades da  barra do fundo
//// 1 se querem uma barra senão 0
oMenu.backgroundbar=0 
//// A posição esquerda da barra em pixeis ou em %
oMenu.backgroundbarfromleft=200 
//// A posição verticale da barra em pixeis ou em %  
oMenu.backgroundbarfromtop=300 
//// O tamanho da barra em pixeis ou en %
oMenu.backgroundbarsize="100%" 
//// A cor da barra
oMenu.backgroundbarcolor="#ff8800"

// As dimenções dos menus
//// A altura em pixeis ou % dos elementos do menu principal
oMenu.mainheight=25 
//// A largura em pixeis ou % dos elementos do menu principal
oMenu.mainwidth=120 
//// A altura em pixeis ou % dos elementos do sub-menu 
oMenu.subheight=20 
//// A largura em pixeis ou % dos elementos do sub-menu 
oMenu.subwidth=120
//// A altura em pixeis ou % dos elementos do sub-sub-menu 
oMenu.subsubheight=20
//// A largura em pixeis ou % dos elementos do sub-sub-menu 
oMenu.subsubwidth=182

// A posição do menu principal
oMenu.subplacement=oMenu.mainwidth 
// A  relação horizontal dos sub-sub-menus
oMenu.subsubXplacement=oMenu.subwidth/1 
// A relação vertical dos sub-sub-menus
oMenu.subsubYplacement=0

// As cores dos diferentes menus
//// A cor de fundo do menu principal
oMenu.mainbgcoloroff='#ff6600'
//// A cor de fundo na passagem do rato do menu principal
oMenu.mainbgcoloron='#ffff99' 
//// A cor de fundo dos sub-menus
oMenu.subbgcoloroff='#ff9900' 
//// A cor de fundo na passagem do rato dos sub-menus
oMenu.subbgcoloron='#ffff99' 
//// A cor de fundo dos sub-sub-menus
oMenu.subsubbgcoloroff='#fee7c7' 
//// A cor de fundo na passagem do rato dos sub-sub-menus
oMenu.subsubbgcoloron='#ffff99' 
//// Para guardar a cor na passagem do rato ao clicar
oMenu.stayoncolor=1

// A velocidade do efeito
oMenu.menuspeed=10 
oMenu.menusubspeed=15

// 0 se querem linhas, 1 para as colunas
oMenu.menurows=0
// "mouse" para onmouseover, "click" para onclick
oMenu.menueventon="mouse" 
oMenu.menueventoff="mouse"

// posição dos elementos do menu

// Exemplo em % :
// com tantos valores como tem de elementos
//oMenu.menuplacement=new Array("20%","40%","60%","50%","65%")

// Exemple in px: 
// com tantos valores como tem de elementos
//oMenu.menuplacement=new Array(10,200,300,400,500)

// Exemplo para um ao lado do outro
oMenu.menuplacement=0

// Se útilizam menuplacement, devem determinar a quantidade de pixeis
// entre cada um (em pixels ou en %)
oMenu.pxbetween=0

// A posição em relação à borda esquerda
// (em pixeis ou em %)
oMenu.fromleft=200

// A posição do menu em relação ao topo
// (em pixeis ou em %)
oMenu.fromtop=300

/*****************************************
Construcção do menu de navigação
******************************************/

// Menu principal
// Main 0
//// makeMain(N°menu,'texto','link','frame_target') 
//// começa-se os N°menu a 0 e não em 1
//// coloca-se link 0 se queremos dos sub-menus
oMenu.makeMain(0,'Script DHTML',0)

// Eléments do sub-menu
	//// makeSub(N°menu,N°submenu,'texto','link',total de sub-menus,'frame_target') 
	//// começa-se os N°submenu à 0 e não em 1
	//// coloca-se link 0 se queremos dos sub-sub-menus
	oMenu.makeSub(0,0,'Efeitos textos',0,3)
	oMenu.makeSub(0,1,'Efeitos imagens',0,3)
	oMenu.makeSub(0,2,'Transições',0,3)
	
		// Eléments dos sub-sub-menus
		//// makeSubSub(N0menu,N°submenu,N°subsubmenu,'texto','link',total,'frame_target')
		//// começa-se os N°subsubmenu à 0 e não em 1
		oMenu.makeSubSub(0,0,0,'Texto em onda','../ac/00003a.php',3)
		oMenu.makeSubSub(0,0,1,'Texto com zoom','../ac/00004a.php',3)
		oMenu.makeSubSub(0,0,2,'Texto passa écran','../ac/00007a.php',3)
		
		
		oMenu.makeSubSub(0,1,0,'imagem que cai','../ad/00002a.php',5)
		oMenu.makeSubSub(0,1,1,'imagem...','#',5)
		oMenu.makeSubSub(0,1,2,'imagem...','#',5)
		oMenu.makeSubSub(0,1,3,'imagem...','#',5)
		oMenu.makeSubSub(0,1,4,'imagem...','#',5)
				
		oMenu.makeSubSub(0,2,0,'Transições...','#',7) 
		oMenu.makeSubSub(0,2,1,'Transições...','#',7)
		oMenu.makeSubSub(0,2,2,'Transições...','#',7)
		oMenu.makeSubSub(0,2,3,'Transições...','#',7)
		oMenu.makeSubSub(0,2,4,'Transições...','#',7)
		oMenu.makeSubSub(0,2,5,'Transições...','#',7)
		oMenu.makeSubSub(0,2,6,'Transições...','#',7)

//MAIN 1		
oMenu.makeMain(1,'FAQ Html',0)
	oMenu.makeSub(1,0,'As tabelas','#',5)
	oMenu.makeSub(1,1,'As imagens','#',5)
	oMenu.makeSub(1,2,'As frames','#',5)
	oMenu.makeSub(1,3,'Os formulários','#',5)
	oMenu.makeSub(1,4,'Diversos Html','#',5)

//MAIN 2		
oMenu.makeMain(2,'Links',0)
	oMenu.makeSub(2,0,'Yahoo',0,2)
	oMenu.makeSub(2,1,'Sapo','www.sapo.pt',2)
		oMenu.makeSubSub(2,0,0,'Yahoo.com','#',2)
		oMenu.makeSubSub(2,0,1,'Yahoo.fr','#',2)
		
/*******************************************
Fim da construcção do menu
********************************************/
		
oMenu.construct()

A configuração está todo explicado no script. Para facilitar a compreenção, a imagem abaixo valerá mais do que muitas palavras.

Copiar o ficheiro coolmenus2.js e coloca-lo no mesmo local da vossa página.

ANÚNCIOS