Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Menumania #1

Publicado em: 2006-06-11 — 24.583 visualizacoes         

Dispositivo de navegação tal como menu vertical ou barra de navegação horizontal é sem dúvida um componente de uma página Web que tem merecido grande atenção de desenvolvedores e designers e as possibilidades de construção e implementação destes dispositivos cobrem uma faixa que vai desde um agrupamento simples de links com seu comportamento padrão até sofisticados e interativos menus e barras.  

As CSS nada ficam a dever às demais técnicas de desenvolvimento e possibilitam grande flexibilidade na construção de menus e barras de navegação. O elemento HTML apropriado para a marcação é o elemento lista em suas três versões UL, OL e DL e a escolha de um deles é uma questão de avaliação das condições particulares a cada caso. Contudo não há exagero em afirmar que na grande maioria dos casos a escolha recai sobre o elemento UL.

Neste tutorial mostrarei o emprego das CSS para construir três tipos distintos de menu vertical e sua equivalente barra de navegação horizontal abordando os fundamentos da técnica, que se bem entendida possibilitará a construção de uma variedade sem limites de menus e barras.

Considerações gerais

Vamos combinar que para todas as variantes do menu, usaremos uma só marcação HTML, que é a mostrada a seguir.
Assim, não repetirei para cada caso a marcação HTML, mostrando apenas as regras CSS.
Todos os menus estão ativos no seu comportamento, isto é, não são imagens. Confira cada um deles, passando o mouse sobre os links.


<ul id="nav">
<li><a href="#">Link um</a></li>
<li><a href="#">Link dois</a></li>
<li><a href="#">Link tres</a></li>
<li><a href="#">Link quatro</a></li>
<li><a href="#">Link cinco</a></li>
</ul>

Exemplo 1

Navegação horizontal


CSS
#nav, #nav * { 
	margin:0;
	padding:0;
	}
#nav {
	font: 12px Arial, Helvetica, sans-serif;
	list-style-type: none;
	}
#nav li {
	float: left;
	}
#nav li a, #nav li a:link {
	background: #333; 
	border-right: 1px solid #f90;
	color: #f90;
	text-decoration: none;
	padding: 3px 8px 6px 8px;
	display: block;
	}
#nav li a:hover {
	color: #000;
	padding: 3px 8px 3px 8px;
	border-bottom: 3px solid #f90;
	background: #ccc;
	}
	

Navegação vertical


CSS
#nav, #nav * { 
	margin:0;
	padding:0;
	}
#nav {
	width: 100px;
	font: 12px Arial, Helvetica, sans-serif;
	list-style-type: none;
	border-left: 8px solid #f90; 
	background: #f90;
	}
* html #nav li {
	float: left;
	height: 1%;
	}
* html #nav li a { height: 1%; }

#nav li a, #nav li a:link {
	background: #333; 
	color: #f90;
	text-decoration: none; 
	margin-bottom: 1px;
	padding: 3px 0 6px 12px;
	display: block;
	}
#nav li a:hover {
	color: #000;
	padding: 6px 0 0 12px;
	border-bottom: 3px solid #f90;
	background: #ccc;
	}
	

Exemplo 2

Navegação horizontal


CSS
#nav, #nav * { 
	margin:0;
	padding:0;
	}
#nav {
	width: 100%;
	font:   bold 12px Geneva, Arial, Helvetica, sans-serif;
	list-style-type: none;
	}
#nav li {
	float: left;
	}
#nav li a, #nav li a:link {
	background: #ddd;
	border-width: 1px;
	border-color: #ffe #aaab9c #ccc #fff;
	border-style: solid;
	color: #000;
	text-decoration: none;
	padding: 3px 12px;
	display: block;
	}
#nav li a:hover {
	color: #666;
	border-color: #aaab9c #fff #fff #ccc;
	background: #eee;
	}
	

Navegação vertical


CSS
#nav, #nav * { 
	margin:0;
	padding:0;
	}
#nav {
	width: 100px;
	font: bold 12px Geneva, Arial, Helvetica, sans-serif;
	list-style-type: none;
	}
* html #nav li {
	float: left;
	height: 1%;
	}
