CRIAÇÃO DE
MENU USANDO CSS
A técnica de criar de criar
menus em CSS é com certeza uma das tarefas mais apreciadas por web designers,
ela possibilita um visual atraente sem acarretar “lentidão” ao site.
Para criar menus
em CSS, começamos por criar uma lista de tópicos em formas de links para que as
páginas do site possam ser integradas as demais, para isso usamos a tag
<ul>.
Usamos a tag
<ul> quando queremos uma lista não ordenada, dentro desta tag inserimos
os tópicos da lista através da tag <li> (lista), exemplo a seguir:
<ul>
<li> <a href=”índex.html”>
HOME </a> </li>
<li>
<a href=”servicos.html”> SERVIÇOS </a> </li> <li> <a
href=”contato.html”> CONTATO </a> </li> </ul>
Na tela do computador a renderização mostrará:
·
HOME
·
SERVIÇOS
·
CONTATO
De certa forma já
temos um menu, mas convenhamos muito simples e sem graça. Ao criarmos uma div ( Do inglês division, define uma divisão ou uma seção em um documento HTML), podemos formatar esta lista
(menu) usando CSS e seu visual ficará muito mais atraente, exemplo de menu com
div:
<div
id=”menu”>
<ul>
<li> <a href=”índex.html”>
HOME </a> </li>
<li>
<a href=”servicos.html”> SERVIÇOS </a> </li> <li> <a
href=”contato.html”> CONTATO </a> </li> </ul>
</div>
Por
enquanto não haverá mudança no
visual, pois ainda
não criamos a formatação
CSS, antes, vamos entender algumas funções de
CSS:
Align: usada para alinhar blocos de informação usando
os eixos X e Y, nossa “tela” tem a parte
superior (top), direita (right), inferior (bottom) e esquerda (left),
é neste sentido que usamos a programação para mover os objetos, exemplo:
#menu {align:10px 0 0 40px}
No exemplo acima,
temos uma programação para mover um objeto (div menu) mantendo uma distância de
10pixel da margem superior, 0 entre a esquerda e inferior e 40 pixels da margem
direita.
padding: comando semelhante ao align, a diferença entre
ambos, é que usamos o padding para
alinhar o conteúdo dentro da div, enquanto o align, serve para alinhar a
própria div em relação ao demais elementos do layout.
float: propriedade que faz o objeto flutuar à esquerda
ou à direita do restante do conteúdo.
Caso você queira o menu à direita, poderá utilizar o comando a seguir:
#menu {float:right}
width: comando
que define a largura da área de um elemento. Imagine um menu na horizontal, que ocupe 80% da área da
tela, independente da resolução, neste caso, poderá utilizar o comando a
seguir:
#menu {width:80%}
height: comando CSS que define a altura de um elemento.
Assim como o comando de largura,
pode receber valores absolutos em pixel ou trabalhar com valores percentuais.
Exemplo: #menu {height:90px}
No caso do menu,
podemos aplicar diferentes formatações para os itens da lista, definir imagem
de fundo, remover o caractere característico da lista, etc. Por exemplo, o
comando list-style:none, se aplicado à ul, define que não queremos o
símbolo bullet “bolinha que precede
cada item da lista não ordenada”.
Para nossa
próxima tarefa, devemos criar um site com pelo menos três páginas; em todas as
páginas devem conter um menu em forma de lista usando a tag div, como o exemplo
abordado a seguir:
<div id=”menu”>
<ul>
<li> <a href=”índex.html”>
HOME </a> </li>
<li> <a href=”servicos.html”>
SERVIÇOS </a> </li>
<li> <a href=”contato.html”>
CONTATO </a> </li>
</ul>
</div>
Podemos aplicar
aos links do menu a propriedade transition
oferecendo feedback ao usuário. A transição do estado do link pode ser definida
com uma cor inicial, sendo esta substituída ao passarmos o mouse sobre o link.
A seguir exemplo de utilização.
#menu a {color: #000080}
#menu a:hover { #228B22}
Observe a estrutura HTML e CSS completa abaixo...
<html>
<head>
<!--Declaração do método de formatação interno do CSS-->
<style type="text/css">
/*Início da formatação da div menu, definição do tamanho, largura, posicionamento e imagem de fundo*/
#menu {
width: 980px;
height: 90px;
float: left;
padding: 30px 0 0 300px;
background: url(images/img03.jpg) no-repeat;
}
/*Definição do estilo de itens da lista do menu, a margem com valor zero define que os itens sejam centralizados*/
#menu ul {
list-style: none;
margin: 0;
}
/*Posicionamento dos itens da lista, área que sera ocupada dentro da div por cada item*/
#menu li {
display: block;
float: left;
width: 140px;
padding: 0 0 5px 0;
}
/*Define a aprarência que cada item deve possuir ao carregar a página*/
#menu a {
padding-left: 24px;
background: url(images/img04.gif) no-repeat left center;
text-decoration: none;
font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFA500;
font-style: italic;
}
/*Define a aprarência que cada item deve possuir ao carregar ao passar o mouse sobre o mesmo*/
#menu a:hover {
background-image: url(images/img05.gif);
font: bold 15px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFA500;
font-style: italic;
}
</style>
</head>
<body>
<!--div menu que é referenciada no CSS, o CSS é uma linguagem orientada a objeto, o id funciona no sentido de identificação similar à chave primária-->
<div id="menu">
<ul>
<li><a href="index.html" title="">HOME</a></li>
<li><a href="servicos.html" title="">SERVIÇOS</a></li>
<li><a href="contato.html" title="">CONTATO</a></li>
</ul>
</div>
</body>
</html>
Veja o exemplo em navegador:
Pronto! Pronto!
fonte: Profº José Roberto Lima,
