Menu de Salto

Olá galera! Me chamo Jonny e sou o novo administrador da D.O.B., espero que gostem dos meus trabalhos. Irei postar como criar um Menu de Salto - Simples.

O que é um menu de salto? Um exemplo:

Meu Menu de Salto ----------------- TUTORIAIS CSS Sintaxe Fontes Bordas Fundos Menus ------------------ TUTORIAIS HTML Estrutura do documento As metatags O uso da tag Entendendo O que é XHTML Normas HTML 4 ----------------- TUTORIAIS JAVASCRIPT Relógio Barra de status Efeito neve Handlers de evento Janela pop up
...

Irei por o código form e como personalizar o menu.

Código Form (Blogger > Nova Postagem > Editar HTML):

<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>

Como Personalizar o Menu (Blogger > Design > HTML):
- Procure por: ]]></b:skin>


Coloque o seguinte código:

<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>