Antes de tudo gostaria de informar que sou totalmente leigo em javascript, apenas quebro alguns galhos.
Recentemente encontrei em um site uma caixa drop down que usa javascript e serve como um select, porem eu gostaria de adapta-la para abrir algumas opções usando links nas opções.
Fiz tudo o que queria e quando passo o mouse sobre as opções que se abrem o navegador informa que se trata de um link e mostra o endereço, mas quando clico ele apenas fecha a caixa, não abrindo o link que está nela.
Segue o código do javascript para que possam me informar o que eu posso mudar para ajustar a minha necessidade.
$(document)
.ready(function(){
$(".boxSelectGrande").click(function(e){e.preventDefault(); $(this).children("ul").toggle();});
;})
.bind("click",function(e){var $clicked=jQuery(e.target);
if(!$clicked.hasClass("expand")){$(".boxSelectGrande ul").hide();}});
O código do html é:
<div class="boxSelectGrande">
<input type="text" class="expand" placeholder="Selecione" readonly/>
<ul>
<li ><a href='http://www.google.com' target='_blank' style='background-color:#000000; color:red;'> Administradores (.adm.br)</a></li>
<li ><a href='http://www.google.com' target='_blank'> Administradores (.adm.br)</a></li>
<li ><a href='http://www.google.com' target='_blank'> Administradores (.adm.br)</a></li>
<li ><a href='http://www.google.com' target='_blank'> Administradores (.adm.br)</a></li>
<li ><a href='http://www.google.com' target='_blank'> Administradores (.adm.br)</a></li>
<li ><a href='http://www.google.com' target='_blank'> Administradores (.adm.br)</a></li>
<li ><a href='http://www.google.com' target='_blank'> Administradores (.adm.br)</a></li>
<li ><a href='http://www.google.com' target='_blank'> Administradores (.adm.br)</a></li>
<li ><a href='http://www.google.com' target='_blank'> Administradores (.adm.br)</a></li>
<li ><a href='http://www.google.com' target='_blank'> Administradores (.adm.br)</a></li>
</ul>
</div>
E o código do css é:
.boxSelectGrande {
float:left;
width:226px;
min-width:0;
height:30px;
background:url('selectDown.png') no-repeat;
position:relative;
cursor:pointer;
}
.boxSelectGrande input {
position:absolute;
top:3px;
left:3px;
overflow:none;
border:0;
color:#484848 !important;
font-size:24px;
font-weight:bold;
width:220px;
height:23px;
font-size:16px;
font-weight:normal;
cursor:pointer;
background-color:transparent;
}
.boxSelectGrande ul {
position:absolute;
z-index:100;
display:none;
min-height:25px;
max-height:200px;
overflow:auto;
background-color:#ffffff;
border:solid 1px #000000;
top:30px;
width:226px;
left: 0;
display: none;
border: 1px solid #1c1c1c;
list-style-type:none;
}
.boxSelectGrande ul li a {
z-index:102;
float:left;
font-weight:normal;
font-size:14px !important;
color:#484848;
margin:0 !important;
padding:6px 5px;
width:199px !important;
list-style-type:none;
color: #000000;
display: block;
text-decoration: none;
}
.boxSelectGrande ul li a:hover {
background-color:#dddddd;
color: #F00;
z-index:104;
}
Desde já agradeço sua ajuda.