Menu Horizontal Html e Css

Menu Horizontal Html e Css

Neste artigo veremos como criar um menu de navegação. para isso precisamos do HTML e CSS.

Este código cria um menu horizontal simples com efeito ao passar o mouse.

Vamos Adicionar o HTML.

Nesta seção, projetaremos uma estrutura simples na tag html <ul>. temos dentro da tag <ul> a tag <li> e <a> para estruturarmos o menu.

Veja o código html abaixo.

     <ul>
         <li><a href="#" class="mymenu" title="Home">Home</a></li>
         <li><a href="#" class="mymenu" title="Sobre">Sobre</a></li>
         <li><a href="#" class="mymenu" title="Portfolio">Portfolio</a></li>
         <li><a href="#" class="mymenu" title="Contato">Contato</a></li>
     </ul>

Vamos Adicionar o Css.

Nesta seção, usaremos algumas propriedades CSS para projetar o Menu Horizontal. para obter o Efeito de Hover de borda no menu utilizaremos a propriedade border-bottom no css para criarmos um efeito de Borda quando passar o mouse.

ul {
    
    width:100%; 
    float:left; 
    text-align:center; 

}

li {

    padding-right: 20px;
    display: inline-block;
    list-style:none;

}

li .mymenu {

   font-family: 'open_sansbold';
   font-size:1.6em;
   text-decoration: none;
   color:#4c4c4c;
   -webkit-border-box: 0 1px 0 0 #4c4c4c;
   border-bottom: 4px solid transparent;
   -webkit-transition: border-bottom .3s linear;

}

li .mymenu:hover {
    
    border-bottom:4px solid #4c4c4c;
}

Nesta seção, combinaremos as duas seções acima para criar o nosso Menu Horizonral Utilizando HTML + CSS.

Código completo veja o resultado do nosso menu horizontal html e css !

Baixar Código Veja Funcionando