Client-Side

Convertido – Menu (Livraria Cultura)

Reconstruindo o menu da Livraria Cultura.

Por Diego Eis

• 22 comentários
• Tweet

Fazer menus com CSS é relativamente simples. Não precisamos de muitas linhas de código para fazer um menu totalmente personalizado. O Menu da Livraria Cultura é feito com Tabela. Na verdade, todo o site deles é feito com Tabelas, mas esse é outro assunto.

Você pode ver o menu deles aqui.

O Código HTML do menu deles é:

				


Português
Inglês
Espanhol

Francês

Italiano

Alemão

Eu não encontrei qual seria o pedaço do CSS referente ao menu, por isso eu não vou colar aqui.

O problema da versão do menu deles é que é todo feito com imagens e usa muita tabela. Há também código CSS inline. Isso prejudica leitores de tela, prejudica Google, e manutenção.
A versão que sugerimos é feita utilizando a técnica Image-Replacement. Segue abaixo o código HTML:

Livros

Português
Inglês
Espanhol
Francês
Italiano
Alemão


DVDs
CDs
Games
Sites especiais
Eventos

Abaixo o Código CSS:

* {
	margin:0;
	padding:0;
	list-style:none;
}

.nav {padding:10px;}

.nav ul li {float:left; position:relative;}

/* Define que todos os submenus aparecem quando passarmos o mouse no LI "pai" */
.nav ul li:hover ul {display:block;}

/* Define o estilo dos links */
.nav ul li a {
	float:left;
	height:22px;
	text-indent:-9999px;
	overflow:hidden;
	background-position:center center;
	background-repeat:no-repeat;
}

/* Adiciona o background e a largura nos elementos do menu */
.nav ul li.navlivros a {width:79px; background-image:url(imagem/_topo/abas/novo_livros.gif);}
.nav ul li.navdvd a {width:79px; background-image:url(imagem/_topo/abas/b_dvds2.gif);}
.nav ul li.navcd a {width:79px; background-image:url(imagem/_topo/abas/b_cds2.gif);}
.nav ul li.navgames a {width:79px; background-image:url(imagem/_topo/abas/b_games2.gif);}
.nav ul li.navsitesesp a {width:149px; background-image:url(imagem/_topo/abas/novo_sitesesp.gif);}
.nav ul li.naveventos a {width:109px; background-image:url(imagem/_topo/abas/novo_eventos.gif);}

/** Define que a UL do submenu está escondida por default. E define o visual do submenu */
.nav ul li ul {
	display:none;
	background:#00A2B0;
	width:70px;
	position:absolute; top:22px; left:0px;
	padding:4px;
}

/* Resetamos todo o estilo dos links do submenu. Isso poderia ser evitado se o IE7 conhecesse seletores complexos ou com JQuery */
.nav ul li ul li a {
	font:13px verdana, arial, tahoma, sans-serif;
	background-image:none !important;
	text-indent:0;
	float:none;
	color:white;
}

.nav ul li ul li a:hover {text-decoration:none;}

Veja o resultado do menu reconstruído aqui.

O Submenu na versão original, eu fiz utilizando apenas CSS. Testei em Firefox e IE7/8. Funciona que é uma beleza. Sem Javascript, sem JQuery, nem nada.
Se o IE7 já conhecesse seletores complexos, não precisaríamos resetar todos os links dos submenus como fizemos na linha 35.
O Código CSS, embora pareça longo, ele está organizado para ser fácil de adicionar outros elementos.

Sempre que escrever um CSS, pense sempre no futuro. Um CSS para resolver um problema imediato, normalmente tem menos código. Mas ele resolve apenas aquele problema específico. Se você fizer um CSS abrangente e pensando no futuro, seu código fatalmente vai ficar maior. Mas você terá menos retrabalho ao fazer as alterações futuras. Eu prefiro.

Pegue aqui os dois códigos para estudar: Reconstrução Menu Livraria Cultura

• 22 comentários

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 Diego Eis