[TUTORIAL] Menu na lateral do fórum
Página 1 de 1 • Compartilhe

[TUTORIAL] Menu na lateral do fórum
![]() | Menu na lateral do fórum |
--> Tutoriais, dicas e astúcias <--
Menu na lateral do fórum
Menu na lateral do fórum
1º - Trabalhando o código a ser usado:
Primeiramente, antes de tudo, vamos aprender a modificar o código a ser utilizado para fazermos uma pequena cesta ao lado direito do fórum, onde a mesma conterá alguns menus. No caso, o código utilizado é o seguinte:
- Código:
<style type="text/css">
.stack { position: fixed; bottom: 5px; right: 25px; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
.stack * { margin: 0; padding: 0; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; margin:0; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
display: block;
position: absolute;
top: 17px;
right: 60px;
height: 14px;
line-height: 14px;
background-color:#000;
border: 0;
padding: 3px 10px;
text-align: center;
text-shadow: #000 1px 1px 1px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-size: 12px;
color: #fcfcfc;
border-radius: 10px;
opacity: .85;
filter: alpha(opacity = 85);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li {*right:5px;}
.stack a {text-decoration:none}
</style><div class="stack">
<img src="SUA-IMAGEM" alt="stack"/>
<ul id="stack">
<li><a href="LINK-5"><span>nome</span><img src="IMG-5" alt="nome" /></a></li>
<li><a href="LINK-4"><span>nome</span><img src="IMG-4" alt="nome" /></a></li>
<li><a href="LINK-3"><span>nome</span><img src="IMG-3" alt="nome" /></a></li>
<li><a href="LINK-2"><span>nome</span><img src="IMG-2" alt="nome" /></a></li>
<li><a href="LINK-1"><span>nome</span><img src="IMG-1" alt="nome" /></a></li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.yourjavascript.com/134446808/stack1.js"></script>



2º - Adicionando o código:
Por fim, teremos de adicionar o código trabalhado no item anterior na mensagem da "Home Page" do vosso fórum, para que assim o efeito do menu seja produzido correctamente:
Painel de controle > Visualização > HomePage > Geral > "Mensagem na Home page"
3º - Resultado atráves de imagens:
Abaixo você confere um dos possíveis resultados, com o código que nós editamos. Lembre-se, os ícons/menus somente aparecerão quando clicar-mos na cesta, ou na imagem principal que vocês escolheram.
Exemplo | Código | |
Menu lateral no fórum | |
![]() |
|
--> FAQ <--
Menu na lateral do fórum
Menu na lateral do fórum
- Gostaria de colocar o efeito em todo o fórum, como fazer?
Para isso você poderá adicionar o código em um widget, seja do portal ou do fórum em si. Para saber mais, recomendamos que leia:
[FAQ] Gerenciar os Widgets do Fórum

![]() | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Menu na lateral do fórum |
Cream- Membro Proficiente
-
Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11643

» [TUTORIAL] Criar um menu lateral com links rápidos
» Menu lateral no fórum
» Fixar o menu na lateral do fórum
» Menu retrátil lateral do fórum
» como colocar o xat na lateral eu tenhu o tutorial para o blog mais como add no forum
» Menu lateral no fórum
» Fixar o menu na lateral do fórum
» Menu retrátil lateral do fórum
» como colocar o xat na lateral eu tenhu o tutorial para o blog mais como add no forum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos