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
 
 
      
    

Enquete

Qual navegador você usa?

Chrome (953)
Opera (128)
Firefox (73)
IE (Edge) (14)
Safari (2)

Total de votos: 1170

Parceiros

 
  
  

Enquete

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

Sim (148)
Não (181)

Total de votos: 329