Início
phpBB3 
PunBB
Invision
Forumeiros (Avançado)
Olá amigos, trago um tutorial de como fazer um General Box com efeito slide para seu fórum.
Você pode adicionar em qualquer área do seu fórum..
A primeira coisa a se fazer é adicionar este CSS
Você pode adicionar em qualquer área do seu fórum..
A primeira coisa a se fazer é adicionar este CSS
- Código:
/*
// General Box com efeito slide
// Créditos: Wagner'
// Leia mais em
// www.jscript.forumeiros.com
*/
.general_box img{
vertical-align: middle;
}
.general_box ul{
list-style: none;
}
ul.subforums{
padding: 9px;
margin: 0 0 0 0;
}
#with_sub img{
margin: 5px;
}
.closed img{
background: url(http://i.imgur.com/IKdUQR4.png) no-repeat;
width: 12px;
height: 12px;
}
.open img{
background: url(http://i.imgur.com/LZqO9sr.png) no-repeat;
width: 12px;
height: 12px;
}
#subforums ul{
display: none;
}
.cat_toggle{
cursor: pointer;
}
- Código:
/*
// General Box com efeito slide
// Créditos: Wagner'
// Leia mais em
// www.jscript.forumeiros.com
*/
jQuery(document).ready(function(){
jQuery(".cat_toggle").click(function(){
jQuery(this).next("#subforums").children("ul").stop().slideToggle(250);
jQuery(this).toggleClass('open','closed');
});
});
- Código:
<div class="general_box">
<ul class="categoria">
<li id="with_sub" class="closed">
<a rel="nofollow" class="cat_toggle">
Categoria
<img src="http://i.imgur.com/SbLamWH.gif" />
</a>
<div id="subforums">
<ul class="subforums">
<li><a href="#">Subcategoria 1</a></li>
<li><a href="#">Subcategoria 2</a></li>
</ul>
</div>
</li>
</ul>
</div>
- Código:
<li id="with_sub" class="closed">
<a rel="nofollow" class="cat_toggle">
Categoria
<img src="http://i.imgur.com/SbLamWH.gif" />
</a>
<div id="subforums">
<ul class="subforums">
<li><a href="#">Subcategoria 1</a></li>
<li><a href="#">Subcategoria 2</a></li>
</ul>
</div>
</li>
- Código:
<li><a href="#">Subcategoria 1</a></li>
