Compartilhando informação

Menu Vertical – CSS

Mostrarei aqui como desenvolver um menu simples usando somente CSS, então vamos lá mãos a obra

nivel de dificuldade: 5,0 (*necessário conhecimento basico em html.)

1º vamos criar o arquivo CSS que será responsavel pela formatação do menu na página

tutorial

Salve este arquivo como menu.css (*este arquivo pode ser editado no bloco de notas, mas quando for salvar coloque a extenção .css )

2º Criando o arquivo Html ou PHP

tutorial

A 1ª linha é muito importante pois o href deve chamar o arquivo css que você criou ou então não irá funcionar

Salve este arquivo como menu.php ou menu.html

Lembrando a todos que eu trabalho com php então crio o menu em um arquivo separado, e faço um include na página onde será exibido o menu, pois facilita a manutenção que será de apenas um arquivo, e o menu será alterado em todas as páginas.

imagen do menu pronto

menu

Quando se passa o mouse em cima ficara assim:

menu

Antes de fazer qualquer pergunta leia atentamente os códigos dos arquivos pois é muito fácil entender os códigos.

Espero que gostem qualquer duvida ou se alguem quiser acrescentar alguma coisa deixa um comentário com seu e-mail e o que pode ser mudado, todos os créditos serão publicados.

faça as modificações que quiserem este código é livre.

Comentários em: "Menu Vertical – CSS" (13)

  1. Gostei do menu mt bom (: e foda-se os cara que só usam ctrl c ctrl v -.-‘ assim é até bom porque eles copiam e digitam, assim leem os codigos html e css e aprendam mais ;D

    Curtir

  2. Mandou bem!😉

    PS: Foda esses caras que só usam ctrl c ctrl v -.-‘

    Curtir

  3. Ari Oliveira disse:

    <style type="text/css">
    <!–
    div#menu{width: 180px;
    padding:0 px;
    margin: 0px;
    font: 12px Verdana, sans-serif;}
    div#menu ul{display: block;
    margin: 0px;
    padding: 0px; }
    div#menu ul a{display: block;
    padding: 3px 3px 3px 1em;
    text-indent:20px;color: #ccc;
    text-decoration: none;
    border: 1px solid #1a1a1a;
    border-left: 0px;
    border-right: 0px; }
    div#menu ul a:hover{ text-indent: 30px;
    color: #fff;
    border: 1px solid #9f0004;
    border-left: 0px;
    border-right:0px; }
    –>
    </style>
    </head>
    <body>
    <table width="246" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td bgcolor="#1A1A1A"><div id="menu">
    <ul>
    <a href="#">Home</a>
    <a href="#">Tutoriais CSS</a>
    <a href="#">Normas XHTML do W3C</a>
    <a href="#">Posicionamento CSS</a>
    <a href="#">Contato</a>
    </ul>
    </div></td>
    </tr>
    </table>

    Curtir

  4. aaaaaaatchaaaa
    atachaaaaaaaaaa
    rey haaaaa reyy hummmmmmmmm

    Curtir

  5. Marcelo B. de Souza disse:

    Também não gostei da dica por conta da imagem dos códigos e não do próprio código.

    Curtir

  6. Muito ruim! dá até desânimo de escrever tudo, so porque você colocou uma imagem en vez de um texto.. Nao gostei.

    Curtir

  7. muito bom….^^obrigado pela dica
    um abraço!!!!

    Curtir

  8. aff
    boto imagem nos codigos ¬¬

    Curtir

  9. Você tem algum menu vertical que trabalhe com 3 níveis.

    atenciosamente

    [],

    Curtir

  10. O tutorial está ótimo, parabéns pela criação, e por torna-lo aberto para nos iniciantes e aventureiros webdesigner. como estou aprendendo, entendi bem que o ´so fuciona em .php. Existe alguma possibilidade de fazer o mesmo em html? [isto porque em minha pagininha ainda não comprei direitos de usar php. Quando aprender vou comprar.

    Minha questão era exatamente essa: como controlar um menu à parte, tal qual voce descreve muito felizmente nesse tutorial.

    Agradeço muito pela sua inteligencia!

    Curtir

  11. Muito bom esse menu, pretendo usar no meu site, mas não ficou igualzinho não.

    Quero sugerir que o faça como texto e não como figura.

    Geralmente, nós programadores, teimosos, trabalhamos de madrugada e acabamos esquecendo algum caractere.

    À disposição,

    Mário Franco.

    Curtir

  12. Muito legal este menu! Parabéns pelo ótimo tutorial!
    Tenho uma dúvida: O google localiza as paginas linkadas por este menu? Um abraço!

    Curtir

Gostou Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Informática gratuita para você.

Compartilhando informação

Cartões com Arte

Um novo conceito em cartões. facebook.com/cartoescomarte.

Nouvelle vie au Canada

Casal em busca do seu sonho de morar no Canadá

Informática Gratuita

Compartilhando informação

Red Dreams

Quem disse que meus sonhos não podem ser vermelhos?

%d blogueiros gostam disto: