Tableless - Padrões Web com Pastel e Caldo de Cana

por Diego Eis Julho 7th, 2008

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

Se ainda estiver interessado, leia também:

23 Comentários

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?

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! :-)

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

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

[…] você não quiser ler, mas ver como fazer, assista um vídeo. Neste vídeo é mostrado como fazer um menu horizontal com CSS. E se quiser aprender mais, visite o Campus Online e cadastre-se grátis para ver vídeos sobre […]

rascunho » Blog Archive » links for 2008-07-07

[…] » Vídeo: Menu horizontal com CSS em 5 minutos - Tableless - Desenvolvimento com Padrões Web Criar um menu horizontal com CSS é muito fácil e tráz algumas vantagens como a facilidade de fazer uma mudança no layout. (tags: http://www.tableless.com.br 2008 mes6 dia7 at_tecp CSS menu listas links lists video *****) […]

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!

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. :)

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

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 ;)

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…

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

Rangel

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

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,

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…

Voltar para o topo

Histórico