Criando um menu vertical com HTML e CSS

Gunnar CorreaGunnar Correa20/10/2020 às 20:36:01 - 207 acessos

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


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.


css menu html menu menu vertical como fazer um menu criando menu com html menu vertical html menu de navegação html menu para sites html nav

Compartilhe nas redes sociais



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.