Banner propaganda da DevMedia - Cursos de desenvolvimento web

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®

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