Menu Horizontal HTML e CSS

Menu Horizontal HTML e CSS

Criar um menu horizontal é uma habilidade essencial para qualquer desenvolvedor web. Ele é simples de implementar e dá um ar profissional ao seu site. Vamos construir um menu básico e estiloso apenas com HTML e CSS.

Crie um Menu Horizontal HTML e CSS Elegante (Passo a Passo)

Um menu de navegação horizontal é um elemento fundamental em muitos websites, proporcionando uma maneira clara e intuitiva para os usuários explorarem o conteúdo. Este artigo irá guiá-lo passo a passo na criação de um menu horizontal responsivo e com um visual atraente, utilizando HTML para a estrutura e CSS para o estilo.

✅ O que você vai aprender:

• Criar a estrutura HTML de um menu
• Aplicar estilos com CSS para deixá-lo horizontal
• Adicionar efeitos como hover (quando o mouse passa por cima)

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.

📦 Conclusão

Com este guia passo a passo, você criou um menu de navegação horizontal funcional e estilizado usando HTML e CSS.

Lembre-se que este é um ponto de partida, e você pode personalizar ainda mais o menu para corresponder ao design do seu website, adicionando submenus, animações e tornando-o totalmente responsivo para diferentes dispositivos. Experimente com as propriedades CSS para criar um menu único e atraente!

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

Baixar Código Veja Funcionando