Bloco expansível de links

Adicione um caixa de links em seu site. Ao clica-la ela se expande.

Instalação

  • Copie este código
<center><style type="text/css">
/* |||||| CONFIGURAÇÃO DO MENU |||||| */
.caixa_cantos_arredondados_pr{
overflow:hidden;
height:auto;
width:450px;
background-image: -moz-linear-gradient(100% 100% 90deg, #e9bc36,#ff9900);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9900), to(#e9bc36));
-webkit-border-radius:14px;
border-radius: 14px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
color: #ffffff;
font-family:arial;
font-weight:bold;
background-color:#fab514;
padding-bottom:20px;
}
.botao_arredondado_pr{
float:left;
overflow:hidden;
height:25px;
width:25px;
margin:auto;
background-image: -moz-linear-gradient(100% 100% 90deg, #33cc00,#66ff66);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66ff66), to(#33cc00));
-webkit-border-radius:20px;
border-radius: 20px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
font-family:"arial black";
background-color:#66ff66;
display:block;
text-align:center;
margin:5px 5px auto 5px;
}
.topo_caixa_pr{
width:100%;
height:15px;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
color: #ffffff;
font-family:arial;
font-weight:bold;
text-align:left;
padding-top:5px;
}
.meio_caixa_pr{
display:none;
height:100%;
width:100%;
margin:auto auto auto 15px;
padding:0px;
}
.rodape_caixa_pr{
width:100%;
height:15px;
}
.titulo_pr{
margin:5px 0px 0px 0px;
}
.titulo_pr a,#sinal{
margin:5px 0px 0px 0px;
color:#ffffff;
text-decoration:none;
}
#cca a{color:#ffff00;text-decoration:none;margin-left:10px;}
/* |||| FIM CONFIGURAÇÃO DO MENU |||| */
</style>
<script language="JavaScript">
corp="1"
function mostra(){
if(corp=="1"){
document.getElementById('cca').style.display="block"
document.getElementById('sinal').innerHTML="-"
corp="2"
}else{
document.getElementById('cca').style.display="none"
document.getElementById('sinal').innerHTML="+"
corp="1"
}
}
</script>
<div class="caixa_cantos_arredondados_pr" style="padding:5px auto auto 5p">
 
<div class="botao_arredondado_pr">
<a href="javascript:void(0)" id="sinal" onclick="mostra()">+</a>
</div>
<h3 class="titulo_pr">
<a href="javascript:void(0)" onclick="mostra()">Links Interessantes</a>
</h3>
 
<div id="cca" class="meio_caixa_pr">
<ul>
<li><a href="LINK" >Primeiro Link</a></li>
<li><a href="LINK" >Segundo Link</a></li>
<li><a href="LINK" >Terceiro Link</a></li>
</ul>
</div>
</div>
<blockquote>
<p style="text-align: center; ">
<strong>Adicione Uma Caixa Suspensa Em Seu Site! MaioChristopher - DicasWebnode</strong></p>
</blockquote>
  • No lugar destacdo de vermelho são os links das paginas
  • No lugar destacado de negrito, são o nome das páginas
  • Para adicionar mais páginas, basta duplicar uma linha das sublinhadas.
contador free
 
 
      
    

Heap Up Cadastre-se Agora!

Enquete

Voce joga muito pelo celular?

Sim (701)
Raramente (56)
Não (58)

Total de votos: 815

Parceiros

  
  

Enquete

Você gosta de radio automática em um site?

Sim (104)
Não (121)

Total de votos: 225