Categoria retratil best skins

Qual é minha questão:
Eae.
Gostava de coloca em meu fórum o estilo dessa categoria retratil, quando passa o rato perto ou em cima da categoria é que aparece botão.

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

Olá, adicione isto ao seu CSS.

Código:

/* #region ----- Expand/Contrai Categorias ----- */
.main .main-head.collapsed {
    border-radius: 4px 4px 4px 4px;
    opacity: 0.2;
}
.main-head.collapsed:hover {
    opacity: 0.4;
}
.main-head .toggle {
    background: url("http://www.ipbforumskins.com/skindemo/public/style_images/master/cat_minimize.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 25px;
    outline: 0 none;
    text-indent: -3000em;
    visibility: hidden;
    width: 25px;
}
.main-head:hover .toggle {
    visibility: visible;
}
.main-head.collapsed .toggle {
    background-image: url("http://www.ipbforumskins.com/skindemo/public/style_images/master/cat_maximize.png");
}
/* #endregion ----- Expand/Contrai Categorias ----- */

Crie um novo Javascript com investimento no índice e nos sub-fóruns; coloque o seguinte código.

Código:

/* #region ----- Expand/Contrai Categorias ----- */
jQuery(document).ready(function(){
    var Count_Toggle=0;
    jQuery('#main .main .main-head').each(function(){
        jQuery(this).attr('id','category_' + Count_Toggle);
        jQuery(this).next().attr('id','category_' + Count_Toggle);
        jQuery(this).next().css('display',my_getcookie('cat-'+jQuery(this).next().attr('id')));

        jQuery(this).prepend('[url=http://bestskins.forumeiros.com/#'+ Count_Toggle +']Maximizar/minimizar[/url]');
       
        var Style=jQuery(this).next();
        if(Style.css('display')=='none'){
            jQuery(this).addClass('collapsed');
        }else{
            jQuery(this).removeClass('collapsed');
        }

        jQuery(this).find('.toggle.right').click(function(){
            var Style=jQuery(this).closest('.main-head').next();
            if(Style.css('display')=='none'){
                Style.slideToggle();

                my_setcookie('cat-'+jQuery(this).closest('.main-head').next().attr('id'),'block',1,0);

                jQuery(this).parent().removeClass('collapsed');
            }else{
                Style.slideToggle();

                my_setcookie('cat-'+jQuery(this).closest('.main-head').next().attr('id'),'none',1,0);

                jQuery(this).parent().addClass('collapsed');
            }
        });
        Count_Toggle++
    })
});
/* #endregion ----- Expand/Contrai Categorias ----- */

Verifique se resulta

Não resultou amigo.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Desculpe-me. Retire o código acima do seu CSS e exclua o Javascript.
Feito isso crie outro Javascript com investimento em todas as páginas e adicione o seguinte código.

Código:

$(function(){$('.main-head:has(.page-title)').prepend('<a class="collapse tcatCollapse" id="collapse_c_cat1" href="#top" style="visibility:hidden;float: right;"><img src="http://i.imgur.com/fJz0Zls.png" alt=""></a>');$('.main-head:has(.page-title)').mouseover(function(){$(this).find('a.collapse[id]').css('visibility','visible')});$('.main-head:has(.page-title)').mouseout(function(){$(this).find('a.collapse[id]').css('visibility','hidden')});$('.main-head a.collapse[id]').click(function(e){e.preventDefault()});$('.main-head a.collapse[id]').attr('onclick'," if($(this).closest('.main-head').next('.main-content:first').css('display')=='none') {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','0',10,0); $(this).closest('.main-head').next('.main-content:first').slideDown(500);$(this).find('img').attr('src','http://i.imgur.com/fJz0Zls.png');$(this).closest('.main-head');$(this).closest('.main-head').removeClass('collapsed')} else {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','1',10,0); $(this).closest('.main-head').next('.main-content:first').slideUp(500);$(this).find('img').attr('src','http://i.imgur.com/gNAasKx.png'); $(this).closest('.main-head').addClass('collapsed');}");$(document).ready(function(){$('.main-head a.collapse[id]').closest('.main-head').each(function(){if(my_getcookie($(this).find('.page-title').text()+'_ct')=='1'){$(this).next('.main-content:first').css('display','none');$(this).find('a.collapse[id] img').attr('src','http://i.imgur.com/gNAasKx.png');$(this).closest('.main-head').addClass('collapsed')}else{$(this).next('.main-content:first').css('display','block');$(this).find('a.collapse[id] img').attr('src','http://i.imgur.com/fJz0Zls.png');$(this).closest('.main-head').removeClass('collapsed')}})})});

Resulta?

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Ficou esses espaços em branco. E a Imagem do diminuir não dá, aparece um quadrado do imgur.

Poderia mandar o link do seu fórum fazendo favor?

Testei nesse aí.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Desculpe-me amigo, mas como um dos códigos não surtiu efeito e o outro provocou um bug não tenho como lhe ajudar.  

Sendo assim, procuro ainda solução.

Olá,
Tente este JQuery:

Código:


$(function(){$('.main-head:has(.page-title)').prepend('<a class="collapse tcatCollapse" id="collapse_c_cat1" href="#top" style="visibility:hidden;float: right;margin-top: -3px;"><img src="http://i.imgur.com/d7jXnmJ.png" alt=""></a>');$('.main-head:has(.page-title)').mouseover(function(){$(this).find('a.collapse[id]').css('visibility','visible')});$('.main-head:has(.page-title)').mouseout(function(){$(this).find('a.collapse[id]').css('visibility','hidden')});$('.main-head a.collapse[id]').click(function(e){e.preventDefault()});$('.main-head a.collapse[id]').attr('onclick'," if($(this).closest('.main-head').next('.main-content:first').css('display')=='none') {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','0',10,0); $(this).closest('.main-head').next('.main-content:first').slideDown(500);$(this).find('img').attr('src','http://i.imgur.com/d7jXnmJ.png');$(this).closest('.main-head');$(this).closest('.main-head').removeClass('collapsed')} else {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','1',10,0); $(this).closest('.main-head').next('.main-content:first').slideUp(500);$(this).find('img').attr('src','http://i.imgur.com/NuhxP8R.png'); $(this).closest('.main-head').addClass('collapsed');}");$(document).ready(function(){$('.main-head a.collapse[id]').closest('.main-head').each(function(){if(my_getcookie($(this).find('.page-title').text()+'_ct')=='1'){$(this).next('.main-content:first').css('display','none');$(this).find('a.collapse[id] img').attr('src','http://i.imgur.com/NuhxP8R.png');$(this).closest('.main-head').addClass('collapsed')}else{$(this).next('.main-content:first').css('display','block');$(this).find('a.collapse[id] img').attr('src','http://i.imgur.com/d7jXnmJ.png');$(this).closest('.main-head').removeClass('collapsed')}})})});


Investimentos: Índice e Sub-Fóruns.


Até mais.

Tá bom amigo, porém ela ficou um pouco para cima em ambaos (mais, menos), veja: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Queria metê-los um pouco mais para baixo de forma a que fiquem centrados com a altura da barra.

Olá,
Substitua o código por este:

Código:


$(function(){$('.main-head:has(.page-title)').prepend('<a class="collapse tcatCollapse" id="collapse_c_cat1" href="#top" style="visibility:hidden;float: right;margin-top: -8px;"><img src="http://i.imgur.com/d7jXnmJ.png" alt=""></a>');$('.main-head:has(.page-title)').mouseover(function(){$(this).find('a.collapse[id]').css('visibility','visible')});$('.main-head:has(.page-title)').mouseout(function(){$(this).find('a.collapse[id]').css('visibility','hidden')});$('.main-head a.collapse[id]').click(function(e){e.preventDefault()});$('.main-head a.collapse[id]').attr('onclick'," if($(this).closest('.main-head').next('.main-content:first').css('display')=='none') {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','0',10,0); $(this).closest('.main-head').next('.main-content:first').slideDown(500);$(this).find('img').attr('src','http://i.imgur.com/d7jXnmJ.png');$(this).closest('.main-head');$(this).closest('.main-head').removeClass('collapsed')} else {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','1',10,0); $(this).closest('.main-head').next('.main-content:first').slideUp(500);$(this).find('img').attr('src','http://i.imgur.com/NuhxP8R.png'); $(this).closest('.main-head').addClass('collapsed');}");$(document).ready(function(){$('.main-head a.collapse[id]').closest('.main-head').each(function(){if(my_getcookie($(this).find('.page-title').text()+'_ct')=='1'){$(this).next('.main-content:first').css('display','none');$(this).find('a.collapse[id] img').attr('src','http://i.imgur.com/NuhxP8R.png');$(this).closest('.main-head').addClass('collapsed')}else{$(this).next('.main-content:first').css('display','block');$(this).find('a.collapse[id] img').attr('src','http://i.imgur.com/d7jXnmJ.png');$(this).closest('.main-head').removeClass('collapsed')}})})});


Até mais.

Se não for o do Premonição.

Tente esse.

Investimento - No índice - Nos sub-fóruns 

Código:

$(function(){$('.main-head:has(.page-title)').prepend('<a class="collapse tcatCollapse" id="collapse_c_cat1" href="#top" style="visibility:hidden;float: right;margin-top: -3px;"><img src="http://i.imgur.com/d7jXnmJ.png" alt=""></a>');$('.main-head:has(.page-title)').mouseover(function(){$(this).find('a.collapse[id]').css('visibility','visible')});$('.main-head:has(.page-title)').mouseout(function(){$(this).find('a.collapse[id]').css('visibility','hidden')});$('.main-head a.collapse[id]').click(function(e){e.preventDefault()});$('.main-head a.collapse[id]').attr('onclick'," if($(this).closest('.main-head').next('.main-content:first').css('display')=='none') {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','0',10,0); $(this).closest('.main-head').next('.main-content:first').slideDown(500);$(this).find('img').attr('src','http://i.imgur.com/d7jXnmJ.png');$(this).closest('.main-head');$(this).closest('.main-head').removeClass('collapsed')} else {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','1',10,0); $(this).closest('.main-head').next('.main-content:first').slideUp(500);$(this).find('img').attr('src','http://i.imgur.com/NuhxP8R.png'); $(this).closest('.main-head').addClass('collapsed');}");$(document).ready(function(){$('.main-head a.collapse[id]').closest('.main-head').each(function(){if(my_getcookie($(this).find('.page-title').text()+'_ct')=='1'){$(this).next('.main-content:first').css('display','none');$(this).find('a.collapse[id] img').attr('src','http://i.imgur.com/NuhxP8R.png');$(this).closest('.main-head').addClass('collapsed')}else{$(this).next('.main-content:first').css('display','block');$(this).find('a.collapse[id] img').attr('src','http://i.imgur.com/d7jXnmJ.png');$(this).closest('.main-head').removeClass('collapsed')}})})});

Tá revolvido.
Obrigado!

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]Movido para: Arquivo - Pedido de código