* html #nav li a { height: 1%; }

#nav li a, #nav li a:link {
	background: #ddd;
	border-width: 1px;
	border-color: #ffe #aaab9c #ccc #fff;
	border-style: solid;
	color: #000;
	text-decoration: none;
	padding: 3px 12px;
	display: block;
	}
#nav li a:hover {
	color: #666;
	border-color: #aaab9c #fff #fff #ccc;
	background: #eee;
	}
	

Exemplo 3

Navegação horizontal


CSS
#nav, #nav * { 
	margin:0;
	padding:0;
	}
#nav {
	font: 12px Geneva, Arial, Helvetica, sans-serif;
	list-style-type: none;
	}
#nav li {
	float: left;
	}
#nav li a, #nav li a:link {
	display: block;
	margin-right:6px;
	padding: 3px 12px;
	border-left: 6px solid #1958b7;
	border-right: 6px solid #508fc4;;
	background-color: #2175bc;
	color: #fff;
	text-decoration: none;
	}
#nav li a:hover {
	border-left: 6px solid #1c64d1;
	border-right: 6px solid #5ba3e0;
	background-color: #2586d7;
	color: #fff;
	}
	

Navegação vertical


CSS
#nav, #nav * { 
	margin:0;
	padding:0;
	}
#nav {
	width: 170px;
	font: 14px Geneva, Arial, Helvetica, sans-serif;
	list-style-type: none;
	background:#ffe;
	}
* html #nav li {
	float: left;
	height: 1%;
	}
* html #nav li a { height: 1%; }
#nav li a, #nav li a:link {
	display: block;
	padding: 5px;
	margin-bottom: 1px;
	border-left: 10px solid #1958b7;
	border-right: 10px solid #508fc4;
	background-color: #2175bc;
	color: #fff;
	text-decoration: none;
	}
#nav li a:hover {
	border-left: 10px solid #1c64d1;
	border-right: 10px solid #5ba3e0;
	background-color: #2586d7;
	color: #fff;
	}
	

Nota final

