General Box com efeito slide
Página 1 de 1
General Box com efeito slide
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>
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|