Last Updated: March 25, 2021
·
11
· Joyce Rufino

Como fazer Menu Simples Horizontal HTML5 é CSS3

Como criar um Menu Simples Horizontal somente com HTML5 é CSS3

Olá meu nome é Joyce, eu sou estudante de programação. Atualmente estou estudando HTML5 e CSS3 vim aqui mostrar como eu criei este menu! Aceitos críticas construtivas,dicas para melhorar agradeço! Vamos lá!

1° começando o código HTML básico, depois,vamos colocar um nav e dentro deste elemento vai ficar os links do menu.

<!DOCTYPE html>

<html>

<head>

<title>Menu Simples</title>

</head>

<body>

<nav>

    <a href="#">HOME</a>

    <a href="#">SOBRE MIM</a>

    <a href="#">PRODUTOS</a>

    <a href="#">SERVIÇOS</a>

    <a href="#">CONTATO</a>

</nav>

</body>

</html>

De HTML terminamos agora nós vamos para o CSS! Booora lá!

Eu escolhi a opção do CSS incorporado,para isso use a tag style dentro da tag head, mas você pode criar um arquivo css é linka-lo ao documento html funcionará do mesmo jeito.

1° Vamos resetar os valores padrão de margin(espaço externo) é padding(espaço interno), vão ficar com o valor de 0px,como podemos ver abaixo:

*{

  margin: 0px;

  padding: 0px;

}

}

body{ (mudei a cor padrão da página para vocês verem melhor,mas não é necessário)

    background-color: grey;

}

2° Agora vamos estilizar os links do menu.

a{

    text-decoration: none;  (tira a decoração padrão do link)

    padding-left: 15px;   (espaçamentos internos esquerdo,direito,de cima é de baixo todos em 15px)

    padding-right: 15px;

    padding-top: 15px;

    padding-bottom: 15px;

    font-size: 17px;

    color: white;   (cor do link no caso,branca)

    text-align: center;  (texto centralizado)

    line-height: 50px; (linha na altura de 50px isso é a altura em que o texto que está centralizado ficará.)

}

3°Depois disso, vamos estilizar o nav.

nav{

    background-color: black;  (cor do fundo)

    width: 600px;    (largura do menu)

    height: 50px;   (altura do menu)

}

É para finalizar,vamos usar o evento hover(quando o mouse passar por cima) no link.Então quando o mouse passar por cima do link,vai mudar a cor do fundo para rosa,cor do link para preto,terá uma borda arredondada é uma transição da cor de fundo que vai durar 2 segundos.

a:hover{

    background-color: pink;

    color: black;

    border-radius: 4px 4px 4px 4px;

    transition: background-color,color 2s;

}

É está pronto o nosso menu, espero que tenha ajudado!! bjs.