[TUTORIAL] Criar um menu lateral com links rápidos

Instalação do Javascript

Painel de Controle Módulos HTML e Javascript Gestão dos códigos Javascript Criar um novo javascript

Habilitar o gerenciamento dos códigos JavaScript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.

Título - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.

Localização - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. No nosso caso, aplicaremos Em todas as páginas.

Código JavaScript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.

Código:

/*globals jQuery*/
 
/**
 * Creates a custom links tab.
 *
 * @author  Luiz Felipe F.
 * @see      https://lffg.github.io
 * @version  1.0.0
 * @license  MIT
 */
 
(function($, css) {
  'use strict';
 
  var categories = [{
    name: 'Categoria de Links 1',
    links: [{
      html: 'Link 1 (Cat. 1)',
      href: '#'
    }, {
      html: 'Link 3 (Cat. 1)',
      href: '#'
    }, {
      html: 'Link 2 (Cat. 1)',
      href: '#'
    }]
  }, {
    name: 'Categoria de Links 2',
    links: [{
      html: 'Link 1 (Cat. 2)',
      href: '#'
    }, {
      html: 'Link 3 (Cat. 2)',
      href: '#'
    }, {
      html: 'Link 2 (Cat. 2)',
      href: '#'
    }]
  }];
 
  $(function() {
    var $wrapper = $([
      '<div class="fa-quick-links-wrapper">',
      '  <a class="fa-quick-links-toggler">',
      '    <i class="fa fa-link"></i>',
      '  </a>',
      '  <div class="fa-quick-links-inner"></div>',
      '</div>'
    ].join(''));
 
    var $toggler = $wrapper.find('.fa-quick-links-toggler');
    var $links  = $wrapper.find('.fa-quick-links-inner');
 
    $toggler.on('click', function(event) {
      event.preventDefault();
 
      $(this).toggleClass('active');
    });
 
    $wrapper.on('click', function(event) {
      event.stopPropagation();
    });
 
    $(document).on('click', function() {
      if ($toggler.is('.active')) $toggler.removeClass('active');
    });
 
    $.each(categories, function(index, category) {
      if (! category.links) return;
 
      var $category = $([
        '<div class="fa-quick-links-category">',
        '  ' + $('<label>', { 'text': category.name }).prop('outerHTML'),
        '  <ul></ul>',
        '</div>'
      ].join(''));
 
      $.each(category.links, function(index, link) {
        if (! link.href || ! link.html) return;
 
        $('<a>', {
          'class': 'fa-quick-links-link',
          'href': link.href,
          'html': link.html
        }).appendTo($category.find('ul'));
      });
 
      $category.appendTo($links);
    });
 
    $wrapper.appendTo('body');
    $('<style>', { 'text': css.join('') }).appendTo('head');
  });
})(jQuery, [
  '.fa-quick-links-wrapper, .fa-quick-links-wrapper * {',
  '  box-sizing: border-box;',
  '}',
  '',
  '.fa-quick-links-wrapper {',
  '  position: fixed;',
  '  left: 0;',
  '  top: 20%;',
  '}',
  '',
  '.fa-quick-links-wrapper > .fa-quick-links-toggler {',
  '  display: flex;',
  '  align-items: center;',
  '  justify-content: center;',
  '  font-size: 19px;',
  '  color: #fff;',
  '  background-color: #39c;',
  '  border-radius: 0 3px 3px 0;',
  '  width: 47px;',
  '  height: 47px;',
  '  transition: all linear 125ms;',
  '  cursor: pointer;',
  '  box-shadow: inset -1px -2px rgba(0, 0, 0, 0.06);',
  '}',
  '',
  '.fa-quick-links-wrapper > .fa-quick-links-toggler:hover {',
  '  background-color: #444;',
  '}',
  '',
  '.fa-quick-links-wrapper > .fa-quick-links-inner {',
  '  display: none;',
  '}',
  '',
  '.fa-quick-links-wrapper > .fa-quick-links-toggler.active + .fa-quick-links-inner {',
  '  display: block;',
  '}',
  '',
  '.fa-quick-links-inner {',
  '  background-color: #fff;',
  '  box-shadow: 3px 3px rgba(0, 0, 0, 0.48);',
  '  border: solid 1px #ddd;',
  '  border-left: none;',
  '  margin-top: 1px;',
  '  width: 310px;',
  '  max-height: 300px;',
  '  overflow-y: scroll;',
  '}',
  '',
  '.fa-quick-links-inner > div > label {',
  '  background-color: #39c;',
  '  display: block;',
  '  color: #fff;',
  '  padding: 13px 15px;',
  '  font-size: 13.5px;',
  '  font-weight: 600;',
  '}',
  '',
  '.fa-quick-links-inner > div a {',
  '  display: block;',
  '  padding: 12px 15px;',
  '  font-size: 11.6px;',
  '  color: #3195c7;',
  '}',
  '',
  '.fa-quick-links-inner > div a:hover {',
  '  background-color: #ddd;',
  '  color: #555;',
  '}',
  '',
  '.fa-quick-links-inner::-webkit-scrollbar {',
  '  width: 10px;',
  '}',
  '',
  '.fa-quick-links-inner::-webkit-scrollbar-track {',
  '  background: #dddddd;',
  '}',
  '',
  '.fa-quick-links-inner::-webkit-scrollbar-thumb {',
  '  background: #c3c5c5;',
  '  box-shadow: inset 0 0 3px 1px #00000026;',
  '}'
]);

• Resultado:
  
  

Dúvidas gerais

• Porque o ícone do menu não aparece?
  Para que o ícone apareça corretamente no seu fórum, você precisa de instalar o FontAwesome.
  
  
• Como posso mudar o ícone do menu?
  No código JavaScript, localize esta parte:
  

  Código:

   var $wrapper = $([
      '<div class="fa-quick-links-wrapper">',
      '  <a class="fa-quick-links-toggler">',
      '    <i class="fa fa-link"></i>',
      '  </a>',
      '  <div class="fa-quick-links-inner"></div>',
      '</div>'
    ].join(''));

  E em
  

  Código:

  <i class="fa fa-link"></i>

  você pode alterar o fa-link para o código do ícone do FontAwesome que deseja, como por exemplo: fa-magic
  
  
• Quantos links posso ter?
  Você pode ter quantos links desejar, o menu só tem aquela altura definida e possui um scrollbar, logo não prejudicará nenhum design do seu fórum, apenas aumentará o scroll há medida que vai adicionando links e categorias.