O hack estrela (* html #nav li e * html #nav li a) para o Internet Explorer, usado nas folhas de estilo para o menu vertical, preferivelmente deverá ser servido via Comentários Condicionais.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

Esta matéria foi publicada em: 2006-06-11 (domingo). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/06/11/menumania-um/trackback no seu site.

18 comentários na matéria: “Menumania #1”

  1. JacqueNo Gravatar disse:

    Olá quero fazer isso no rodapé, como que eu faço pra ter 3menus verticais um do lado do outro?

  2. DaniloNo Gravatar disse:

    A mesma pergunta da Cyntia, Fox e Luiz… rsrsrs

    Como faço para na navegação horizontal, abrir submenus na vertical,quando este é clicado? Tipo o menu feito no FW só que feito com css?

    Fico muito grato pela ajuda.
    Se puder, responda pelo e-mail

    Att, Danilo

  3. Aquilino Rodrigues SantosNo Gravatar disse:

    Caro amigo,

    gostei muito do seu post. Eu gostaria de saber como fazer um subitem no menu horizontal (mas não é o drop down, seria um nível abaixo, como se foss uma aba)

    Você me dá uma luz?

    Ah, já comprei seu livro, mas ainda não chegou. Iniciativa massa! Deus o abençoe nessa empreitada.

  4. LuizNo Gravatar disse:

    A mesma pergunta da Cyntia e do Fox:
    Como faço para na navegação horizontal, abrir submenus na vertical,quando este é clicado? Tipo o menu feito no FW só que feito com css?

    Fico muito grato pela ajuda.
    Se puder, responda pelo e-mail.
    Att. Luiz.

  5. FoxNo Gravatar disse:

    A mesma pergunta da Cyntia.
    Como faço para na navegação horizontal, abrir submenus na vertical,quando este é clicado? Tipo o menu feito no FW só que feito com css?

    Obrigado.

  6. CyntiaNo Gravatar disse:

    Olá. Como faço para na navegação horizontal, abrir submenus na vertical,quando este é clicado? Tipo o menu feito no FW só que feito com css?
    Obrigada,
    Cyntia

  7. Pablo RodrigoNo Gravatar disse:

    Olá Mauricio, tudo bem?

    Ficou excelente estas explicações sobre os menus….
    Gostaria de saber como podemos inserir um menu drop down em um menu vertical…
    Em seu web site tem apenas para o horizontal, tentei de diversas forma e não consegui… poderia dar este help ?

    Abraço e parabens pelo seu blog e website…

  8. LeccaNo Gravatar disse:

    Oi, tudo bem?:
    Bem aprendi fazer menu vertical no seu site e é muito bom saber que vc divide seu conhecimentoxom outras pessoas, pois foi muiiiito útel para mim
    Coloquei um link seu no meu blog espero que não se importe, para que mais pessoas possasm ser ajudadas ok.
    Obrigada.

  9. Catarina BorgesNo Gravatar disse:

    Mt bom adorei essa pagina e ja add aos meus favoritos !!!

  10. Márcio PaivaNo Gravatar disse:

    Ótimo post.
    Além de reforçar os conceitos CSS, você mostrou o que eu acho mais importante – e interessante -, no CSS: a possibilidade de modificar a apresentação sem modificar a estrutura.

    Obrigado.

  11. JulianaNo Gravatar disse:

    Oi Mauricio! Tudo bem?
    Tenho aprendido muito com seu site, parabéns pelo conteúdo excelente!
    Vi todos os tutoriais de menu do seu site e, pentelha como sou, pensei: ‘e se eu quisesse fazer um menu horizontal com submenus?’.
    Mexi, fucei, remexi, e no final… baguncei todo o código. Como, diabos, fazemos uma barra de navegação com submenus?? A cada ‘block’ q eu substituo por ‘inline’, tudo muda junto….
    e agora?
    Obrigadaaaa!

  12. Claudio Roberto CussuolNo Gravatar disse:

    Oi amigo

    Muito bom esse artigo.
    Ele, associado ao excelente tutorial encontrado aqui http://www.maujor.com/tutorial/ddownmenu-a.php me permitiu fazer um menu perfeito.

    O unico detalhe é que estou tentando fazer o primeiro nível do meu menu pull down ser horizontal, como uma barra de navegação, mas abrir os submenus verticalmente, como voce montou nos exemplos do tutorial.

    Eu ainda não consegui. Quando altero alguma propriedade chave tipo (float: left) acabo bagunçando o menu todo.

    Se alguem tiver uma ideia a respeito, por favor, dê um toque.
    Obrigado

  13. Felipe 'chronos' PrenholatoNo Gravatar disse:

    Olá Maujor, como sempre admiravél seu blog e sua boa vontade!

    Ti mencionaste sobre “O hack estrela (* html #nav li e * html #nav li a) para o Internet Explorer” mas não entendi direito o que ele faz com ‘height: 1%’.

    Onde posso achar doc sobre este hack?

    Abraços!

  14. LarissaNo Gravatar disse:

    Vou testar esses menus no meu blog. E obrigada pelas dicas Maurício. Já estou providenciando mudanças por lá.
    Um abraço.

  15. Lucas AlvesNo Gravatar disse:

    De muita importância esse post.
    Muito obrigado por compartilhar conosco isso.

  16. Carlos EduardoNo Gravatar disse:

    Muito bom…

    É legal compartilhar seus conhecimentos com os outros mesmo… Mostrar que não é preciso flash ou imagens para se fazer um menu legal.

    Basta criatividade e alguns conhecimentos em CSS que dá certo =)

  17. Rafael RamosNo Gravatar disse:

    Fico surpreendido com a sua boa vontade, demonstrando uma nobreza inigualável ao compartilhar tudo isso que vc sabe e domina como poucos…

    Meu total respeito!

    Saúde!

  18. JoaresNo Gravatar disse:

    Eu aprendi a fazer estes menus no seu site… tantos e tantos…

    Muito bom compartilhar isso com o pessoal, pois dá a chance e a oportunidade deles crescerem mais…

    Uma das partes q curto mesmo com o CSS é mexer nos menus mesmo… acho irado…

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo