Menu Html

Menu Html

Neste tutorial vamos fazer um Menu Html simples estilizado com css utilizando poucas linhas de códigos Html e Css.

Os menus são componentes ou recursos de sites que oferece aos usuários acesso rápido e intuitivo às sessões do seu projeto. Através dos menus, você consegue oferecer aos visitantes do seu site uma porta de entrada para todo seu conteúdo.

Aprenda a utilizar os elementos HTML5 e CSS3 para construir um menu muito bonito e pratico!

Mas ter apenas um menu não é o suficiente para que seu site seja efetivo. É preciso que o menu seja intuitivo, ofereça uma boa experiência para o usuário e claro, seja responsivo para que ele seja bem visto em dispositivos móveis.

Nesta seção, projetaremos uma estrutura simples na tag <nav>, <ul>, <li> e a <a> para inserir o link de destino. 

Essas são as tags que usaremos para criar o nosso Menu Html.

Vamos Adicionar o HTML

     <nav class="menu">
                  
        <ul>

             <li><a href="#" title="Home">Home</a></li>  
             <li><a href="#" title="Quem Somos">Quem Somos</a></li>
             <li><a href="#" title="Serviços">Serviços</a></li>  
             <li><a href="#" title="Fale Conosco">Fale Conosco</a></li>
                  
        </ul>
                
     </nav>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Menu.

.menu ul {
    
    list-style:none;
    width:100%;
    float:left;
    padding:0px;
    gap: 10px;
    background:#fff; 
    box-shadow: 1px 0px 1.2px 0px #e3e3e3;
}

.menu ul li a {
    
    text-decoration:none;   
    color:#5a5a5a; 
    font-family: 'open_sansregular';
}

.menu ul li {
    
    position:relative;
    display: block;
    width: 100%;
    float:left;
    margin: 4px 15px;
    padding: 0px;
    border-width: 0px 0px 3px 0px;    
    border-color:transparent;
    border-style:solid;
}

.menu ul li:hover a {
    
    color: #007cff;
    border-width: 0px 0px 3px 0px;    
    border-color:#007cff;
    border-style:solid;

}

/*768PX BREAKPOINT*/
@media (min-width:48em){

    .menu ul li { display:block; width:auto; margin: 8px 20px; padding: 10px;}

} 

Combinando as Duas seções acima com Html Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando