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.
35 Comentários
Cristiano Santos 07/07/2008 às 09:03
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 07/07/2008 às 09:40
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 07/07/2008 às 10:51
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 07/07/2008 às 10:53
Aliás.. errei no exemplo, o correto seria:
ul#menu{margin:0}
Tiago 07/07/2008 às 13:00
Posta o HTML e CSS num link ae… Por favor…
Valeu…
victor 07/07/2008 às 13:57
qual é o editor que ele usa?
vlw ;D
» Criando um Menu Horizontal com CSS - Tableless - Desenvolvimento com Padrões Web 07/07/2008 às 15:51
[...] 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 07/07/2008 às 18:33
[...] » 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 09/07/2008 às 01:19
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 10/07/2008 às 09:15
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 10/07/2008 às 15:32
só uma coisa… atrás é escrito com S… pode deletar o comentário depois de alterar.
Guilherme Mattos 12/07/2008 às 20:35
Parabéns pelo tutorial.
Obs: Isso que eu chamo de editor html.
Klaus 14/07/2008 às 09:57
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 15/07/2008 às 17:39
Oi Diego,
Excelente essa demonstração através do vídeo!
Adorei…Parabéns!!!
Mychelle Barbosa 15/07/2008 às 19:31
Ola pessoal adorei as dicas,realmente aprendi muito com elas bjussssssssssss
Mikael Carrara 16/07/2008 às 00:12
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 28/07/2008 às 20:16
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 02/08/2008 às 04:08
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 23/08/2008 às 14:39
Legal mto bom esse lance do menu por mais fácil ke seja, ainda tem mta coisa pra melhorar…valeu!!!
Marcos Felipe 28/08/2008 às 10:48
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 20/09/2008 às 13:07
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 27/10/2008 às 12:48
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 14/11/2008 às 12:41
Ó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 12/02/2009 às 21:24
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 23/03/2009 às 01:46
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 09/04/2009 às 16:44
PERFEITO!
Totalmente didático hehe
Gabriel Guerreiro 05/05/2009 às 09:07
Legal isto, muito bom!
Mas tem como fazer links de largura fixa? E centralizados de acordo com o número de links?
vinicius 05/05/2009 às 20:42
Putz cara..
Show de tutorial mesmo hein…
Valeu
Abraços..
Teste « Carlinhoscruzeiro’s Blog 18/05/2009 às 16:02
[...] http://www.tableless.com.br/video-menu-horizontal-em-5-minutos [...]
Karina 05/06/2009 às 01:20
Nossa, fazia MTO tempo q estava com problema no meu menu e vc simplesmente resolveu em 5 minutos. MTO OBRIGADA!!
Ana Paula 27/06/2009 às 09:07
Diego, muito bom esse vídeo foi fácil de acompanhar.
Um abraço.
RUDIMAR 04/07/2009 às 11:01
Caramba, vc é bom nisso… parabens. Sinto sempre muita dificuldade em fazer com CSS mas vc deu show.
André 09/06/2010 às 14:15
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 18/06/2010 às 14:21
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!
scarapa 02/07/2010 às 08:33
nossa, muito bom mesmo! parabens