Pular para o conteúdo principal

Crie um elegante menu com css e html

Neste tutorial você vai aprender como criar um elegante menu utilizando a dupla Html e Css em poucas linhas de códigos. Lembrando que o tutorial é voltado para o usuário iniciante, que está se aventurando como desenvolvedor front-end ou que desenvolve por hobbie.

Entendendo o menu

Nós iremos trabalhar com o Html5. O elemento Nav representa uma seção da página que contém links para outras páginas. Logo após vem o ul seguido do li com um elemento de link a dentro.

Criando o menu

Abra seu editor de códigos (eu utilizo o Sublime Text), digite as linhas abaixo e salve como menu.html.


<!DOCTYPE html>
<html lang="pt-BR">
<head>
 <meta charset="UTF-8">
 <title>Crianerd - Tutorial menu com html e css</title>
</head>
<body>
 
</body>
</html>

Agora introduziremos o menu abaixo da primeira tag body,  seguindo a imagem de conhecimento visto lá em cima.


<nav>
 <ul>
  <li><a href="#" class="titulo-blog">Crianerd</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Artigos</a></li>
  <li><a href="#">Freebies</a></li>
  <li><a href="#">Tutoriais</a></li>
 </ul>
</nav>

Salve e visualize nosso menu no navegador. Perceba sua estrutura já está pronta, restando apenas o css para dar forma. Perceba que defini uma class no primeiro link que funcionará como nosso título do blog.

Dando forma ao nosso menu com css

Adicione o seguinte código acima da tag de fechamento Head.


<!DOCTYPE html>
<html lang="pt_BR">
<head>
 <meta charset="UTF-8">
 <title>Menu</title>

<style>

/*--------------ESTILOS GLOBAIS*/
 * {
  margin:0;
  padding:0;
  list-style:none;
  text-decoration:none;
 }
 body {
  font-family: 'Montserrat', sans-serif;
  font-size:18px;
 }
 a, a:visited {
  color:#fff;
 }

/*--------------ESTILO MENU*/ 
 nav {
  background:#2E2633;
  width:100%;
  height:100px;
 }
 nav ul li {
  display:inline-block;
 }
 nav ul li a {
  display:block;
  padding:38px 20px;
  transition: all 0.6s ease;
 }
 nav ul li a:hover {
  background:#555152;
 }
 .titulo-blog, .titulo-blog:visited {
  color:#FBB829;
  font-weight:600;
  text-transform:uppercase;
 }
 a.titulo-blog:hover {
  background:none;
  color:#FBB829;
 }
</style>

</head>
<body>

O css definido em global é voltado para os aspectos gerais da página. Perceba que a fonte utlizada na tag body é a Montserrat. Para que ela funcione, vamos introduzi-la abaixo do nosso estilo.


<!DOCTYPE html>
<html lang="pt-BR">
<head>
 <meta charset="UTF-8">
 <title>Menu</title>

<style>

/*--------------ESTILOS GLOBAIS*/
 * {
  margin:0;
  padding:0;
  list-style:none;
  text-decoration:none;
 }
 body {
  font-family: 'Montserrat', sans-serif;
  font-size:18px;
 }
 a, a:visited {
  color:#fff;
 }

/*--------------ESTILO MENU*/ 
 nav {
  background:#2E2633;
  width:100%;
  height:100px;
 }
 nav ul li {
  display:inline-block;
 }
 nav ul li a {
  display:block;
  padding:38px 20px;
  transition: all 0.6s ease;
 }
 nav ul li a:hover {
  background:#555152;
 }
 .titulo-blog, .titulo-blog:visited {
  color:#FBB829;
  font-weight:600;
  text-transform:uppercase;
 }
 a.titulo-blog:hover {
  background:none;
  color:#FBB829;
 }
</style>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"/> 
</head>
<body>
 
<nav>
 <ul>
  <li><a href="#">Crianerd</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Artigos</a></li>
  <li><a href="#">Freebies</a></li>
  <li><a href="#">Tutoriais</a></li>
 </ul>
</nav>

</body>
</html>

Salve seu documento e visualize-o no navegador. Espero que tenha curtido e se tiver alguma dúvida, não deixe de me enviar via comentário ou formulário de contato.

Comentários

Postagens mais visitadas deste blog

10 super mockups grátis

Um mockup é basicamente uma maquete, uma cópia do trabalho final muitas vezes em tamanho resumido para dar a ideia do real projeto. Muitos dos mockups disponibilizados na web já possuem toda estrutura necessária e permite uma economia de tempo na hora de criar obras derivadas.

Criando um rodapé com 3 colunas

O rodapé de um site não pode ser esquecido, deixado de lado contendo apenas uma data e uma assinatura copyright. Com o passar do tempo ele ganhou força, estilo, e pode ser tão relevante quanto a barra laretal.Neste tutorial, você irá criar um rodapé de três colunas com poucos códigos.

Adicione um botão voltar ao topo no rodapé do seu blog

Um recurso muito utilizado por designers hoje em dia, em páginas que possuem muito conteúdo, são os botões “voltar ao topo”. Seu funcionamento permite que o leitor não tenha que ir até a barra de rolagem para voltar ao inicio do blog, bastando que ele simplesmente clique no botão.Para criar este recurso, basta que você utilize uma âncora (link) para o topo do seu blog.