BGames
Olá visitante! Seja bem vindo á BGames!

Para ter total acesso ao nosso fórum é preciso que você se registre.

Registre-se Aqui!


PARA VER LINKS E IMAGENS É PRECISO SE REGISTRAR!


BGames
Olá visitante! Seja bem vindo á BGames!

Para ter total acesso ao nosso fórum é preciso que você se registre.

Registre-se Aqui!


PARA VER LINKS E IMAGENS É PRECISO SE REGISTRAR!

BGames
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

BGamesEntrar

Fórum de Desenvolvimento de Jogos e Programação


description[Tutorial] Menu simples em HTML e CSS Empty[Tutorial] Menu simples em HTML e CSS

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

description[Tutorial] Menu simples em HTML e CSS EmptyRe: [Tutorial] Menu simples em HTML e CSS

more_horiz
Muito bem explicado!

Já agora em vez de , também dava para por
.

+rep!

description[Tutorial] Menu simples em HTML e CSS EmptyRe: [Tutorial] Menu simples em HTML e CSS

more_horiz
Muito bom.
para quem estiver com dúvidas :
Spoiler :

description[Tutorial] Menu simples em HTML e CSS EmptyRe: [Tutorial] Menu simples em HTML e CSS

more_horiz
privacy_tip Permissões neste sub-fórum
Não podes responder a tópicos
power_settings_newInicie sessão para responder