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á.

Formulário de contato no blogger com o google docs

Como o blogger ainda não incluiu um formulário de contato nativo, temos que adaptar algumas maneiras para que isso seja feito. Há alguns tutoriais na web com widgets e serviços que funcionam de forma satisfatória, porém, neste tutorial, irei ensinar como usar o próprio google para realizar essa tarefa.Google docsO googledocs é uma suite de aplicativos assim como o Microsoft Office e o BrOffice (gratuito), com a vantagem de funcionar online direto do browser e de ser gratuito. 1º passoAcesse o site do Google docs e faça seu login. 2º passoClique em criar novo e selecione formulário. 3º passoNeste passo, iremos configurar nosso formulário. Entenda a estrutura e como irá funcionar: Nosso formulário terá 4 campos sendo eles: Nome, Email, Site e Mensagem. Os dois primeiros campos da imagem acima que eu não numerei são auto explicativos. Você define um título e se quiser um texto de informação sobre o formulário.1- Define o texto do campo. Deixe-o como nome. 2- Texto adicional, que po…

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.