Olá pessoal!!!
Hoje vou ensinar como fazer um menu utilizando apenas XHTML e CSS, sem o uso de imagens ou Flash. É muito simples!
Vamos lá?!
Primeiro e bom ter um conhecimento básico de CSS. Um bom lugar onde podem buscar bons tutoriais e artigos sobre CSS e no site do Maujor (http://www.maujor.com).
Ok! Continuando...
Abra o editor HTML, quem está começando pode usar o bom e velho bloco de notas do Windows.
Após abrir o editor, crie uma página chamada de menu.html, está página irá conter a estrutura do nosso menu.
Entre as tags <body> e </body> escreva:
<div id="menu">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Sobre mim">Sobre mim</a></li>
<li><a href="#" title="Portfólio">Portfólio</a></li>
<li><a href="#" title="Contato">Contato</a></li>
</ul>
</div>
Está e a estrutura do menu. Fiquem frios, vou explicar cada tag:
A primeira linha, onde está a tag <div>, significa que o menu ficará dentro dela. A div são blocos que ocupa toda a parte vertical de um site, via CSS e possível redimensionar essa tag para ocupar qualquer tamanho. O atributo id e usado pelo CSS, sua função e a identificação dentro de um documento XHTML, sendo que as id's são únicas dentro de um documento. No nosso caso essa id se chama menu.
Na segunda linha. A tag <ul> e sempre usada na construção de menus e para dados ordenados em lista, no caso de ul é para lista não ordenadas, existindo uma segunda tag <ol> (listas ordenadas). Mas normalmente se utiliza da tag <ul>.
Suas subtags e a <li> onde são colocados os itens da lista. A tag <a> e usada para hiperlink.
Obs: Todas as tags devem ser fechadas.
Agora vamos escrever nosso código CSS. Abra um novo arquivo e salve-o como menu.css.
O código abaixo está todo comentando.
div#menu
{/*Ao utilizar tag#id colocamos os valores abaixo somente onde a id menu for atributo da tag div, se houver outro id com o valor menu, não será aplicado os valores. Ex: <p id=”menu”>*/
width:100%;/*Define a largura que a div irá ocupar no navegador, neste caso vai ocupar 100% de toda a extensão horizontal. Também pode ser utilizado pixel para determinar uma largura fixa.*/
height:40px;/*Aqui foi definido que sua altura será de 40 pixeis fixo.*/
background-color:#03C;/*Nesta propriedade define a cor de fundo*/
}
div#menu ul li
{/*Aqui atacamos direto a tag ul e li que esta dentro da tag div com id menu, se houver outra lista, porem fora desta div, não receberá os parâmetros abaixo.*/
float:left;/*Fazemos a lista flutuar para a esquerda, fazendo com que a lista fique totalmente na posição horizontal.*/
padding:0 20px 0 20px;/*Define o espaçamento entre as tags li. Topo, direita, abaixo, esquerda*/
margin:10px 0 0 0;/*Colocamos que a tag ul e li ficará a 10 pixeis do topo. Topo, direita, abaixo, esquerda*/
}
div#menu ul li a
{/*Agora estamos atacando direto a tag <a> que esta dentro da lista que está entre as tags div de id menu.*/
background-color:#009;/*Define a cor de fundo da tag <a>*/
padding:0 20px 0 20px;/*Define o espaçamento esquerdo e direito*/
color:#FFF;/*Define a cor do texto*/
text-decoration:none;/*Retira o sublinhado*/
text-transform:uppercase;/*Coloca todos os caracteres em CAIXA ALTA*/
}
div#menu ul li a:hover
{/*Quando utilizamos a propriedade :hover, é sempre quando queremos que o estado do link mude quando o mouse estiver sobre o link*/
color:#009;/*Mudamos a cor, quando o mouse estiver sobre o link, a cor mudará*/
background-color:#FFF;/*Aqui fará o mesmo acima, só que mudará a cor de fundo*/
}
Depois disso só precisar fazer mais uma coisa.
No arquivo menu.html, escreva entre as tags <head> e </head> este código:
<style type="text/css">
@import url('menu.css');/*Aqui você irá colocar o caminho do arquivo menu.css. Se estiver na mesma pasta, só precisa digitar o nome do arquivo seguido de sua extensão. Caso esteja em uma pasta, como por exemplo, na pasta css, mas no mesmo diretório onde esta o arquivo menu.html, terá que digitar entre as aspas /nome_da_pasta/menu.css.*/
</style>
Qualquer duvida só postar nos comentários.
Bom! É isso ai! Espero que tenham entendido.
Até++!