:: Estilizando um Menu de Salto (JumpMenu) ::

O menu de salto

Um menu de salto é obtido com objetos de formulário. Uma tag select com várias tag's option.

Abaixo um menu de salto já estilizado e que servirá de base para este tutorial. Clique na setinha para abrir o menu.

A estrutura do menu

Ao abrir o menu mostrado acima você pode verificar a sua estrutura assim constituida:

um título: Meu Menu de Salto;
uma linha de separação: ------------;
um subtítulo para links: TUTORIAIS CSS;
- cinco links para tutoriais CSS;
uma linha de separação: ------------;
um subtítulo para links: TUTORIAIS CSS;
- cinco links para tutoriais css;
uma linha de separação: ------------;
um subtítulo para links: TUTORIAIS HTML;
- seis links para tutoriais html;
uma linha de separação: ------------;
um subtítulo para links: TUTORIAIS JAVASCRIPT;
- cinco links para tutoriais javascript;

Nota: Se você contar o número de itens mostrados acima, na estrutura do menu vai chegar a um total de 23 (vinte e três) itens.

Cada um dos itens é definido por uma tag HTML <option></option>, em consequência, são 23 tags <option></option>

O HTML do menu

Observe com atenção o HTML que constrói a estrutura do menu de salto, com as 23 tags<option></option>:

<form>
<select>
<option>Meu Menu de Salto</option><!--Título do Menu-->
<option>-----------------</option><!--Separador-->
<option>TUTORIAIS CSS</option><!--Subtítulo-->
<option value="#">Sintaxe </option><!--Link-->
<option value="#">Fontes</option><!--Link-->
<option value="#">Bordas</option><!--Link-->
<option value="#">Fundos</option><!--Link-->
<option value="#">Menus</option><!--Link-->
<option>------------------</option><!--Separador-->
<option>TUTORIAIS HTML</option><!--Subtítulo-->
<option value="#">
Estrutura do documento</option><!--Link-->
<option value="#">As metatags</option><!--Link-->
<option value="#">O uso da tag <title></option><!--Link-->
<option value="#">Entendendo <acronym></option><!--Link-->
<option value="#">O que é XHTML</option><!--Link-->
<option value="#">Normas HTML 4</option><!--Link-->
<option>-----------------</option><!--Separador-->
<option>TUTORIAIS JAVASCRIPT</option><!--Subtítulo-->
<option value="#">Relógio</option><!--Link-->
<option value="#">Barra de status</option><!--Link-->
<option value="#">Efeito neve</option><!--Link-->
<option value="#">Handlers de evento</option><!--Link-->
<option value="#">Janela pop up</option><!--Link-->
</select>
</form>

A estilização

AS CORES DE FUNDO

Foram usadas quatro cores de fundo para estilizar o menu:

branca para fundo dos separadores;
tom escuro para os Subtítulos
tom médio para links ímpares (1°, 3° e 5° links)
tom claro para links pares (2°, 4° e 6° links)

AS CLASSES DE ESTILOS

Vamos então criar 04 (quatro) classes de estilização para estes fundos:

classe .sep para os separadores;
classe .stit para os Subtítulos
classe .impar para os links ímpares (1°, 3° e 5° links)
classe .par para os links pares (2°, 4° e 6° links)

AS LETRAS E TAMANHOS

E, para completar a estilização do nosso menu falta apenas definir o tamanho e cor das letras, bem como a largura total da janela.

Estes parâmetros são válidos para todo o menu e podemos defini-los na tag <select> criando para isso uma id a ser aplicada naquela tag

Chamaremos esta id de #meuselect

A folha de estilos

