CSS: Menu fixo

Esta é a tradução do tutorial "A pinned-down menu" de autoria de Bert Bos publicado no site do W3C.

1. A versão oficial e original, em inglês, deste tutorial, encontra-se em: http://www.w3.org/Style/Examples/007/menus.html e os seus direitos são conforme:

2. A única versão oficial deste documento é a versão em língua inglesa que se encontra no sítio do W3C.

3. O presente documento traduzido para a língua portuguesa do Brasil, pode conter erros de tradução.

Este documento foi traduzido em 12 de dezembro de 2004 e atualizado em 24 de dezembro de 2004 por: Maurício Samy Silva e encontra-se hospedado no seu sítio "CSS para WebDesign" em http://www.maujor.com/
A traduçao foi feita somente para este documento, vale dizer, as páginas remetidas pelos links aqui indicados, estão em sua versão original em língua inglesa.

Um menu fixo

O menu que você vê no canto superior direito desta página foi construido com alguns elementos <a> para os links dentro de uma DIV. Através de regras CSS convenientes você consegue fixar o menu no lugar. Veja a seguir o código de marcação HTML do menu:

<div class="banner">
<p>
<a rel="home" class="home" href="http://www.w3.org">
<img alt="W3C" src="imagens/w3c_home.png" /></a>
<a rel="bookmark" href="http://www.w3.org/Consortium/Activities">
Activities</a>
<a rel="bookmark" href="http://www.w3.org/TR/">Tech. reports</a>
<a rel="index" href="http://www.w3.org/Help/siteindex">Site index</a>

<a rel="bookmark" href="http://www.w3.org/Consortium/Translation/">
Translations</a>
<a rel="bookmark" href="http://www.w3.org/Status">Software</a>
<a rel="search" href="http://search.w3.org/">Search</a>
<em>Nearby:</em>
<a rel="top" href="http://www.w3.org/Style">Style</a>
<a rel="up" href="http://www.w3.org/Style/CSS/">CSS</a>
<a rel="first" href="http://www.w3.org/Style/Examples/007/">
tips & tricks</a>
</p>
</div>

Em um browser sem suporte para CSS ou com folhas de estilo desabilitadas pelo usuário, esta marcação será renderizada como um parágrafo normal com links. Mas, graças as regras CSS escritas como mostrado a seguir, a renderização resulta em um menu como se estivesse "flutuando" fixo no canto superior direito da janela do browser:

div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #900;
  border: thin outset #900;
  color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

Destaque para a regra 'position: fixed', que faz com que a DIV permaneça fixa na tela e para a regra 'display: block', que faz com que os elementos A (âncoras) dentro da DIV sejam transformados para nível de blocos e em consequência renderizados um abaixo do outro e não em linha (um ao lado do outro).

Atenção para a ordem em que são escritas as três últimas regras CSS. Elas têm a mesma especificidade e em consequência prevalecerá a última regra escrita. Para que o estado OVER dos links funcione em qualquer circunstância a pseudo classe :hover deverá estar na última regra escrita.

As demais regras como margins, borders, colors, etc. podem ser alteradas a vontade, a gosto do projetista. Observe que foi declarada uma borda de 2px no topo de cada link exceto no primeiro link. Esta exceção (não declarar a borda do primeiro link) foi escrita com a declaração ':first-child'. Uma combinação de regras CSS como esta (border-top para todos os elementos e border 'none' para o primeiro elemento - first child -) é bastante útil na criação de bordas entre elementos.

(Se você consultar as folhas de estilo lincadas para esta página banner-k.css e banner.css, irá constatar que existem regras CSS aparentemente conflitantes entre si. Os conflitos aparentes destinam-se a prevenir bugs em browsers mais antigos. Em particular, na folha de estilos banner-k.css, o banner foi tornado invisível e não será renderizado e na folha de estilos banner.css ele será renderizado como um elemento nível de bloco. Com isto "escondemos" o banner do Netscape 4, pois este browser ignora a regra @import para banner.css.)

FAQ: IE 5 & 6 em Windows?

Se você abrir esta página usando o Microsoft Internet Explorer 5 ou 6 em Windows ("IE5/Win" e "IE6/Win"), notará que nada funciona como descrito no tutorial. Pelo menos nas versões daqueles browsers até Setembro de 2002. (Nota do tradutor: Até a data desta tradução, Dezembro de 2004, a versão dos referidos browsers continua sem suporte para esta página). Muitas pessoas tem me perguntado sobre isto, então aqui vai uma pequena explicação. Resumindo: o bug é do browser e não da página.

IE5/Win e IE6/Win ainda não implementaram o valor 'fixed' para o posicionamento. Isto é um desastre, mas o problema maior é que eles, IE5/Win e IE6/Win também apresentam um parseamento equivocado para a propriedade 'position'. Se um browser desconhece position:"fixed", ele deverá ignorá-la e honrar o valor anterior conhecido declarado para position na folha de estilos. Assim, basta declarar 'position: absolute' logo antes de position:"fixed" na folha de estilos e o browser assumirá aquele valor. Mas, não é isto que acontece no IE5/Win e IE6/Win. Para eles o valor "fixed" é interpretado como "static".

Não é possível simular 'fixed' para IE5/Win e IE6/Win, mas existe um work-around ("remendo") para o problema do parsing. Johannes Koch mostrou-me esta dica (na sua coleção de work-arounds). Primeiramente substitua 'position: fixed' na folha de estilos mostrada acima por 'position: absolute' e a seguir insira outra regra de estilo como mostrado abaixo:

body>div.banner {position: fixed}

(Se a DIV.banner estiver contida em outro elemento que não BODY, substitua BODY por aquele elemento.) O efeito prático desta regra é de que browsers que "entendem" o seletor CSS filho '>' (child), usarão esta regra ao passo que aqueles que não entendem e em particular IE5/Win e IE6/Win, ignorarão a regra. A regra 'position: absolute' será honrada e o menu permanecerá no seu lugar, sem contudo ficar fixo na tela e em consequência rolando com ela.

Para o seletor filho, convém ressaltar que não deverá haver espaços em branco nem antes e nem depois do sinal '>'.

Folhas de Estilo para Web Dicas & macetes CSS

Um menu fixo

FAQ: IE 5 & 6 em Windows?

Folhas de Estilo para Web
Dicas & macetes CSS