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

Criando um layout simples com HTML e CSS

Deixe a barra de tarefas do windows 7 igual a do xp

Elegante menu azul no photoshop