Voltar para o site

Estilizando um Menu de Salto (JumpMenu)

Publicado em: 25/04/2004

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;

O HTML do menu

Observe o HTML que constrói a estrutura do menu de salto:

><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 lang="pt-br">
<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>
</head>
<body>
<form id="form" method="" action="">
<select id="meuselect">
<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>

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo