Como Criar Sites | Aprenda grátis como fazer seu site » tableless

Criando layout tableless (div), com Ajax.

Raoni Novellino — Tue, 05 Jan 2010 20:09:39 +0000

Vamos fazer um site com Ajax, e para quem não souber o que é Ajax, vai um breve comentário.

Ajax significa Asynchronous Javascript And XML. Quer dizer que Ajax nada mais é do que uma capacidade (ferramenta, biblioteca), de fazer com que, em Javascript, eu possa fazer requisições HTTP (e, dependendo do navegador, posso fazer outros tipo de conexões). As requisições que o Ajax faz, podem ser síncronas ou assíncronas. Se for síncrona, o script ficará esperando o retorno da requisição para continuar a executar o seu código. Se for assíncrona, o script enviará a requisição e continuará a sua execução normalmente, e o retorno dessa requisição deverá ser tratado por uma outra função.

O XML nem sempre é usado para trafegar as informações em Ajax, mas como o nome já pegou, então ficou assim mesmo, mas podemos utilizar qualquer tipo de protocolo texto (como JSON), para trafegar as informações via Ajax.

O principal motivo para desenvolver uma página (web site) com Ajax, é faze-la ficar mais interativa com o usuário, mais dinâmica e criativa.

Para saber um pouco mais sobre Ajax, acesse AJAX (programação).

O Código HTML do Layout em Div

Vamos pegar o layout do post Definindo um Layout de Website sem Tabelas (Tableless), e retirar a parte mais a direita dele, para que a parte do meio do layout, contenha somente o menu e o miolo.

O código ficará como abaixo (arquivo index.html):





Exemplo Estrutura de Site Tableless









	
		Logo

		Aqui pode ser uma imagem de background e um texto.
	

	
		
			
				Principal
				Empresa
				Produtos

				Serviços
				Contato
			
		

		
			Seção 1
			Seção 2

			Seção 3
		

		
	

	
		
			Av. xxx yyy zzz, No 765

			Manaus - AM - CEP: 89000-000

			Email: seuemail@seudominio.com.br

Maiores explicações sobre o layout, pode encontrar no link passado para o post.

As únicas mudanças foram a parte direita do layout que foi deletada, os menus agora são links (tag com atributo onclick para chamada do Javascript), e foi inserida uma linha chamando o script script.js. Esse script contém a programação em Javascript para fazer a requisição em Ajax.

Uma outra mudança foi no arquivo de folhas de estilo estilo.css. Ele está sem os estilos da parte direita do layout e foi adicionado uma classe, para a frase que indica que o Ajax está carregando uma página, no nosso caso, a frase é simplesmente “Carregando…”, mas a classe está vazia, adicione os estilos que achar necessário.

O Código Javascript

O código Javascript precisa fazer tudo que o navegador faz automáticamente quando se coloca um link no web site: enviar a requisição, esperar pela resposta, pegar a resposta quando essa estiver pronta, tratar a resposta e exibir o que for necessário.

O código do arquivo script.js vai abaixo:

function getNewHttpRequest() {
	try {
		xmlhttp = new XMLHttpRequest();
	} catch(ee) {
		try {
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch(e) {
			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch(E) {
				xmlhttp = false;
			}
		}
	}

	return(xmlhttp);
}

oAjax = getNewHttpRequest();

//Fila de conexões
fila = [];
ifila = 0;

// funcao para altear o conteudo do miolo
function ajaxHTMLmiolo(id, conteudo) {
	ajaxHTML(id, 'conteudo.php?conteudo='+conteudo);
}

//Executa a próxima conexão da fila
function ajaxRun() {
	//Abre a conexão
	oAjax.open("GET", fila[ifila][1], true);
	//Função para tratamento do retorno
	oAjax.onreadystatechange = function() {
		if (oAjax.readyState == 4) {
			//Mostra o HTML recebido
			retorno = unescape(oAjax.responseText.replace(/\+/g, " "));
			document.getElementById(fila[ifila][0]).innerHTML = retorno;
			//Roda o próximo
			ifila++;
			if(ifila < fila.length) setTimeout("ajaxRun()", 20);
		}
	};

	//Executa
	oAjax.send(null);
}

function ajaxHTML(id, url) {
	//Carregando...
	document.getElementById(id).innerHTML=""+"Carregando...";
	//Adiciona à fila
	fila[fila.length] = [id, url];
	//Se não há conexões pendentes, executa
	if((ifila+1) == fila.length) ajaxRun();
}

Agora vamos as explicações.

Começando pela função getNewHttpRequest, que não recebe parâmetro, e retorna um objeto XMLHTTP. Esse objeto é o responsável pelas requisições que iremos fazer. Os blocos try {…} catch() {…}, tentam pegar o objeto XMLHTTP de várias formas, por causa das várias formas de pegar esse objeto de navegadores diferentes. Se não conseguir nenhuma, retorna false.

Abaixo pego o objeto XMLHTTP e coloco na variável oAjax e logo abaixo defino as minhas variáveis da fila de requisições.

Por que uma fila de requisições?

Tenho uma fila de requisições para organizar as minhas requisições Ajax, pois sem ela, se o usuário clicar em vários links antes de esperar a resposta de uma requisição, ou eu tenho que instanciar vários objetos do Ajax (XMLHTML), ou vai dar um erro no script que executa a requisição, quando uma outra requisição é feita antes de esperar a primeira terminar. A fila resolve esse problema, pois somente uma requisição é feita por vez, e se houver outra requisição na fila, ela é chamada logo após a requisição atual terminar.

A função ajaxHTMLmiolo serve para fazer uma requisição em Ajax que pega o conteúdo do miolo da página, que é o conteúdo da tag div que tem o atributo id igual a miolo, nesse layout é onde o conteúdo do web site será exibido. Essa função recebe dois argumentos, o primeiro é o id do elemento que vai ser exibido o resultado da requisição, o segundo é uma string que é enviada para o servidor para saber qual conteúdo buscar para exibir. Ela chama a função genérica de requisição Ajax, a ajaxHTML, que recebe o id do elemento que vais ser alterado e a URL que vai ser requisitada.

A função ajaxHTML coloca uma requisição na fila de requisições e tenta fazer essa requisição, se a fila estiver vazia, chamando a função ajaxRun, se não estiver vazia, ela não faz nada, pois assim que for a vez da requisição colocada, ela será feita.

A função ajaxRun pega a requisição que está na vez, na fila de requisições, e a executa, pelo método GET. A linha

	oAjax.open("GET", fila[ifila][1], true);

diz que é para abrir a conexão com a URL que está na fila, pelo método GET. O último parâmetro quer dizer que essa requisição tem que ser feita pelo modo assíncrono. Se o último parâmetro for false, a requisição seria feita no modo síncrono.

Para saber mais sobre o método GET, acesse Como Funciona os Métodos GET e POST – Diferenças.

Na linha

	oAjax.onreadystatechange = function() {

estou informando ao objeto que a função seguinte é a função que eu quero que ele execute quando o estado da minha requisição mudar. Essa função normalmente é chamada de função de callback, ela fica esperando algum evento acontecer para executar, sem interromper a execução do código. Nesse caso, ela espera o evento de alteração de estado da requisição ocorrer para ser chamada, logo, ela provavelmente será chamada mais de uma vez, pois durante uma requisição o estado muda algumas vezes.

Essa função de callback vai testar se o estado atual da requisição é o estado que eu quero, com a linha:

		if (oAjax.readyState == 4) {

O estado do objeto Ajax que eu quero é igual a 4, que é o estado onde a resposta foi lida por completo. Para ver uma lista dos estados do objeto Ajax, acesse XMLHttpRequest.

Após a resposta estar pronta, eu a pego e coloco em uma variável, fazendo uma substituição de todos os sinais de “mais” (’+'), por um espaço em branco. Se faz essa substituição, pois a resposta vem codificada como URL, e nessa codificação, os espaços são convertidos em sinais de “mais” (’+'). A linha que faz isso é a linha abaixo:

		retorno = unescape(oAjax.responseText.replace(/\+/g, " "));
		document.getElementById(fila[ifila][0]).innerHTML = retorno;

A outra linha pega o elemento que tem o atributo id igual ao que foi passado para a requisição e coloca a resposta como conteúdo desse elemento, no caso do elemento em questão (div), faz o conteúdo ser exibido, mas pode ser feito para qualquer tipo de conteúdo, até um campo hidden (escondido) ou para preencher um selectbox.

		ifila++;
		if(ifila < fila.length) setTimeout("ajaxRun()", 20);

As linhas acima fazem o controle da fila, a primeira incrementa a posição da fila, fazendo a próxima requisição ser lida, se houver. A segunda linha verifica se o tamanho da fila é maior que a posição atual de leitura da fila, se for, é porque ainda existe requisição a ser feita, então ele programa um timer para em 20 milisegundos, para ser executada essa requisição.

Aqui termina a função de callback, ela será executada após o envio da requisição.

A última linha da função ajaxRun

	oAjax.send(null);

faz com que a requisição seja feita (enviada). O parâmetro dela, passado como null, indica que não estou enviando nada na requisição, porque já enviei o que eu queria pela URL passada.

O Código PHP

O código em PHP serve para fornecer o conteúdo requisitado pelo Ajax, perceba que a nossa URL da requisição Ajax tem como endereço o arquivo conteudo.php, lá na função ajaxHTMLmiolo, e o código desse arquivo (conteudo.php), vai abaixo:

Ele simplesmente pega o valor do “conteudo”, que foi passado pelo método GET (olha novamente a URL passada na função ajaxHTMLmiolo), e compara com as strings acima. Cada if faz ele colocar na variável $fileToRead um caminho para um arquivo. Na penúltima linha ele joga todo o conteúdo do arquivo para a variável $conteudoArquivo, e na última linha ele codifica para URL e imprime na “tela” com a função print. A impressão na tela, é a resposta que o Ajax pega. QUALQUER coisa que você imprima na tela, vai ser o retorno da sua requisição Ajax, até mesmo se der um erro no script PHP, caso esteja configurado para exibir o erro na tela, o Ajax vai pegar como retorno.

Não vou colocar o conteúdo dos arquivos HTML de resposta, mas você pode ver o exemplo todo rodando em http://www.comocriarsites.com/exemplos/SiteTablelessAjax/. Lá você mesmo pode pegar os arquivos HTML.

Definindo um Layout de Website sem Tabelas (Tableless)

Raoni Novellino — Sun, 19 Apr 2009 01:30:39 +0000

Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito

. Para continuar lendo esse post, você deve estar familiarizado com CSS (folha de estilos ou cascading style sheets) e com alguns estilos, principalmente com o estilo float.

Para um bom entendimento de como utilizar CSS, acesse Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2.

Para saber utilizar o estilo float, acesse Estilo Float (CSS Style Float).

Sabendo um pouco de CSS, vamos focalizar agora no que vai fazer o nosso layout, o

. Eu posso encaixar vários divs em um documento, dando estilos diferentes a eles, formando um layout agradável. Aqui vou abordar um layout normalmente utilizado, que é com um topo, um corpo e um rodapé, sendo o corpo dividido em 3 partes, uma barra de menu a esquerda, um espaço para conteúdo e uma barra lateral a direita.

Vamos ao código de exemplo, e se você quer vê-lo funcionando, acesse Exemplo Estrutura de Site Tableless.

Vou colocar o código por partes para melhor explica-lo, e no final do post está o código completo de como fazer o site com div e sem tabela (tableless).

O Cabeçalho ()





Exemplo Estrutura de Site Tableless

A primeira linha do seu código sempre que for fazer um site, tem que ser a definição do DOCTYPE, que diz aos navegadores como deve ser tratado o seu código, e para saber mais sobre o DOCTYPE (DTD – Document Type Definition), acesse O que é e para que serve o DOCTYPE ou DTD (Document Type Definition).

O atributo xmlns da tag serve para ficar nos padrões de um documento XHTML, esse atributo serve para definir o namespace que o documento utilizará. Esse valor que está no exemplo é o valor padrão.

Já dentro do cabeçalho do site (), devemos dizer aos navegadores que tipo de codificação de texto estamos utilizando, isso se faz com a tag , como definido do exemplo, diz que o texto do documento está com a codificação ISO-8859-1, que é o padrão para nossa língua portuguesa, mas existe uma codificação padrão mundial que é o famoso UNICODE (UTF-8). Se seu documento estiver escrito em um tipo de código e sua tag de definição de conteúdo estiver dizendo que está em outro, o navegador poderá exibir caracteres estranhos.

A próxima tag interessante é a , que serve para adicionar algum conteúdo externo ao documento, comumente utilizada para adicionar um arquivo de folha de estilos (CSS – Cascading Style Sheet) a um documento, como feito no exemplo. A tag adiciona no documento a folha de estilos do arquivo estilo.css.

Para fazer um site, você deve ter em mente sempre como o navegador vai vizualizar o site, então quando for criar o site, defina seu DTD – Document Type Definition sempre e também defina sempre na criação do seu site, o código de caracteres a ser utilizado (como UTF-8 e ISO-8859-1).

A Folha de Estilos do Site (CSS – Cascading Style Sheet)

body {
	margin:0px;
	background-color: #cccccc;
	font-family:"Trebuchet MS", Tahoma, Arial, Verdana;
	font-size:12px;
	color:#000;
}

#todo {
	position: relative;
	width: 750px;
	border: 1px solid black;
	margin:0px auto;
	background-color: white;
}

#topo {
	position: relative;
	width: 746px;
	height: 100px;
	border: 2px solid red;
}

#meio {
	position: relative;
	width: 750px;
	min-height: 400px;
	background-color: #eeeeee;
}