<style type="text/css">
#meuselect {  
width:135px; /* Largura da janela do menu */
background:#F0FFF0; /* Cor do fundo do menu 
em repouso */
font:11px arial, helvetica, 
sans-serif; /* Tamanho e tipo das letras */
color:#36648B; /* Cor das letras do Título do menu */
}
#meuselect option.stit { 
width:135px; /* Largura da janela do menu para NN */  
background-color:#C1CDCD; /* Cor do fundo dos 
Subtítulos */ 
color:#003366; /* Cor das letras dos Subtítulos */ 
}
#meuselect option.sep { 
width:135px;  /* Largura da janela do menu para NN */ 
background-color:#FFFFFF; /* Cor do fundo dos 
separadores */ 
color:#000000; /* Cor dos traços dos separadores */
}
#meuselect option.impar { 
width:135px; /* Largura da janela do menu para NN */  
background-color:#E0EEE0; /* Cor do fundo dos 
links impares */ 
color:#00008B; /* Cor das letras dos links impares */ 
}
#meuselect option.par { 
width:135px;  /* Largura da janela do menu para NN */ 
background-color:#F0FFF0; /* Cor do fundo dos 
links pares */ 
color:#009ACD; /* Cor das letras dos links pares */
}
</style>

O código HTML completo

Abaixo o código HTML da página que contém o menu de salto estilizado conforme mostrado neste tutorial, para você copiar para seu HD, estudar e fazer as adaptações para seu caso.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN">
<html>
<head>
<title>Estilizar Menu de Salto</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1">
<style type="text/css">
#meuselect {  
width:135px;
background:#F0FFF0; 
font:11px arial, helvetica, sans-serif; 
color:#36648B;
}
#meuselect option.stit { 
width:135px;  
background-color:#C1CDCD; 
color:#003366;
}
#meuselect option.sep { 
width:135px;  
background-color:#FFFFFF; 
color:#000000;
}
#meuselect option.impar { 
width:135px;  
background-color:#E0EEE0; 
color:#00008B;
}
#meuselect option.par { 
width:135px;  
background-color:#F0FFF0; 
color:#009ACD;
}
</style>

<script language="JavaScript" 
type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.
  selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?")
  )>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document;
	n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<
  d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) 
  x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); 
return x;
}

function MM_jumpMenuGo(selName,targ,restore){ //v3.0
  var selObj = MM_findObj(selName); 
  if (selObj) MM_jumpMenu(targ,selObj,restore);
}
//-->
</script>

</head>
<body>
<form name="form">
<select name="menu" id="meuselect" 
"onChange="MM_jumpMenu('parent',this,0)">
<option>Meu Menu de Salto</option>
<option class="sep">
-----------------
</option>
<option class="stit">
TUTORIAIS CSS
</option>
<option value="#" class="impar">
Sintaxe 
</option>
<option value="#" class="par">
Fontes
</option>
<option value="#" class="impar">
Bordas
</option>
<option value="#" class="par">
Fundos
</option>
<option value="#" class="impar">
Menus
</option>
<option class="sep">
------------------
</option>
<option class="stit">
TUTORIAIS HTML
</option>
<option value="#" class="impar">
Estrutura do documento
</option>
<option value="#" class="par">
As metatags
</option>
<option value="#" class="impar">
O uso da tag 
<title>
</option>
<option value="#" class="par">
Entendendo 
<acronym>
</option>
<option value="#" class="impar">
O que é XHTML
</option>
<option value="#" class="par">
Normas HTML 4
</option>
<option class="sep">
-----------------
</option>
<option class="stit">
TUTORIAIS JAVASCRIPT
</option>
<option value="#" class="impar">
Relógio
</option>
<option value="#" class="par">
Barra de status
</option>
<option value="#" class="impar">
Efeito neve
</option>
<option value="#" class="par">
Handlers de evento
</option>
<option value="#" class="impar">
Janela pop up
</option>
</select>
</form> 
</body>
</html>

Notar no código acima o javascript necessário para fazer o menu funcionar.

Nota: A estilização de cores de fundo para Subtítulos e Links conforme mostrada neste tutorial não é visializada no navegador Opera. :-(

Se você copiar-colar este código, elimine no seu editor os espaços em branco nas linhas do código, introduzidos aqui por quebras de linha devido a largura total da janela onde está o texto do tutorial.

Dica final

Neste tutorial ensinei como estilizar o grupo data-hora usando folha de estilo "inline".

Com este tipo de folha de estilo você perde flexibilidade para no futuro alterar a estilização, pois terá que alterá-la dentro de cada tag estilizada. Caso você esteja usando arquivos CSS separados (folhas de estilo externas) ou pretenda ter maior controle sobre a estilização, crie classes para aplicar nas tags e defina os estilos nas CSS externas.