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

Código:

{catrow.forumrow.FORUM_NAME}

E substitua por

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>

Logo abaixo deste código terá um tag

Código:

<br/>

Apague ela

Agora procure por

Código:

{catrow.forumrow.FORUM_DESC}

Substitua isso por

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>

Adicione isso em seu CSS

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;
}

E isso em seu Javascript

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();
      })
   });
});

Pronto, basta testar o efeito

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..

Excelente mod amigo!

Tutorial aprovado e movido para a área correta.

JS