Criando um menu horizontal com HTML e CSS

Com poucas linhas de HTML e CSS conseguimos construir um menu funcional.

Publicado em 02/09/2020 22:08

Para criar um menu de navegação, precisamos unir duas grandes tecnologias, que é o HTML para fazer a marcação e o CSS para aplicar estilo as marcações. O fato é que, criar um menu pode ser simples ou complexo, tudo vai depender do projeto e como a UI/UX foi definido.

Para esse projeto, criamos uma tag do tipo <nav>, já que ela é a tag semântica destinada a agrupar elementos de navegação, como no nosso caso, um menu. Dentro da tag nav, usamos uma lista não ordenada, mas poderíamos também utilizar a ordenada, não haveria diferença, já que estilizamos ela no CSS.

É importante frisar que, o uso da tag <ul> foi proposital, já que é bem comum encontrar menus na internet e até mesmo em exemplos da W3C com esse formato de marcação.

Dentro da lista, contém vários elementos <li> e dentro deles, de fato nossos links <a> que enviam o usuário para algum destino na imensidão da internet. Para ficar um pouco mais elegante nosso menu, colocamos um efeito no evento hover (ao passar do mouse), que muda de cor com uma transição suave, além de posicionar o último elemento da lista a direita marcada em destaques.

Assista a nossa videoaula abaixo para aprender através de um passo a passo como criar o seu menu, e logo após o vídeo, você tem acesso a todos os códigos utilizados.

Estrutura do projeto:
css/
style.css
index.html

Os códigos utilizamos durante as aulas são os mesmos disponíveis abaixo.

index.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Horizontal</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <nav id="menu-h">
        <ul>
            <li>
                <a href="https://satellasoft.com">
                    Home
                </a>
            </li>

            <li><a href="https://academy.satellasoft.com">Sobre</a></li>
            
            <li><a href="#">Quem Somos</a></li>
            
            <li><a href="#">Contato</a></li>
            
            <li><a href="#">Entrar</a></li>
        </ul>
    </nav>

</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

#menu-h{
    background-color: rgb(37, 37, 39);
}

#menu-h ul {
    max-width: 800px;
    list-style: none;
    padding: 0;
}

#menu-h ul li {
    display: inline;
}

#menu-h ul li a {
    color: #FFF;
    padding: 20px;
    display: inline-block;
    text-decoration: none;
    transition: background .4s;
}

#menu-h ul li a:hover {
    background-color: rgb(24, 139, 233);
}

#menu-h ul li:last-child a {
    float: right;
    background-color: rgb(24, 139, 233);
}

Bom, por hora é isso, espero que tenha gostado e que consiga reproduzir o seu menu.

Caso houver dúvidas, deixe nos comentários, um forte abraço.