Criando um menu vertical com HTML e CSS

Criar e personalizar um menu vertical, é muito mais simples e rápido comparado a outros modelos.

Publicado em 20/10/2020 20:36

Nós já vimos por aqui a como criar um menu de navegação horizontal, mas agora, vamos criar um menu vertical, rápido e simples.

Como as listas não ordenadas <ul>, já mantém por padrão seus filhos com display block, digitamos algumas linhas de comando a menos, e isso ajuda na otimização do site, além de economizar tempo de desenvolvimento.

Pois bem, abaixo está a nossa videoaula ensinando a criar o menu desde o começo, e logo após, o código utilizado nas aulas.

Arquivo CSS

Lembre-se de incluir o arquivo style.css dentro da pasta css/.

:root {
    --cor-principal: rgb(46, 62, 77);
    --cor-secundaria: rgb(222, 228, 235);
}

nav {
    max-width: 350px;
    width: 100%;
    background-color: aquamarine;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li{
    border-bottom: 1px solid var(--cor-secundaria);
}

nav ul li a {
    background-color: var(--cor-principal);
    color: #FFF;
    padding: 10px;
    display: block;
    text-decoration: none;
    transition: background .3s;
    text-transform: uppercase;
}

nav ul li a:hover {
    background-color: var(--cor-secundaria);
    color: var(--cor-principal);
}

Arquivo HTML

O nosso index.html fica na raiz do projeto.

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

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

<body>
    <nav    >
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Produtos</a></li>
            <li><a href="#">Quem Somos</a></li>
            <li><a href="#contato">Contato</a></li>
        </ul>
    </nav>
</body>

</html>

Por hora é isso, a gente se vê na próxima.