#rodape {
	width: 746px;
	height: 75px;
	border: 2px solid brown;
}

#esquerda {
	float: left;
	width: 150px;
	min-height: 400px;
	border: 2px solid green;
}

#miolo {
	float: left;
	width: 438px;
	min-height: 400px;
	border: 2px solid blue;
}

#direita {
	float: right;
	width: 150px;
	min-height: 400px;
	border: 2px solid yellow;
}

#menu {
	width: 150px;
	height: 400px;
}

.itemMenu {
	width: 140px;
	height: 21px;
	background-color: lightyellow;
	padding: 3px 0px 0px 10px;
	border-bottom: 1px solid black;
}

#logo {
	float: left;
	width: 200px;
	height: 100px;
	text-align: center;
	background-color: #cccccc;
	margin-right: 20px;
}

.secao_miolo {
	width: 428px;
	height: 150px;
	text-align: center;
	background-color: #cccccc;
	margin: 2px 5px 4px 5px;
}

.secao_direita {
	width: 140px;
	height: 100px;
	text-align: center;
	background-color: #cccccc;
	margin: 4px 5px 4px 5px;
}

#rodape_direita {
	float: right;
	width: 200px;
	text-align: right;
	margin: 5px 10px 0px 0px
}

#rodape_direita a{color: #cc6600; text-decoration: none;}
#rodape_direita a:hover{color: #cc6600; text-decoration: underline;}

Os estilos do seu site devem ser todos definidos nesse arquivo, ou você pode separar os arquivos por parte do site, por exemplo, eu tenho um arquivo para o estilo do site todo, mas do banner e do menu (rollover ou popup), que já tenho prontos e bem definidos, eu coloco em outro arquivo, como se fosse modularizar o código, se não quero o banner, só retiro os arquivos do banner, se não quero o menu, só retiro os arquivos do menu, e assim podemos fazer com outras partes do site.

Explicando rapidamente, o elemento com o identificador todo, vai ser o elemento pai de todos os outros elementos do conteúdo do site, ele vai definir o tamanho do site e alguns estilos do site, como no exemplo, a cor de fundo do site (background). O elemento com o identificador todo, vai ser dividido verticalmente em 3 partes, o topo, o meio e o rodape.

Nesse exemplo eu coloco bordas e cor de fundo nos elementos para demonstrar onde eles estão e o tamanho deles. As partes verticais do site, tem a mesma largura, que é a largura total do site. O elemento com identificador meio vai ser dividido em 3 partes horizontais: esquerda, miolo e direita.

Normalmente na esquerda fica o menu do site (se o site tiver menu), se você quiser um menu horizontal, normalmente ficaria na parte de baixo do topo, ou logo abaixo do topo, em um outro

. Fazer os ajustes para o seu site ficar com um menu diferente é fácil, coloque outro

, coloque alguns estilos nele e pronto. Ainda na parte esquerda, colocamos o estilo float: left, pois queremos que essa parte fique na esquerda, e a próxima parte fique a direita dela.

O miolo do site também fica com o estilo float: left, pois queremos que ele fique a esquerda da próxima parte que iremos colocar. Como ele vem depois do

da esquerda, o miolo ficará colado a direita deste.

A parte da direita do site fica com o estilo float: right, para ficar a direita e os outros elemento a esquerda dele.

