Jump to content
Fórum Script Brasil
  • 0

dropdown


Glayson_Duarte

Question

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

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

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

Edited by KaKarotto
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.8k
×
×
  • Create New...