Olá amigos, hoje trago um tutorial de um efeito existente em alguns fóruns IPB, que se trata da descrição da categoria em modo hover.
Veja um exemplo
Para alcançar este efeito siga o tutorial:
Abra o template index_box
Procure por
Agora procure por
Espero que seja útil a alguém..
@Edit: Só tem um pequeno problema que eu não sei resolver, que é quando a categoria não contém descrição, quando isso acontece aparece uma parada meio estranha la, acho que da para usar alguma função com if para resolver..
Veja um exemplo
Para alcançar este efeito siga o tutorial:
Abra o template index_box
Procure por
- Código:
{catrow.forumrow.FORUM_NAME}
- Código:
<span class="forum_name">
<h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
</span>
- Código:
<br/>
Agora procure por
- Código:
{catrow.forumrow.FORUM_DESC}
- Código:
<span class="forum_desc_pos">
<span class="forum_desc_con" style="left: 10px; opacity: 0; display: none;">
<span class="forum_description">{catrow.forumrow.FORUM_DESC}</span>
</span>
</span>
- Código:
/*
// Descrição em modo hover estilo IPB
// Criação: Invision Power Systems
// Adaptado por: Wagner'
// Leia mais em
// www.jscript.forumeiros.com
*/
.forum_desc_pos {
position: relative;
}
.forum_desc_con {
width: 350px;
display: none;
left: 10px;
float: left;
position: absolute;
top: -4px;
padding-left: 10px;
background: url("http://i.imgur.com/E4lHPSe.png") no-repeat 6px 9px;
z-index: 10000;
}
.forum_description {
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: url("http://i.imgur.com/zkoWf4I.png") repeat;
background: rgba(15, 15, 15, 0.9);
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
font-size: 11px;
padding: 5px;
display: block;
float: left;
}
- Código:
/*
// Descrição em modo hover estilo IPB
// Criação: Invision Power Systems
// Adaptado por: Wagner'
// Leia mais em
// www.jscript.forumeiros.com
*/
jQuery(document).ready(function(){
jQuery(".forum_name").hover(function() {
jQuery(this).next(".forum_desc_pos").children(".forum_desc_con").stop()
.animate({left: "0", opacity:1}, "fast")
.css("display","block");
}, function() {
jQuery(this).next(".forum_desc_pos").children(".forum_desc_con").stop()
.animate({left: "10", opacity: 0}, "fast", function(){
jQuery(this).hide();
})
});
});
Espero que seja útil a alguém..
@Edit: Só tem um pequeno problema que eu não sei resolver, que é quando a categoria não contém descrição, quando isso acontece aparece uma parada meio estranha la, acho que da para usar alguma função com if para resolver..