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

Seleção brasileira iphone wallpapers

Em clima de despedida de copa, apresento o mais novo conjunto de wallpapers para o seu iphone. Vista a camisa e junte-se a nova seleção que ressurgirá.

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.