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>