Categorias em Abas

Detalhes da questão

Endereço do fórum: http://pokemonillium.forumeiros.com
Versão do fórum: phpBB3

Descrição

Olá,

Gostaria de saber como posso aplicar o efeito que faz com que as categorias sejam organizadas em abas ao invés de uma embaixo da outra. Logo, a primeira categoria sempre seria aquela em destaque e para visualizar as demais seria necessário clicar em suas respectivas abas.

Fórum em que vi o efeito: http://the-fate-of-ninja.forumactif.com/forum

Olá

Siga as seguintes orientações:

Painel de controle>Visualização>Página inicial>Estrutura e hierarquia>

Obs: Basta escolher como deseja visualizar as categorias.

Atenciosamente: Ketholy

Olá Ketholy,

Não me refiro a estrutura na qual as categorias são dispostas. Gostaria de separa-las por abas, de modo que estas abas estariam localizadas acima da primeira categoria, e ao clicar sobre uma delas a categoria principal seria retirada e a nova seria inserida em seu lugar.

Aqui mais alguns fóruns que utilizam isto

http://lazarus-project.forumactif.com/

http://www.twenty-one.eu/forum

zHugh escreveu:Olá Ketholy,

Não me refiro a estrutura na qual as categorias são dispostas. Gostaria de separa-las por abas, de modo que estas abas estariam localizadas acima da primeira categoria, e ao clicar sobre uma delas a categoria principal seria retirada e a nova seria inserida em seu lugar.

Aqui mais alguns fóruns que utilizam isto

http://lazarus-project.forumactif.com/

http://www.twenty-one.eu/forum

Dê uma olhada nesse Tutorial

Olá,

O Tutorial disponibilizado resolveu parcialmente a questão. As abas foram inseridas, no entanto há dois problemas.

1) Todas as categorias foram ocultas. Eu gostaria que a primeira categoria sempre estivesse naturalmente aberta a fim de facilitar não apenas seu acesso como evitar de tornar o layout do fórum estranho.

2) Gostaria que as abas estivessem localidades abaixo da Home-page (preferencialmente abaixo do chat, já que eu o utilizo na parte superior do forum), não acima (entre logo e homepage)

Peço que o senhor desative o código para que possamos bolar um novo seguindo os seus critérios. o/

Codigo retirado

Troque por este:

Código:

(function ($, css) {
  'use strict';

  $(function () {
   
    var $div = $('<div>', { 'class': 'fa-category-controller' });
   
    $('.forabg').each(function (index, selector) {
      var $this = $(this);
      var title = $this.find('.table-title > h2').text();

      $this.attr('data-category-id', index);
     
      if (index === 0) {
        $this.addClass('fa-category-visible');
       
        $div.insertBefore($this);
        $div.append($('<a>', {
          'href'  : 'javascript:void(0);',
          'class'  : 'fa-category-controller-item fa-category-controller-active',
          'data-id': index,
          'text'  : title
        }));
       
        return;
      }

      $this.hide();
      $div.append($('<a>', {
        'href'  : 'javascript:void(0);',
        'class'  : 'fa-category-controller-item',
        'data-id': index,
        'text'  : title
      }));
    });

    $div
      .children('a')
        .on('click', function () {
          var $this  = $(this);
          var id      = $this.attr('data-id');
          var current = $('.fa-category-visible').attr('data-category-id');

          $('.fa-category-controller-active').removeClass('fa-category-controller-active');
          $this.addClass('.fa-category-controller-active');

          if (id === current) {
            return;
          }

          $('.fa-category-visible')
            .removeClass('fa-category-visible')
            .stop()
            .slideUp(450, function () {
              $('.forabg[data-category-id="' + id + '"]')
                .addClass('fa-category-visible')
                .stop()
                .slideDown(450)
              ;
            })
          ;
        })
    ;

    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
  '.fa-category-controller {',
  '  margin: 20px 3px;',
  '}',
  '',
  '.fa-category-controller > a {',
  '  display: inline-block;',
  '  background-color: #2e3133;',
  '  color: #fff;',
  '  padding: 10px;',
  '  border-radius: 2px;',
  '  margin-right: 5px;',
  '  box-shadow: inset 0 2px rgba(255, 255, 255, 0.13);',
  '}'
]));

o/

Funcionou perfeitamente <3

É possível que eu altere o css a meu gosto sem que interfira com o codigo, correto?

Sim. CSS geralmente não altera o comportamento do JavaScript.