Criando um menu horizontal com HTML e CSS

Gunnar CorreaGunnar Correa02/09/2020 às 22:08:22 - 170 acessos

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


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.
 


html e css menu html menu horizontal menu css menu site criando menu css nav navbar css

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários