facebook
googlemais
twitter
imagem

Menus com CSS

Postado por :Jairo lima em 20/02/2014

Menus com CSS

As folhas de estilo (css) nos dão muitas possibilidades de estilização de links, criando efeitos variados para menus tanto horizontais como menus verticais. A forma mais comum de se fazer isso é utilizando das listas do HTML, tanto as ordenadas (ol) como as não ordenadas (ul).
Por que usar listas? Por que seus itens ficam mais organizados, com uma estrutura limpa mesmo quando a folha de estilo (css) não está sendo carregada ou o próprio browser não a suporta. É possível inclusive inserir mais itens nestas listas quando for necessário, sem causar nenhum transtorno.


Este tópico irá fornecer exemplos práticos de menus, utilizando-se listas e parágrafos. Serão utilizados também recursos que darão um aspecto profissional ao menu.


Menu vertical


O primeiro exemplo será o de um menu vertical simples:


 body{ background-color:#ececec;}  
 *{ margin:0; padding:0;}  
   #menu{   
         width:120px;          
         background-color:#fff;                      
         border:1px solid #bababa;  
         text-align:left;  
         margin:2px 0 0 5px;  
         padding:5px 0 5px 5px;   
 }   
    #menu li{   
             list-style:none;  
             margin:7px 0 7px 0;                 
 }   
    #menu li a{   
               text-decoration:none;   
               color: #00003F;  
               padding:5px 10px 5px 5px;  
               font-family:helvetica,arial,verdana,sans-serif;  
 }   
    #menu li a:hover{          
                     background-color:#4281F4;   
                     color:#fff;  
                     padding:5px 10px 5px 5px;  
                     font-family:helvetica,arial,verdana,sans-serif;   
 }   


Neste código foi definida a estilização do nosso menu, com os seguintes atributos:


Foi delimitada a área de estilo no bloco #menu{ };


Definimos os atributos do menu, com sua largura, margem, o estilo de fonte do menu e a cor da fonte;


          

     #menu{    
            width:120px;       
            background-color:#fff;             
            border:1px solid #bababa;   
            text-align:left;   
            margin:2px 0 0 5px;   
            padding:5px 0 5px 5px;    
}    

O estilo da estrutura dos itens do nosso menu, com um espaço entre os itens da lista;


  
     #menu li{   
              list-style:none;   
              margin:5px 5px;   
 }   


Os atributos do texto utilizado nos itens do menu, com uma cor e teto sublinhado;


 
       #menu li a{   
                  text-decoration:none;   
                  color:#ff00aa;   
 }   


Evento que ocorre quando o mouse passa sobre o item da lista;


  
        #menu li a:hover{   
                         text-decoration:underline;   
                         color:#aaff00;   
 }   



Agora vamos para o código HTML:


  <ul id="menu">  
      <li><a href="index.html">Home</a></li>  
      <li><a href="produto.html">Produtos</a></li>  
      <li><a href="empresa.html">Empresa</a></li>  
      <li><a href="contato.html">Entre em contato</a></li>   
    </ul>  


Até aqui já podemos observar um menu vertical simples, com um estilo aplicado aos seus links. Agora vamos criar um menu horizontal, que em muitos casos, são aqueles menus que ficam no topo do site.


Menu horizontal


Este exemplo é bem parecido com o anterior, mas com um pequeno detalhe na css, e nosso menu passa de vertical para horizontal. Vamos lá!


 
body{ background-color:#ececec;}  
 *{ margin:0; padding:0;}  
      #menu{   
            width:100%;          
            background-color:#fff;                      
            border:1px solid #bababa;  
            text-align:left;                      
            padding:5px 0 5px 5px;  
            float:left;             
 }   
       #menu li{   
                 list-style:none;  
                 margin:10px 0 7px 12px;  
 }   
       #menu li a{   
                   float:left; 
                   text-decoration:none;   
                   color: #00003F;  
                   padding:5px 10px 5px 5px;  
                   font-family:helvetica,arial,verdana,sans-serif;  
                   margin:10px 0 7px 12px;  
 }   
        #menu li a:hover{          
                          background-color:#4281F4;   
                          color:#fff;  
                          padding:5px 10px 5px 5px;  
                          font-family:helvetica,arial,verdana,sans-serif;   
 }   


As alterações mais importantes podemos ver em dois pontos da nossa css. Veja o primeiro:


  #menu{    
       width:100%;       
       background-color:#fff;             
       border:1px solid #bababa;   
       text-align:left;             
       padding:5px 0 5px 5px;   
       float:left;     /* -----Alteramos nosso código aqui, inserindo o float! */    
  }    


O código HTML será o mesmo do exemplo anterior. O que mudará realmente será a disposição dos elementos de lista, passando de vertical para horizontal.


  <ul id="menu">  
      <li><a href="index.html">Home</a></li>  
      <li><a href="produto.html">Produtos</a></li>  
     <li><a href="empresa.html">Empresa</a></li>  
     <li><a href="contato.html">Entre em contato</a></li>   
    </ul>  


Agora é só testar no navegador.


Bem, é isso! Até o próximo post. Fui!