Bgames
Olá visitante! Seja bem vindo ao nosso fórum!

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

Cadastre-se Aqui!


PARA VER LINKS E IMAGENS É PRECISO SE REGISTRAR!

[Tutorial] Menu simples em HTML e CSS

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[Tutorial] Menu simples em HTML e CSS

Mensagem por Erictemponi em Seg 30 Mar 2015 - 12:29

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.

Erictemponi


Mensagens : 1825
Pontos : 7296
Evolução : 2


Ver perfil do usuário http://www.fury-share.blogspot.com.br/

Voltar ao Topo Ir em baixo

Re: [Tutorial] Menu simples em HTML e CSS

Mensagem por SkyLiner em Seg 30 Mar 2015 - 13:48

Muito bem explicado!

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

+rep!

SkyLiner


Mensagens : 1294
Pontos : 2591

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Tutorial] Menu simples em HTML e CSS

Mensagem por Aquilla em Seg 30 Mar 2015 - 22:33

Muito bom.
para quem estiver com dúvidas :
Spoiler:
[Você precisa estar registrado e conectado para ver esta imagem.]

Aquilla


Mensagens : 1305
Pontos : 16155

Ver perfil do usuário http://www.google.com.br

Voltar ao Topo Ir em baixo

Re: [Tutorial] Menu simples em HTML e CSS

Mensagem por Conteúdo patrocinado Hoje à(s) 10:36


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum