Ir para conteúdo
Fórum Script Brasil
  • 0

Menu Drop Down

Guest Juca

Perguntado por Guest Juca,

 Share

Pergunta

Guest Juca

Guest Juca

Postado
Postado

Olá galera beleza?

antes de tudo parabéns por este forum, é muito educativo!

Bom, estou precisando fazer um menu drop down (eu acho que o nome é esse mesmo), semelhante ao deste site aqui (http://www.ie-intercambio.com.br) porém sem usar php, só em script ou html mesmo.. sou iniciante no assunto e agradeceria se alguém pudesse me orientar a fazê-lo ou indicar algum tutorial online!

Eu tenho visto muitos tópicos sobre este assunto, porém sempre relacionado ao menu cascata (com uso de layers) e não é este o caso.. eu queria um drop down mesmo, onde o menu se movimenta para baixo, para mostrar as sub-categorias do link clicado..

Se alguém puder me salvar nessa, eu agradeço!

mais uma vez parabéns pelo forum!

abraço

Juca

Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

  • 0
Guest juca

Guest juca

Postado
Postado

beleza, valeu pela dica! Eu dei uma fuçada nos arquivos do Script Brasil e acabei achando um código interessante, copiado abaixo. O problema agora é que eu preciso posicionar este menu dentro de uma tabela-mãe do site, pois quando eu mudo a visualização de 800x600 para 1024x768, a tabela se centraliza e o menu fica "voando" na esquerda da tela.. Voce sabe como fazer isto?

Mais uma vez obrigado

Juca

o código que estou usando:

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

window.onload=show;

function show(id) {

var d = document.getElementById(id);

for (var i = 1; i<=10; i++) {

if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}

}

if (d) {d.style.display='block';}

}

</script>

<style type="text/css" media="screen">

body {

margin: 0;

padding: 0;

background: white;

font: 80% verdana, arial, sans-serif;

}

dl, dt, dd, ul, li {

margin: 0;

padding: 0;

list-style-type: none;

}

#menu {

position: absolute; /* Posição do menu que pode ser alterada */

top: 0;

left: 0;

}

#menu {

width: 15em;

}

#menu dt {

cursor: pointer;

margin: 2px 0;;

height: 20px;

line-height: 20px;

text-align: center;

font-weight: bold;

border: 1px solid gray;

background: #ccc;

}

#menu dd {

border: 1px solid gray;

}

#menu li {

text-align: center;

background: #fff;

}

#menu li a, #menu dt a {

color: #000;

text-decoration: none;

display: block;

border: 0 none;

height: 100%;

}

#menu li a:hover, #menu dt a:hover {

background: #eee;

}

</style>

</head>

<body bgcolor="#FFFFFF">

<dl id="menu"> <!-- Este resulta de um 1º link no menu sem sub-menus, altere o link de "#" para p que desejar -->

<dt onClick="java script:show();"><a href="#">Menu 1</a></dt>

<!-- No código abaixo já crio vários sub-menus -->

<dt onClick="java script:show('smenu2');">Menu 2</dt>

<dd id="smenu2">

<ul>

<li><a href="#">sub-menu 2.1</a></li>

<li><a href="#">sub-menu 2.2</a></li>

<li><a href="#">sub-menu 2.3</a></li>

</ul>

</dd>

<dt onClick="java script:show('smenu3');">Menu 3</dt>

<dd id="smenu3">

<ul>

<li><a href="#">sub-menu 3.1</a></li>

<li><a href="#">sub-menu 3.1</a></li>

<li><a href="#">sub-menu 3.1</a></li>

<li><a href="#">sub-menu 3.1</a></li>

<li><a href="#">sub-menu 3.1</a></li>

<li><a href="#">sub-menu 3.1</a></li>

</ul>

</dd>

<dt onClick="java script:show('smenu4');">Menu 4</dt>

<dd id="smenu4">

<ul>

<li><a href="#">sub-menu 4.1</a></li>

<li><a href="#">sub-menu 4.1</a></li>

</ul>

</dd>

</dl>

</body>

</html>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,2k
×
×
  • Criar Novo...