Crie um elegante menu com css e html
Autor: Helder salema | Publicado: 2016-07-27T19:24:00-03:00

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 menuNó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 menuAbra seu editor de códigos (eu utilizo o Sublime Text), digite as linhas abaixo e salve como menu.html.
&lt;!DOCTYPE html&gt;
&lt;html lang="pt-BR"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Crianerd - Tutorial menu com html e css&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 
&lt;/body&gt;
&lt;/html&gt; Agora introduziremos o menu abaixo da primeira tag body,&nbsp; seguindo a imagem de conhecimento visto lá em cima.
&lt;nav&gt;
 &lt;ul&gt;
  &lt;li&gt;&lt;a href="#" class="titulo-blog"&gt;Crianerd&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Artigos&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Freebies&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Tutoriais&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/nav&gt; 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 cssAdicione o seguinte código acima da tag de fechamento Head.
&lt;!DOCTYPE html&gt;
&lt;html lang="pt_BR"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Menu&lt;/title&gt;

&lt;style&gt;

/*--------------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;
 }
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
 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.
&lt;!DOCTYPE html&gt;
&lt;html lang="pt-BR"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Menu&lt;/title&gt;

&lt;style&gt;

/*--------------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;
 }
&lt;/style&gt;
&lt;link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"/&gt; 
&lt;/head&gt;
&lt;body&gt;
 
&lt;nav&gt;
 &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Crianerd&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Artigos&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Freebies&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Tutoriais&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/nav&gt;

&lt;/body&gt;
&lt;/html&gt;
 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.