dropdown

Glayson_Duarte · Dezembro 3, 2007

Olá, estou desenvolvendo um sistema com um amigo com uma interface "WEB". Estou fazendo as páginas no 'frontpage' em 'HTML' e depois salvo em '*.jsp'.

Mas meu problema mesmo é o seguinte: eu estava precisando de um menu 'dropdown' que quando eu clicasse na seta e ele descesse, ele criasse uma barra de rolagem e se caso eu marcasse dentro do 'box' ele autocompletasse e fizesse a procura, como acontece em menus contidos nos programas do office.

Eu dei uma separada numa foto para ilustrar:

dropdownsa7.th.jpg

desde já agradeço a todos.

Um abraço!!

KaKarotto · Dezembro 4, 2007

Olha se for só quanto a estilização, fazer aparecer e tal dá pra eu te ajudar.

Seria mais ou menos como isso ?

<html>
<head>

<link rel='stylesheet' type='text/css' />
<style>
#selectBox{
width:155px; height:180px;
border:1px solid silver;
overflow-y:scroll;
display:none;
}
body>#selectBox{
width:152px
}

#selectBox{

scrollbar-face-color:white; 
scrollbar-highlight-color:#336699; 
scrollbar-shadow-color:#336699;
scrollbar-3dlight-color:white; 
scrollbar-arrow-color:#336699; 
scrollbar-track-color:white; 
scrollbar-darkshadow-color:white
}

#selectBox a{
color:#336699;
display:block;
padding:2px;
margin:2px 0;
border:1px solid #336699;
font:8pt tahoma;
text-decoration:none;
}

#selectBox a:hover{
background-color:#55aaee;
color:white;
}

#pesquisa{
width:140px;
border:1px solid #336699;
font:8pt tahoma;
color:red; 
}

#seta{
border:1px solid #336699;
background:#336699;
color:white;
padding:1px;
font:8pt tahoma;
cursor:pointer;
}
</style>

<script>



window.onload=function(){
var valores=document.getElementById('selectBox').getElementsByTagName('a')

for(var x=0; x<valores.length; x++)
valores[x].onclick=function(){
document.getElementById('pesquisa').value=this.innerHTML
return false
}

document.getElementById('seta').onclick=function(){
if(document.getElementById('selectBox').style.display=="none")
document.getElementById('selectBox').style.display="block"
else
document.getElementById('selectBox').style.display="none"
}

}

</script>



</head>

<body>
<input type="text" id="pesquisa" /><span id="seta">@</span>
<div id="selectBox" style="display:none">
<a href="#">Banana</a>
<a href="#">Pera</a>
<a href="#">Uva</a>
<a href="#">Maça</a>
<a href="#">Limão</a>
<a href="#">Morango</a>
<a href="#">Maracujá</a>
<a href="#">Pêssego</a>
<a href="#">Kiwi</a>
<a href="#">Caju</a>
<a href="#">Carambola</a>


</div>


</body>
</html>

Fiz um exemplo só, pode estilizar como quiser. Aconselho usar links.

Kelabrassss

Editado Dezembro 4, 2007 por KaKarotto

Entrar

dropdown

Pergunta

Glayson_Duarte

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

KaKarotto

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades