![[Tutorial] Menu simples em HTML e CSS Empty](https://2img.net/i/empty.gif)
Aprenda como criar um menu simples e fácil usando HTML e propriedades CSS.
1º: Crie um arquivo HTML em branco, ficará mais ou menos assim dependendo do programa que você está utilizando:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>
<body>
</body>
</html>
Agora vamos mudar o título para Menu Simples e começar a inserir o nosso menu.
2º: Insira uma tag <nav> seguida de uma lista não ordenada <ul> com os itens do menu <li>. O código ficará assim:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menu Simples</title>
</head>
<body>
<nav>
<ul class="menu">
<li><a href="#">Início</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Tutoriais</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</body>
</html>
3º: Agora vamos criar uma folha de estilo e linka-la ao nosso arquivo HTML, dentro da tag , com o comando:
<link href="local/arquivo.css" rel="stylesheet" type="text/css">
4º: Agora vamos aplicar as propriedades CSS.
@charset "utf-8";
* {
margin : 0;/*Remove a margem*/
padding : 0;/*Remove o espaçamento entre um item e outro*/
}
.menu {
list-style : none;/*Remove aquelas bolinhas pretas*/
}
.menu a {
width : 20%;/*Cada menu ocupará 20% da largura total, isso porque são 5 menus, logo, 5.20=100*/
float : left;/*Posicionamento da esquerda para direita na horizontal*/
padding-top : 6px;/*Deixa 6px de espaço entre o menu e a parte de cima*/
padding-bottom : 6px;/*Deixa 6px de espaço entre o menu e a parte de baixo*/
background : #4d4d4d;/*Cor de fundo dos menus*/
color : #fff;/*Cor da letra*/
text-align : center;/*Alinhamento do texto ao centro*/
text-decoration : none;/*Remove o Underscore do texto*/
text-transform : uppercase;/*Faz o texto ficar em CAIXA ALTA*/
}
.menu a:hover, .menu a:active, .menu a:focus, .menu a.thispage {
/*hover = mouse em cima, active = ativo, focus = está em foco, thispage = deixa o menu como se estivesse em hover sem estar com o mouse em cima (é necessário aplicar a classe thispage no menu de cada página. Se eu estou na página de Downloads, o menu Downloads deve ficar com a classe thispage*/
background : #43a6cb;
}
5º: Agora é só salvar e pronto.
1º: Crie um arquivo HTML em branco, ficará mais ou menos assim dependendo do programa que você está utilizando:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>
<body>
</body>
</html>
Agora vamos mudar o título para Menu Simples e começar a inserir o nosso menu.
2º: Insira uma tag <nav> seguida de uma lista não ordenada <ul> com os itens do menu <li>. O código ficará assim:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menu Simples</title>
</head>
<body>
<nav>
<ul class="menu">
<li><a href="#">Início</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Tutoriais</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</body>
</html>
3º: Agora vamos criar uma folha de estilo e linka-la ao nosso arquivo HTML, dentro da tag , com o comando:
<link href="local/arquivo.css" rel="stylesheet" type="text/css">
4º: Agora vamos aplicar as propriedades CSS.
@charset "utf-8";
* {
margin : 0;/*Remove a margem*/
padding : 0;/*Remove o espaçamento entre um item e outro*/
}
.menu {
list-style : none;/*Remove aquelas bolinhas pretas*/
}
.menu a {
width : 20%;/*Cada menu ocupará 20% da largura total, isso porque são 5 menus, logo, 5.20=100*/
float : left;/*Posicionamento da esquerda para direita na horizontal*/
padding-top : 6px;/*Deixa 6px de espaço entre o menu e a parte de cima*/
padding-bottom : 6px;/*Deixa 6px de espaço entre o menu e a parte de baixo*/
background : #4d4d4d;/*Cor de fundo dos menus*/
color : #fff;/*Cor da letra*/
text-align : center;/*Alinhamento do texto ao centro*/
text-decoration : none;/*Remove o Underscore do texto*/
text-transform : uppercase;/*Faz o texto ficar em CAIXA ALTA*/
}
.menu a:hover, .menu a:active, .menu a:focus, .menu a.thispage {
/*hover = mouse em cima, active = ativo, focus = está em foco, thispage = deixa o menu como se estivesse em hover sem estar com o mouse em cima (é necessário aplicar a classe thispage no menu de cada página. Se eu estou na página de Downloads, o menu Downloads deve ficar com a classe thispage*/
background : #43a6cb;
}
5º: Agora é só salvar e pronto.