Uma parte da nossa folha de estilos que é bem interessante são as últimas duas linhas, elas dizem que qualquer tag , dentro do elemento com o identificador rodape_direita, deve ter esses estilos atribuídos a elas. Isso é bem útil quando tenho em diferentes partes do meu site, diferentes estilos da mesma tag.

Para saber mais sobre a tag , acesse A Tag – Fazendo Link (Hyperlink).

O Código HTML do Site sem Tabelas (com
– Tableless)

Vamos colocar o site por partes, primeiro o topo, depois o meio e por fim o rodapé. Abaixo o código do topo.

O Topo




	
		Logo
		Aqui pode ser uma imagem de background e um texto.

No corpo do documento temos um elemento

que vai englobar todo o nosso site. Esse elemento

está ai para definir a largura e altura do site, qualquer tipo de fundo (cores e imagens) e o alinhamento do site no navegador. Colocamos o identificador todo nesse

. Sempre que for fazer um site, defina bem a largura do site, pois se a largura for variável, o conteúdo do site pode “quebrar” o layout, fazendo o site ficar diferente do planejado.

O primeiro elemento dentro do nosso

todo, é um

que ficará responsável pela parte de cima do site, onde podemos colocar o nome do site, um logo do site e mais coisas como propagandas e até mesmo o menu do site (se o menu for horizontal). Esse

identificamos por topo. Normalmente ele ocupa a parte de cima inteira do site, com a mesma largura do

todo. A altura é variável, depende muito do que queremos colocar no topo. Uma dica é, não colocar a altura do topo muita, pois poderá esconder muitas partes do conteúdo do site, que ficará logo abaixo, mas também não colocar a altura pouca, pois se for um site de empresa, a logo, o título ou o nome do site tem que serbem visualizado.

O Meio

	
		
			
				Principal
				Empresa
				Produtos
				Serviços
				Contato
			
		

		
			Seção 1
			Seção 2
			Seção 3
		

		
			Seção 1
			Seção 2
			Seção 3

Logo após o topo, colocamos um

identificado por meio. Nesse meio teremos o conteúdo do nosso site. No exemplo, dividimos o meio em três partes, horizontalmente. A primeira parte, mais a esquerda, colocamos um menu.

Na parte do meio colocamos algumas seções que o site pode ter, tipo algumas notícias na página principal, ou chamadas para artigos e outros. Nessa parte fica o conteúdo do nosso site, quando clicar em um item do menu, só é necessário mudar essa parte do site, e se necessário ou quiser, mudar também a terceira parte do meio, a parte da direita.

Na parte da direita podemos colocar algumas seções do site mais importantes, para dar melhor destque a elas, ou podemos colocar propagandas de todos os tipos, ou informações fixas que se quer ter em todas as seções do site.

Como essas partes do site requerem o estilo float, colocamos um

na penúltima linha com o estilo clear, para corrigir o problema de ajuste de altura. Esse jeito de corrigir pode não ser o mais elegante, mas foi o que eu achei mais fácil de fazer e sem problemas de fazer.

O Rodapé

	
		
			Av. xxx yyy zzz, No 765

			Manaus - AM - CEP: 89000-000

			Email: seuemail@seudominio.com.br

Na parte de baixo do site, temos normalmente um rodapé, que diz quem fez o site, algumas informações sobre contatos da empresa do site, tipo endereço, email, telefones e outros. Nós colocamos um

com o identificador rodape para fazer o rodapé do site. No exemplo coloquei um outro

dentro do rodape, para fazer ele ficar a direita com alguns dados de contato do site.

O Código Inteiro do Site em
– Tableless





Exemplo Estrutura de Site Tableless








	
		Logo
		Aqui pode ser uma imagem de background e um texto.
	

	
		
			
				Principal
				Empresa
				Produtos
				Serviços
				Contato
			
		

		
			Seção 1
			Seção 2
			Seção 3
		

		
			Seção 1
			Seção 2
			Seção 3
		
		
	

	
		
			Av. xxx yyy zzz, No 765

			Manaus - AM - CEP: 89000-000

			Email: seuemail@seudominio.com.br

Não esqueca do arquivo de folha de estilo (CSS), e ajustar o nome dele ao nome colocado na tag do cabeçalho do site.

Agora já podemos fazer várias modificações para o site ficar visualmente atrativo e também já sabemos como fazer um site em

de graça (grátis).

