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.