Tableless - Desenvolvimento inteligente com Padrões Web

07/07/2008
CSS

Vídeo: Menu horizontal com CSS em 5 minutos

Criar um menu horizontal com CSS é muito fácil e tráz algumas vantagens como a facilidade de fazer uma mudança no layout. Sem encostar no HTML, você pode modificar todo o visual do menu via CSS. Se quiser mudar o …

Por

Criar um menu horizontal com CSS é muito fácil e tráz algumas vantagens como a facilidade de fazer uma mudança no layout. Sem encostar no HTML, você pode modificar todo o visual do menu via CSS. Se quiser mudar o menu para a vertical, você pode fazê-lo também sem muitos problemas. Fiz um vídeo básico, mudo e rápido de 5 minutos mostrando como se faz um menu horizontal em CSS.


Menu Horizontal em 5 Minutos de Diego Eis no Vimeo.

Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://blog.cristianoweb.net Cristiano Santos

    Olá Diego,
    parabéns pelo tutorial! É incrível como um vídeo pode fazer tanta diferença no aprendizado, pois, por mais que existam vários bons tutoriais em infinitos sites pela web, quando vemos a aplicação sendo feita aos poucos, quase num “real time”, o entendimento fica absurdamente claro e perceptível.
    Mais uma vez parabéns, e um dia chego lá!
    Abraços!
    ;-)

  • Fernando

    Opa, bem legal o vídeo…
    Aproveitando o espaço, seria anti-semântico colocar o ID do menu diretamente na UL e, neste caso, deixar apenas a UL sem DIV?

  • http://muriloazevedo.com Murilo

    Muito bom Diego!

    Fernando, pode ser usado sim.

    Só no CSS, especifique o elemento seguido do nome da id em quesão.

    Exemplo:
    ul.menu{margin:0}

    Aí fica semântico! :-)

  • http://muriloazevedo.com Murilo

    Aliás.. errei no exemplo, o correto seria:

    ul#menu{margin:0}

    ;-)

  • Tiago

    Posta o HTML e CSS num link ae… Por favor…
    Valeu…

  • victor

    qual é o editor que ele usa?

    vlw ;D

  • Pingback: » Criando um Menu Horizontal com CSS - Tableless - Desenvolvimento com Padrões Web

  • Pingback: rascunho » Blog Archive » links for 2008-07-07

  • Lcei

    Valeu Diego! como sempre esses videos são ótimos e ajudam muito no aprendizado! o resto é correr atrás.. Mas, tirando um pouco desse tópico você saberia responder se tem como esconder o código css? se existe algum truque ou algo assim.. apesar que eu ando aprendendo um pouco também vendo os códigos em algumas páginas, mas..

    De qualquer modo, Obrigadão!

  • http://blog.gustavoribeiro.net Gustavo Ribeiro

    Bacana o vídeo.
    Só não entendi o porque do “display:inline”, no , se logo em seguida usa-se “float:left”.

    abraço

  • Mauricio Wolff

    só uma coisa… atrás é escrito com S… pode deletar o comentário depois de alterar. :)

  • http://menosemais.webspace.com.br/ Guilherme Mattos

    Parabéns pelo tutorial.

    Obs: Isso que eu chamo de editor html.

  • Klaus

    Muito bacana Diego,

    Fiquei curioso para saber com transportar o menu para o centro da página(?) apliquei uma solução mas deu conflito com outras.

    obrigado
    e parabéns por cada post!

  • Ana de Assis

    Oi Diego,

    Excelente essa demonstração através do vídeo!
    Adorei…Parabéns!!!

  • Mychelle Barbosa

    Ola pessoal adorei as dicas,realmente aprendi muito com elas bjussssssssssss

  • http://www.mikaelcarrara.com Mikael Carrara

    Cara, muito bom mas ficaria ainda melhor se você omitisse essa div.

    Como ul é elemento de bloco então não tem porque criar uma div e dentro dela uma ul…

    Eu faria direto >> ul#menu {}

    Só uma opinião ;)

  • http://www.turvania.com Marcio Gomes

    boa noite to começando a desenvolver site.. ate fiz um este: http://www.turvania.com , usando tabelas.. este video e muito bom parabens pelo video… naum tem ele em forma de apostilha naum? se o som ficou um pouco complicando para acompanhar.. mas ficou bom…

  • http://www.marciotoledo.com Marcio Toledo

    Ae Diego, curti o truquezinho..

    Uma coisa que aprendi quando comecei estudar webstandards / crossbrowser é que você só aprende realmente e resolve problemas se fizer o maior número de tentativas e testes possíveis no menor espaço de tempo.

    PS: O lance do espaço de tempo é pra não frustar hehehe

  • http://rangelweb.site88.net Rangel

    Legal mto bom esse lance do menu por mais fácil ke seja, ainda tem mta coisa pra melhorar…valeu!!!

  • http://marcosfelipee.blogspot.com Marcos Felipe

    Qual editor que vc usa? ele é so pra Mac?
    Qualquer coisa manda o nome e o link pro meu e-mail.. ficaria mto grato.. :)
    Abraços!

  • Talles

    sei que tem um tempo que vc colocou esta video aula ma gostaria de saber qual e o editor que vc esta usando desde ja obrigado e muito boa a sua tutoria beleza falou!

  • Enilton

    Esse vídeo realmente vai ajudar bastante à pessoas como eu por exemplo, que ainda estão iniciando na área e está a procura de um bom material.
    Parabéns ao Diego Eis!

    Olá Talles eu já usei esse editor no MAC e o nome dele é “CODA”.

    Enilton,

  • http://emconstruo Elisandro

    Ótimo tutorial,parabéns, mas testei aqui e no navegador não troca de index para as sub-páginas preenchi os links assim:
    Ex:

    INÍCIO
    SERVIÇOS
    PARCEIROS
    CONTATO
    RESTRITO

    Tem algo errado, ou tem mais alguma coisa para fazer para funcionar como menu…

    As sub páginas estão na mesma pasta do resto.

    Desde já grato…

  • Jose Pereira

    Parabens, tenho andando já algum tempo para perceber coisas simples, mas esta tua demonstração é das melhores coisas e das mais simples que eu já vi.
    Os meus parabens pela tua dedicação, a ajuda…

  • Rodrigo

    Muito Obrigado!!
    essa video aula me ajudo muito
    antes eu fazia os site e baixar os menu
    agora com essa video aula e to fazendo meu proprios menus.
    Parabéns, espero encontrar mais video aulas suas pra aprender mais.

  • Fabiane

    PERFEITO!

    Totalmente didático hehe

  • Gabriel Guerreiro

    Legal isto, muito bom!

    Mas tem como fazer links de largura fixa? E centralizados de acordo com o número de links?

  • vinicius

    Putz cara..
    Show de tutorial mesmo hein…
    Valeu
    Abraços..

  • Pingback: Teste « Carlinhoscruzeiro’s Blog

  • Karina

    Nossa, fazia MTO tempo q estava com problema no meu menu e vc simplesmente resolveu em 5 minutos. MTO OBRIGADA!!

  • Ana Paula

    Diego, muito bom esse vídeo foi fácil de acompanhar.
    Um abraço.

  • http://Diversos RUDIMAR

    Caramba, vc é bom nisso… parabens. Sinto sempre muita dificuldade em fazer com CSS mas vc deu show.

  • André

    Olá Diego,

    Parabéns, show de bola o tutorial. Eu só não consigo criar as opções de link dentro do menu. Por ex: ao arrastar o mouse sobre os menus, eu queria que os meus links aparecessem!! Você poderia me ajudar?? o que devo fazer??

    Obrigado (se quiser, pode responder direto p/ meu e-mail)

    Abraços!

  • Maurício

    Cara,muuuuuuuuitoooo boooooom!É
    como disse o nosso Cristiano Santos-quando você vê determinada aplicação ou parte de uma sendo feita em “real-time” você aprende muuuuuuito mais.Por favor,continue assim!Valeu,kra!Abraços!

  • http://scarapa.com scarapa

    nossa, muito bom mesmo! parabens :D

  • http://www.jayfolio.com.br jean

    Boa noite

    Estou iniciando agora com css, e utilizei este turial para fazer o menu do site de um cliente, porém, este menu tem um separador e não faço idéia de como colocar este separador via CSS você pode me ajudar???

    fico grato pela atenção

    abraços

    jean

  • anderson

    Valeu!!!! Salvou minha vida!

  • Davi

    Valeu ajudou muito com um simples comando float: left;

    não achava em lugar nenhum como tirar aquele espaço entre os “li”

    ate +

  • Italo

    Cara valeu ai embora seja rápido é um vídeo que deve ajudar bastante a galera muito bom esta de parabéns e obrigado ai!!

  • Gustavo

    Parabens!
    Sem mais…

  • sidney suderio

    Um vídeo faz toda a diferença quando um especialista está por tras dele.

    gostei muito, faltou os verticais, quer dizer ainda não procurei.

    grande abraço