Alterar cores, tamanho, letra do menu jump

Vamos mostrar como mudar as cores, tamanho e tipo de fonte do menu jump, além disso, é possível escolher a cor de fundo desse menu suspenso inteiro ou colocar cores diferentes em cada opção. Veja o menu abaixo:


O código para colocar um menu de salto no blog é o seguinte:

<script language="JavaScript" type="text/javascript">
function openDir( form ) {
var newIndex = form.fieldname.selectedIndex;
if ( newIndex == 0 ) {
alert( "Please select a location!" );
} else {
cururl = form.fieldname.options[ newIndex ].value;
window.location.assign( cururl );
}
}
</script>
<form name="form" id="form">
<select style="width:300px; font-family:'Comic Sans MS'; font-size:14pt; background:#FFFFCC" name="fieldname" onchange="openDir( this.form )">
<option>Nossos Sites</option>
<option value="http://frasecurta.blogspot.com">Frases Curtas</option>
<option style="background:#66FFFF" value="http://jornaljd.blogspot.com">Meu Jornal</option>
<option value="http://dicasdesitesuteis.blogspot.com/">Dicas de Sites Úteis</option>
</select>
</form>

Note que tem algumas coisas a mais neste código na linha <select... tem style="width:300px; font-family:'Comic Sans MS'; font-size:14pt; background:#FFFFCC" isso altera o estilo do menu inteiro, usamos a mesma formatação em CSS que usamos em qualquer texto, então é a mesma coisa que formatar um texto em qualquer outra parte do blog. O valor 300 é a largura, então cuidado para não colocar uma largura maior que a da coluna onde ficará o menu.

Outra coisa é a linha com o link para o Meu Jornal, nela encontramos style="background:#66FFFF” isso faz mudar a cor de fundo somente deste item do menu jump. Se quiser pode usar cores diferentes que cada um dos itens do menu.

Alterar a quantidade de links é fácil basta adicionar mais linhas seguindo o modelo <option value="http://dicasdesitesuteis.blogspot.com/">Dicas de Sites Úteis</option>, e claro trocando o nome e endereço do site.

Para colocar no blog entre na pagina layout, adicionar gadget, html/javascript e cole o código. Esse menu é bem simples de usar, mas precisa de cuidado para não apagar por engano as aspas ou qualquer outro sinal do código senão ele não funcionará corretamente.

Durante essa explicação falamos em menu de salto, menu jump, menu suspenso que na verdade todos são a mesma coisa apenas é conhecido por nomes diferentes.

Veja também:

Código das cores
Abri menu jump em nova janela
Related Posts with Thumbnails

Link desta Pagina

Compartilhe essa Página

23 comentários:

  1. Menu Jump? Menu com salto? O que é isso? Tem algum link com exemplos aí, pra gente ver o que é isso?

    ResponderExcluir
  2. Hamilton
    talvez quando você entrou em nosso site houve um problema com a imagem que colocamos como exemplo.

    apaguei e postei novamente a imagem, espero que agora aparece normalmente.

    ResponderExcluir
  3. Hey Fabiano !

    Como que faz isso no menu jump de marcadores/

    ResponderExcluir
  4. no menu jump dos marcadores não é possivel deixar uma linha de cada cor pois o código só aparece uma fez para todas as linhas, mas o resto é do mesmo jeito que mostramos nesta postagem.

    veja aqui como mudar os marcadores para menu jump

    http://www.dicasparablogs.com.br/2009/04/marcadores-em-forma-de-menu-suspenso.html

    ResponderExcluir
  5. Fabiano graças as teus exclarecimentos, consegui alterar a font de meus marcadores.

    Porém quero saber se o mesmo é possivel com o historico.

    ResponderExcluir
  6. Tem como adc alguma imagem ao lado dos links do menu jump?

    ResponderExcluir
  7. Lucas Bercke
    pode fazer o mesmo com os arquivos, apenas precisa achar o lugar certo no html do seu blog(clique para expandir o modelo)


    já vi uma vez um codigo para colocar imagens neste tipo de menu, mas não tenho o código e nem lembro onde foi rsrs, essa vou ficar devendo.

    ResponderExcluir
  8. Tem como fazer esses links abrirem em outra aba?

    ResponderExcluir
  9. Oi, começei meu blog hoje (01/08/2010) e não consigo fazer o menu tipo o seu..vc pode me ajudar...obrigada

    ResponderExcluir
  10. Úrsula Rigoleto, qual menu? o deste tutorial ou aquele horizontal que usamos no blog?

    ResponderExcluir
  11. Eu quero mudar a cor das letra do marcadores do meu site..tipo ta azul eu quero mudar pra laranja..e não sei como..tem como alguem mim ajudar..www.jadsondownload.blogspot.com

    ResponderExcluir
  12. veja os códigos que mostramos na postagem, lá tem como alterar as cores do menu jump, senão use a pesquisa no inicio da pagina para achar outros tutoriais

    ResponderExcluir
  13. Grande Fabiano, desculpe a ignorancia, mas em que parte do html eu coloco esse código? abs

    ResponderExcluir
  14. diretamente no proprio código do menu jump... caso tenha colocado como html/javascript

    ResponderExcluir
  15. Boa dica, pena o google não indexar links em javascript.

    ResponderExcluir
  16. Oi, estou com alguns problemas para alterar a letra do meu menu jump... sempre que tenho inserir a linha do style com o tipo de letra que quero ele perde o scroll e fica como uma lista normal... como faço para alterar sem mexer nisso? O código deve ser posto perto a parte onde mudo o nome da lista?

    ResponderExcluir
  17. @Marisa deve ser algum detalhe provavelmente não está usando as aspas ou está esquecendo de fechar

    ResponderExcluir
  18. Também pensei nisso mas sempre que me falta algo para fechar ele avisa e não deixa visualizar o blog sequer... Acontece é isto style='width: 200px;font-size:12pt'>
    aparecem ali aqueles símbolos, provavelmente é disto não?

    ResponderExcluir
  19. @Marisa você tem razão, mas sem ser algum erro na hora de alterar o código não pode ser outra coisa

    veja se está usando o código no lugar correto

    ResponderExcluir
  20. já consegui alterar, tinha realmente a ver com as aspas... Estavam lá, mas no sítio errado. Já coloquei direito e funcionou na perfeição :)
    obrigado pela ajuda, e pelo blog. É muito bom, continua assim o bom trabalho :))

    E já agora, um feliz ano novo!!! :D

    ResponderExcluir
  21. é bom saber que deu certo.

    feliz ano novo pra você também

    ResponderExcluir