Menu - mapa de imagem

Publicado em: 31/03/2005

O menu funcionando

Passe o mouse nos pontos sobre a imagem [D]

Anatomia óssea.

As regras CSS para o menu - Folha de estilos

Consulte o código fonte da página

Observações adicionais - especificidade e efeito cascata

Convém ressaltar alguns detalhes básicos de construção, mas que se forem esquecidos arruinarão o funcionamento correto do menu e conflitarão com as estilizações adotadas no site.

  1. As regras de estilo estabelecidas para o elemento <a>
    do menu provavelmente conflitarão com as regras de estilo para estes elementos e estabelecidas no layout do próprio site;
  2. Se o site já usou uma classe chamada menu no seu layout, surgirá outro ponto de conflito;
  3. Caso o site tenha estilizado o elemento <ul> para seu layout próprio, outro ponto de conflito.

Solução:

Regras CSS conflitantes são resolvidas levando-se em conta a especificidade e o efeito cascata

Se ao projetar o menu você notar que 'coisas estranhas' estão acontecendo com seus links, ou na sua página ou mesmo no menu, com respeito às estilizações, faça uma checagem levando em conta a resolução de conflitos de regras de estilos.

Contudo de maneira genérica você poderá tentar o seguinte:

Caso já exista uma classe .menu no seu site, renomeie a atual para, por exemplo: .mapa-menu

Crie uma div para englobar todo o menu (p.ex: #todo-menu) e use o seletor #todo-menu a no lugar do seletor a simplesmente. Isto aumenta a especificidade da regra bem como evita interferência na estilização própria do site.

Mas, atenção, estas indicações são gerais, não significando que resolva todos os casos de conflito.
Veja no código fonte desta página que eu usei o ID #ana-geral a para o elemento ul que marca o menu e também renomeei .menu para .anamenu.

X

Matérias recomendadas

A sintaxe da regra CSS

Seletores CSS3