Banner propaganda da DevMedia - Cursos de desenvolvimento web

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.

Conheça 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

topo