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é++!

Ninguém avaliou. Dê sua nota!

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Olá!Smile

Neste tutorial vou estar ensiando como fazer um recurso visto no site do MSN que permite mudar a cor de fundo. É bem simples. Primeiro vou mostrar como fazer usando o PHP num outro tutorial utilizando o Javascript.
Para poder acompanhar e recomendado ter conhecimentos de CSS, (X)HTML e PHP.

Primeiramente vamos montar a estrutura em XHTML:

<div class="cor-css">
   <ul>
    <li><a class="cor-preta" href=""></a></li>
    <li><a class="cor-branca" href=""></a></li>
    <li><a class="cor-amarelo" href=""></a></li>
    <li><a class="cor-azul" href=""></a></li>
    <li><a class="cor-verde" href=""></a></li>
   </ul>
</div>

A estrutura é basicamente isso, ainda falta colocar dentro do atributo href um código que irá fazer a "mágica".

?pag=<?php echo $_GET['pag']; ?>&css=verde

Explicando:

?pag=<?php echo $_GET['pag']; ?> Esté codigo irá ler na URL se há algum link que já tenha sido clicado antes do usuário alterar a cor. Por exemplo: Digamos que o usuário tenha visitado a página Artigos e resolveu trocar a cor. Sem esse código, ao clicar para mudar a cor, ele sairia da página que estava.

&css=verde  Após o sinal de fechamento do php utilizamos o & que é usado para declarar uma nova váriavel na url. Demos o nome de css que será usado pelo php para aplicar a cor clicada, depois do sinal de igual(=) damos o nome da cor.

Entre as tags <a> e </a> coloque o nome da cor ou a imagem respectiva.

A estrutura final do menu ficara assim:

<div class="cor-css">
   <ul>
    <li><a class="cor-preta" href="?pag=<?php echo $_GET['pag']; ?>&css=preto">Preto</a></li>
    <li><a class="cor-branca" href="?pag=<?php echo $_GET['pag']; ?>&css=branco">Branco</a></li>
    <li><a class="cor-amarelo" href="?pag=<?php echo $_GET['pag']; ?>&css=amarelo">Amarelo</a></li>
    <li><a class="cor-azul" href="?pag=<?php echo $_GET['pag']; ?>&css=azul">Azul</a></li>
    <li><a class="cor-verde" href="?pag=<?php echo $_GET['pag']; ?>&css=verde">Verde</a></li>
   </ul>
</div>

Agora vamos ao PHP criar o código que irá ler na url a váriavel que foi clicada.

<?php
$css = $_GET['css'];
switch ($css)
{
 case 'preto':  echo "@import url('css/cor_preto.css');";   break;
 case 'branco':  echo "@import url('css/cor_branco.css');";   break;
 case 'amarelo':  echo "@import url('css/cor_amarelo.css');";  break;
 case 'azul':  echo "@import url('css/cor_azul.css');";   break;
 case 'verde':  echo "@import url('css/cor_verde.css');";   break;
 default:   echo "@import url('css/cor_branco.css');";   break;

?>

Na primeira linha após a abertura da tag do php, declarei uma variavel que irá receber o que estiver na url.
Na segunda linha, iniciei com a estrutura condicional switch que irá buscar dentro do escopo do código o valor correspondente ao da url, quando encontrada escreverá dentro das tags <style> e </style> o codigo para importar o css.
Na ultima linha antes do fechamento das chaves, declarei a palavra-chave default que irá escrever o css padrão caso nenhum seja encontrado, ou seja, quando o usuario entrar no site pela primeita vez.

O código completo ficará assim:

<style type="text/css" media="screen">
<!--
<?php
$css = $_GET['css'];
switch ($css)
{
 case 'preto':  echo "@import url('css/cor_preto.css');";   break;
 case 'branco':  echo "@import url('css/cor_branco.css');";   break;
 case 'amarelo':  echo "@import url('css/cor_amarelo.css');";  break;
 case 'azul':  echo "@import url('css/cor_azul.css');";   break;
 case 'verde':  echo "@import url('css/cor_verde.css');";   break;
 default:   echo "@import url('css/cor_branco.css');";   break;

?>
-->
</style>

<div class="cor-css">
   <ul>
    <li><a class="cor-preta" href="?pag=<?php echo $_GET['pag']; ?>&css=preto">Preto</a></li>
    <li><a class="cor-branca" href="?pag=<?php echo $_GET['pag']; ?>&css=branco">Branco</a></li>
    <li><a class="cor-amarelo" href="?pag=<?php echo $_GET['pag']; ?>&css=amarelo">Amarelo</a></li>
    <li><a class="cor-azul" href="?pag=<?php echo $_GET['pag']; ?>&css=azul">Azul</a></li>
    <li><a class="cor-verde" href="?pag=<?php echo $_GET['pag']; ?>&css=verde">Verde</a></li>
   </ul>
</div>

O css não e misterio, dentro de cada folha de estilo que você criar para a cor expecifica, deverá conter a padronização para aquela cor. Se o fundo vai ser preto, então as cores terão de ser claras.

Bem simples! No proximo mostrarei como fazer com Javascript. Antes que vocês se faça a pergunta, "Por que não fazer logo com JavaScript?". Resposta: Bom! Podem usar junto com banco de dados, e permitindo que o seu cliente adione novas cores ataves da área adminisrativa. Ou por qualquer outro motivo! Como maior segurança!!! Laughing

É isso ai, espro que gostem!

Até++

Ninguém avaliou. Dê sua nota!

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5