Se você quiser um site ou hospedagem profissional, acesse Panasoft.

Fazendo um Menu com MouseOver e MouseOut (Menu RollOver)

Raoni Novellino — Tue, 17 Mar 2009 18:37:05 +0000

Um menu RollOver é aquele menu que muda alguma coisa quando o mouse passa sobre um item do menu, normalmente muda as cores de fundo, mas pode mudar imagens também. Nesse post vou mostrar o código HTML para gerar o menu e também um pouco de Javascript que precisaremos para fazer a mudança.

Primeiro mostrarei o código, HTML, Javascript e um pouco de CSS. Depois vai as explicações e um exemplo de funcionamento.

Código HTML do Menu

Primeiro o código HTML do menu:

	
		
		PRINCIPAL

		
		A EMPRESA

		
		NOTÍCIAS

		
		BOLETINS

		
		ARTIGOS

		
		GALERIAS

		
		LINKS ÚTEIS

		
		FALE CONOSCO

Esse menu é feito sem tabela (tableless), que é um “novo” conceito de desenvolvimento de páginas. Para ser feito assim, normalmente usa-se muito a tag

. No código acima temos um

externo, que tem uma classe associada a ele, essa classe veremos na segunda parte do código. Dentro desse

externo, temos um

interno para cada item do menu. Cada

interno tem os atributos class, onmouseover e onmouseout, explicados abaixo:

class

- esse atributo é usado para definir uma classe de estilo (CSS) para uma tag, e todas as tags dentro dessa tag herdam parte desse estilo.

onmouseover

- esse atributo especifica uma ação a fazer quando o mouse passar por cima do que essa tag exibe, no nosso caso um item do menu. E esse atributo executa um script em Javascript, logo a função que está lá dentro (mouse_over_menu(this);) é uma função Javascript.

onmouseout

- esse atributo especifica uma ação a fazer quando o mouse sai de cima do que essa tag exibe, no nosso caso, quando o mouse sair de cima de um item do menu, esse atributo diz que é para executar a função “mouse_out_menu(this);“, essa é uma função Javascript.

Código CSS (estilos).

A seguir vem o código da classe de estilos (CSS):

O estilo para o identificador menu (#menu), define a largura (width), altura (height) e cor de fundo (background-color) do menu. Podemos ver que o

externo do nosso menu está com esse identificador (id=”menu’), Ele irá receber esses estilos para começar a construção do nosso menu rollover.

Para saber um pouco mais sobre folha de estilos (CSS) acesse: Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2.

Como vemos nos estilos acima, a única diferença entre as classe de estilo ItemOn e ItemOver é que o último tem uma imagem de fundo (background-image).

Agora a única coisa que falta fazer é o nosso código em Javascript para fazer a troca das classes de estilo dos itens do menu quando o mouse passar por cima ou sair de cime do item.

O Javascript do Menu

Como sempre, o código depois as explicações:

function mouse_over_menu(objDiv)
{
	objDiv.className = 'itemOver';
}

function mouse_out_menu(objDiv)
{
	objDiv.className = 'itemOn';
}

Vou explicar o básico sobre funções em Javascript. Para definir uma função em Javascript você deve escrever o cabeçalho da função seguido do corpo da função. No cabeçalho da função você deve colocar a palavra function seguida do nome da sua função (no caso das funções acima, mouse_over_menu e mouse_out_menu, respectivamente), seguido dos parametros passados para a função, entre parenteses.

O corpo da função deve estar todo entre chaves, e nele você coloca códigos Javascript para fazerem o que você quiser. No nosso menu, esse código vai apenas mudar a classe de estilo do objeto do elemento passado pelos parametros da função. Lá no nosso código HTML, podemos ver que foi passado um this como parametro da função, esse this indica que é para passar o objeto do elemento de onde a função está sendo chamada. No nosso caso, cada item do menu vai ser passado como um objeto Javascript para podermos modificar a sua classe.

O Código inteiro – Menu RollOver

Abaixo vai como ficaria o código inteiro do nosso menu rollover.










	
		
		PRINCIPAL

		
		A EMPRESA

		
		NOTÍCIAS

		
		BOLETINS

		
		ARTIGOS

		
		GALERIAS

		
		LINKS ÚTEIS

		
		FALE CONOSCO

Nesse link você pode ver esse código funcionando: Menu RollOver

Se gostou comente.